@newtonedev/configurator 0.1.1 → 0.1.2

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG9D,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AACxF,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,YAAY,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGzD,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAG9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGlD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,YAAY,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,YAAY,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG9D,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,uBAAuB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACvG,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,YAAY,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGzD,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAG9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGlD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,YAAY,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,YAAY,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -72,8 +72,8 @@ var DEFAULT_CONFIGURATOR_STATE = {
     theme: "neutral"
   },
   spacing: {
-    density: 0.5
-    // 1.0x multiplier = preserves current hardcoded values
+    preset: "md"
+    // Medium (8px base): default/balanced spacing
   },
   roundness: {
     intensity: 0.5
@@ -269,11 +269,11 @@ function configuratorReducer(state, action) {
         }
       };
     // Spacing actions
-    case "SET_SPACING_DENSITY":
+    case "SET_SPACING_PRESET":
       return {
         ...state,
         spacing: {
-          density: clamp(action.density, 0, 1)
+          preset: action.preset
         }
       };
     // Roundness actions
@@ -440,9 +440,18 @@ function traditionalHueToOklch(hue) {
 }
 
 // src/bridge/toThemeConfig.ts
-function densityToMultiplier(density) {
-  return 0.5 + density * 1.5;
-}
+var SPACING_PRESET_TO_BASE = {
+  xs: 6,
+  // Extra Small: compact/dense UI
+  sm: 7,
+  // Small: tighter spacing
+  md: 8,
+  // Medium: default/balanced
+  lg: 9,
+  // Large: more spacious
+  xl: 10
+  // Extra Large: maximum spacing
+};
 function roundnessToMultiplier(intensity) {
   return intensity * 2;
 }
@@ -508,7 +517,7 @@ function toThemeConfig(state) {
     darkest: state.dynamicRange.darkest,
     ...hueGrading ? { hueGrading } : {}
   };
-  const spacingMultiplier = densityToMultiplier(state.spacing?.density ?? 0.5);
+  const spacingBase = SPACING_PRESET_TO_BASE[state.spacing?.preset ?? "md"];
   const radiusMultiplier = roundnessToMultiplier(state.roundness?.intensity ?? 0.5);
   return {
     colorSystem: { dynamicRange, palettes },
@@ -522,12 +531,21 @@ function toThemeConfig(state) {
       offsets: [-0.02, 0, 0.04]
     },
     spacing: {
-      xs: Math.round(4 * spacingMultiplier),
-      sm: Math.round(8 * spacingMultiplier),
-      md: Math.round(12 * spacingMultiplier),
-      lg: Math.round(16 * spacingMultiplier),
-      xl: Math.round(24 * spacingMultiplier),
-      xxl: Math.round(32 * spacingMultiplier)
+      "00": Math.round(spacingBase * 0),
+      // Always 0
+      "02": Math.round(spacingBase * 0.25),
+      "04": Math.round(spacingBase * 0.5),
+      "06": Math.round(spacingBase * 0.75),
+      "08": Math.round(spacingBase * 1),
+      // Equals base
+      "10": Math.round(spacingBase * 1.25),
+      "12": Math.round(spacingBase * 1.5),
+      "16": Math.round(spacingBase * 2),
+      "20": Math.round(spacingBase * 2.5),
+      "24": Math.round(spacingBase * 3),
+      "32": Math.round(spacingBase * 4),
+      "40": Math.round(spacingBase * 5),
+      "48": Math.round(spacingBase * 6)
     },
     radius: {
       none: 0,
@@ -1213,21 +1231,25 @@ var ICON_WEIGHT_OPTIONS = [
 ];
 function DesignPanel({ state, dispatch }) {
   const tokens = useTokens(1);
-  const density = state.spacing?.density ?? 0.5;
+  const spacingPreset = state.spacing?.preset ?? "md";
   const intensity = state.roundness?.intensity ?? 0.5;
   const baseSize = state.typography?.scale.baseSize ?? 16;
   const ratio = state.typography?.scale.ratio ?? 1.25;
   const variant = state.icons?.variant ?? "rounded";
   const weight = state.icons?.weight ?? 400;
   return /* @__PURE__ */ React.createElement(Card, { elevation: 1, style: styles5.container }, /* @__PURE__ */ React.createElement(Text, { style: [styles5.title, { color: srgbToHex(tokens.textPrimary.srgb) }] }, "Design System"), /* @__PURE__ */ React.createElement(Text, { style: [styles5.subtitle, { color: srgbToHex(tokens.textSecondary.srgb) }] }, "Spacing"), /* @__PURE__ */ React.createElement(
-    Slider,
+    Select,
     {
-      value: Math.round(density * 100),
-      onValueChange: (v) => dispatch({ type: "SET_SPACING_DENSITY", density: v / 100 }),
-      min: 0,
-      max: 100,
-      label: "Density",
-      showValue: true
+      value: spacingPreset,
+      onValueChange: (preset) => dispatch({ type: "SET_SPACING_PRESET", preset }),
+      options: [
+        { value: "xs", label: "Extra Small" },
+        { value: "sm", label: "Small" },
+        { value: "md", label: "Medium" },
+        { value: "lg", label: "Large" },
+        { value: "xl", label: "Extra Large" }
+      ],
+      label: "Preset"
     }
   ), /* @__PURE__ */ React.createElement(Text, { style: [styles5.subtitle, { color: srgbToHex(tokens.textSecondary.srgb) }] }, "Roundness"), /* @__PURE__ */ React.createElement(
     Slider,