@newtonedev/configurator 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Configurator.d.ts +13 -0
- package/dist/Configurator.d.ts.map +1 -0
- package/dist/Configurator.types.d.ts +13 -0
- package/dist/Configurator.types.d.ts.map +1 -0
- package/dist/bridge/toCSS.d.ts +7 -0
- package/dist/bridge/toCSS.d.ts.map +1 -0
- package/dist/bridge/toJSON.d.ts +15 -0
- package/dist/bridge/toJSON.d.ts.map +1 -0
- package/dist/bridge/toThemeConfig.d.ts +8 -0
- package/dist/bridge/toThemeConfig.d.ts.map +1 -0
- package/dist/constants.d.ts +16 -0
- package/dist/constants.d.ts.map +1 -0
- package/dist/hooks/useConfigurator.d.ts +11 -0
- package/dist/hooks/useConfigurator.d.ts.map +1 -0
- package/dist/hooks/usePreviewColors.d.ts +8 -0
- package/dist/hooks/usePreviewColors.d.ts.map +1 -0
- package/dist/hue-conversion.d.ts +10 -0
- package/dist/hue-conversion.d.ts.map +1 -0
- package/dist/index.cjs +827 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +814 -0
- package/dist/index.js.map +1 -0
- package/dist/panels/CanvasPanel.d.ts +8 -0
- package/dist/panels/CanvasPanel.d.ts.map +1 -0
- package/dist/panels/ExportPanel.d.ts +8 -0
- package/dist/panels/ExportPanel.d.ts.map +1 -0
- package/dist/panels/GlobalPanel.d.ts +10 -0
- package/dist/panels/GlobalPanel.d.ts.map +1 -0
- package/dist/panels/PalettePanel.d.ts +13 -0
- package/dist/panels/PalettePanel.d.ts.map +1 -0
- package/dist/panels/PreviewPanel.d.ts +12 -0
- package/dist/panels/PreviewPanel.d.ts.map +1 -0
- package/dist/state/actions.d.ts +62 -0
- package/dist/state/actions.d.ts.map +1 -0
- package/dist/state/defaults.d.ts +9 -0
- package/dist/state/defaults.d.ts.map +1 -0
- package/dist/state/reducer.d.ts +4 -0
- package/dist/state/reducer.d.ts.map +1 -0
- package/dist/types.d.ts +35 -0
- package/dist/types.d.ts.map +1 -0
- package/package.json +56 -0
- package/src/Configurator.tsx +177 -0
- package/src/Configurator.types.ts +13 -0
- package/src/bridge/toCSS.ts +43 -0
- package/src/bridge/toJSON.ts +24 -0
- package/src/bridge/toThemeConfig.ts +58 -0
- package/src/constants.ts +16 -0
- package/src/hooks/useConfigurator.ts +30 -0
- package/src/hooks/usePreviewColors.ts +40 -0
- package/src/hue-conversion.ts +25 -0
- package/src/index.ts +24 -0
- package/src/panels/CanvasPanel.tsx +90 -0
- package/src/panels/ExportPanel.tsx +95 -0
- package/src/panels/GlobalPanel.tsx +126 -0
- package/src/panels/PalettePanel.tsx +145 -0
- package/src/panels/PreviewPanel.tsx +124 -0
- package/src/state/actions.ts +27 -0
- package/src/state/defaults.ts +74 -0
- package/src/state/reducer.ts +163 -0
- package/src/types.ts +37 -0
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ConfiguratorProps } from './Configurator.types';
|
|
3
|
+
/**
|
|
4
|
+
* Newtone Configurator — embeddable palette builder widget.
|
|
5
|
+
*
|
|
6
|
+
* Must be rendered inside a NewtoneProvider owned by the consuming app.
|
|
7
|
+
* The configurator reads tokens via useTokens() for self-affecting styling.
|
|
8
|
+
*
|
|
9
|
+
* The consuming app should update its NewtoneProvider config prop
|
|
10
|
+
* based on the onChange callback, creating the self-affecting loop.
|
|
11
|
+
*/
|
|
12
|
+
export declare function Configurator({ initialState, onChange, showExport, showPreview, }: ConfiguratorProps): React.JSX.Element;
|
|
13
|
+
//# sourceMappingURL=Configurator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Configurator.d.ts","sourceRoot":"","sources":["../src/Configurator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAQ9D;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EAC3B,YAAY,EACZ,QAAQ,EACR,UAAiB,EACjB,WAAkB,GACnB,EAAE,iBAAiB,qBAkHnB"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { ConfiguratorState } from './types';
|
|
2
|
+
import type { NewtoneThemeConfig } from '@newtonedev/components';
|
|
3
|
+
export interface ConfiguratorProps {
|
|
4
|
+
/** Initial state (optional, defaults to DEFAULT_CONFIGURATOR_STATE) */
|
|
5
|
+
readonly initialState?: Partial<ConfiguratorState>;
|
|
6
|
+
/** Called whenever the configurator state changes */
|
|
7
|
+
readonly onChange?: (state: ConfiguratorState, config: NewtoneThemeConfig) => void;
|
|
8
|
+
/** Whether to show the export panel (default: true) */
|
|
9
|
+
readonly showExport?: boolean;
|
|
10
|
+
/** Whether to show the preview panel (default: true) */
|
|
11
|
+
readonly showPreview?: boolean;
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=Configurator.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Configurator.types.d.ts","sourceRoot":"","sources":["../src/Configurator.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAEjE,MAAM,WAAW,iBAAiB;IAChC,uEAAuE;IACvE,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACnD,qDAAqD;IACrD,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACnF,uDAAuD;IACvD,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,wDAAwD;IACxD,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;CAChC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ConfiguratorState } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Generate CSS custom properties for both light and dark modes.
|
|
4
|
+
* Computes all 12 design tokens for the neutral theme at default elevation.
|
|
5
|
+
*/
|
|
6
|
+
export declare function toCSS(state: ConfiguratorState): string;
|
|
7
|
+
//# sourceMappingURL=toCSS.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toCSS.d.ts","sourceRoot":"","sources":["../../src/bridge/toCSS.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAMlD;;;GAGG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,iBAAiB,GAAG,MAAM,CAgCtD"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { ConfiguratorState } from '../types';
|
|
2
|
+
import type { NewtoneThemeConfig } from '@newtonedev/components';
|
|
3
|
+
/** Serializable configurator export format */
|
|
4
|
+
export interface ConfiguratorExport {
|
|
5
|
+
readonly version: '1.0';
|
|
6
|
+
readonly configuratorState: ConfiguratorState;
|
|
7
|
+
readonly themeConfig: NewtoneThemeConfig;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Export the configurator state as a JSON string.
|
|
11
|
+
* Includes both the human-readable state (for round-tripping)
|
|
12
|
+
* and the engine-ready theme config.
|
|
13
|
+
*/
|
|
14
|
+
export declare function toJSON(state: ConfiguratorState): string;
|
|
15
|
+
//# sourceMappingURL=toJSON.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toJSON.d.ts","sourceRoot":"","sources":["../../src/bridge/toJSON.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAGjE,8CAA8C;AAC9C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC;IACxB,QAAQ,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;IAC9C,QAAQ,CAAC,WAAW,EAAE,kBAAkB,CAAC;CAC1C;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,iBAAiB,GAAG,MAAM,CAOvD"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ConfiguratorState } from '../types';
|
|
2
|
+
import type { NewtoneThemeConfig } from '@newtonedev/components';
|
|
3
|
+
/**
|
|
4
|
+
* Convert configurator state (traditional hues, human-readable controls)
|
|
5
|
+
* to a NewtoneThemeConfig (OKLCH hues, engine-ready format).
|
|
6
|
+
*/
|
|
7
|
+
export declare function toThemeConfig(state: ConfiguratorState): NewtoneThemeConfig;
|
|
8
|
+
//# sourceMappingURL=toThemeConfig.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toThemeConfig.d.ts","sourceRoot":"","sources":["../../src/bridge/toThemeConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAIjE;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,GAAG,kBAAkB,CAgD1E"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Hue ranges for semantic palettes (traditional HSL hues).
|
|
3
|
+
* Indices 0 (Neutral) and 1 (Accent) are unconstrained.
|
|
4
|
+
*
|
|
5
|
+
* For wrapping ranges (e.g. Error crosses 0°), max exceeds 359.
|
|
6
|
+
* The HueSlider component normalizes values to [0, 359] via % 360.
|
|
7
|
+
*
|
|
8
|
+
* Gaps between ranges prevent adjacent semantics from overlapping:
|
|
9
|
+
* - 15–25: gap between Error (reds) and Warning (yellows)
|
|
10
|
+
* - 55–80: gap between Warning and Success (greens)
|
|
11
|
+
*/
|
|
12
|
+
export declare const SEMANTIC_HUE_RANGES: Readonly<Record<number, {
|
|
13
|
+
readonly min: number;
|
|
14
|
+
readonly max: number;
|
|
15
|
+
}>>;
|
|
16
|
+
//# sourceMappingURL=constants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE;IAAE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC,CAIxG,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ConfiguratorState } from '../types';
|
|
2
|
+
import type { ConfiguratorAction } from '../state/actions';
|
|
3
|
+
import type { NewtoneThemeConfig } from '@newtonedev/components';
|
|
4
|
+
export interface UseConfiguratorResult {
|
|
5
|
+
readonly state: ConfiguratorState;
|
|
6
|
+
readonly dispatch: (action: ConfiguratorAction) => void;
|
|
7
|
+
readonly themeConfig: NewtoneThemeConfig;
|
|
8
|
+
readonly reset: () => void;
|
|
9
|
+
}
|
|
10
|
+
export declare function useConfigurator(initialState?: Partial<ConfiguratorState>): UseConfiguratorResult;
|
|
11
|
+
//# sourceMappingURL=useConfigurator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useConfigurator.d.ts","sourceRoot":"","sources":["../../src/hooks/useConfigurator.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAKjE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC;IAClC,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACxD,QAAQ,CAAC,WAAW,EAAE,kBAAkB,CAAC;IACzC,QAAQ,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,eAAe,CAC7B,YAAY,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,GACxC,qBAAqB,CAYvB"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ColorResult } from 'newtone';
|
|
2
|
+
import type { ConfiguratorState } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* Compute preview swatches for all palettes.
|
|
5
|
+
* Returns an array of arrays: one preview row per palette.
|
|
6
|
+
*/
|
|
7
|
+
export declare function usePreviewColors(state: ConfiguratorState): readonly (readonly ColorResult[])[];
|
|
8
|
+
//# sourceMappingURL=usePreviewColors.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePreviewColors.d.ts","sourceRoot":"","sources":["../../src/hooks/usePreviewColors.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAKlD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAAC,SAAS,WAAW,EAAE,CAAC,EAAE,CA2B9F"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Convert a traditional HSL color wheel hue (0-359) to its equivalent OKLCH hue.
|
|
3
|
+
*
|
|
4
|
+
* Uses the fully saturated HSL color (S=1, L=0.5) at the given hue,
|
|
5
|
+
* converts to sRGB, then extracts the OKLCH hue component.
|
|
6
|
+
*
|
|
7
|
+
* Traditional hues: 0=red, 60=yellow, 120=green, 180=cyan, 240=blue, 300=magenta.
|
|
8
|
+
*/
|
|
9
|
+
export declare function traditionalHueToOklch(hue: number): number;
|
|
10
|
+
//# sourceMappingURL=hue-conversion.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hue-conversion.d.ts","sourceRoot":"","sources":["../src/hue-conversion.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAazD"}
|