@5even7/dlc-ui 0.1.0 → 0.2.0

package/dist/vue2.mjs

@@ -112,50 +112,50 @@ const PALETTES$1 = {
  * Capsule 预置：仅星云材质 NC-01~NC-06（NC-07~09 aurora 已移除）。
  * 颜色引用公共色板，seed/speed 决定形态与流速。
  */
-const CAPSULE_PRESETS = [
-  { id: 'original', code: 'NC-01', name: 'ORIGINAL', group: 'warm', seed: 1.7, speed: 0.5, colors: [...PALETTES$1.original] },
-  { id: 'ocean', code: 'NC-02', name: 'OCEAN', group: 'cold', seed: 8.2, speed: 0.48, colors: [...PALETTES$1.ocean] },
-  { id: 'klein', code: 'NC-03', name: 'KLEIN', group: 'cold', seed: 14.1, speed: 0.49, colors: [...PALETTES$1.klein] },
-  { id: 'ultraviolet', code: 'NC-04', name: 'ULTRAVIOLET', group: 'cold', seed: 23.4, speed: 0.47, colors: [...PALETTES$1.ultraviolet] },
-  { id: 'chrome', code: 'NC-05', name: 'CHROME', group: 'cold', seed: 37.8, speed: 0.42, colors: [...PALETTES$1.chrome] },
-  { id: 'plus', code: 'NC-06', name: 'PLUS', group: 'warm', seed: 51.3, speed: 0.5, colors: [...PALETTES$1.plus] }
+const CAPSULE_PRESETS = [
+  { id: 'original', code: 'NC-01', name: '初光', group: 'warm', seed: 1.7, speed: 0.5, colors: [...PALETTES$1.original] },
+  { id: 'ocean', code: 'NC-02', name: '沧溟', group: 'cold', seed: 8.2, speed: 0.48, colors: [...PALETTES$1.ocean] },
+  { id: 'klein', code: 'NC-03', name: '玄夜', group: 'cold', seed: 14.1, speed: 0.49, colors: [...PALETTES$1.klein] },
+  { id: 'ultraviolet', code: 'NC-04', name: '紫霄', group: 'cold', seed: 23.4, speed: 0.47, colors: [...PALETTES$1.ultraviolet] },
+  { id: 'chrome', code: 'NC-05', name: '银汉', group: 'cold', seed: 37.8, speed: 0.42, colors: [...PALETTES$1.chrome] },
+  { id: 'plus', code: 'NC-06', name: '熔金', group: 'warm', seed: 51.3, speed: 0.5, colors: [...PALETTES$1.plus] }
 ];
 
 const PROGRESS_PRESETS = [
-  {
-    id: 'model-training',
-    code: 'NC-10',
-    name: 'MODEL TRAINING',
+  {
+    id: 'model-training',
+    code: 'NC-10',
+    name: '星火',
     subtitle: 'SHA 4.5 + 100 2026 TKN',
     group: 'progress',
     initialProgress: 43,
     edgeStyle: 'flow',
     colors: ['#2B1025', '#FF3F94', '#FF8A3D', '#FFF06A']
   },
-  {
-    id: 'agent-migration',
-    code: 'NC-11',
-    name: 'AGENT MIGRATION',
+  {
+    id: 'agent-migration',
+    code: 'NC-11',
+    name: '迁流',
     subtitle: 'TRANSFERRING PROTOCOL',
     group: 'progress',
     initialProgress: 33,
     edgeStyle: 'flow',
     colors: ['#101C37', '#245BFF', '#00CFFF', '#5DFFE6']
   },
-  {
-    id: 'visual-training',
-    code: 'NC-12',
-    name: 'VISUAL TRAINING',
+  {
+    id: 'visual-training',
+    code: 'NC-12',
+    name: '幻境',
     subtitle: 'GENERATING POWER ++',
     group: 'progress',
     initialProgress: 58,
     edgeStyle: 'flow',
     colors: ['#21142D', '#7042FF', '#42F58D', '#C4FF8A']
   },
-  {
-    id: 'tide',
-    code: 'NC-13',
-    name: 'TIDE',
+  {
+    id: 'tide',
+    code: 'NC-13',
+    name: '汐潮',
     subtitle: 'MOON PULL / COAST',
     group: 'progress',
     initialProgress: 30,
@@ -164,64 +164,33 @@ const PROGRESS_PRESETS = [
   }
 ];
 
-[...CAPSULE_PRESETS, ...PROGRESS_PRESETS];
-
-function validatePreset(preset) {
-  return Boolean(
-    preset &&
-    typeof preset.id === 'string' &&
-    typeof preset.code === 'string' &&
-    typeof preset.name === 'string' &&
-    Number.isFinite(preset.seed) &&
-    Number.isFinite(preset.speed) &&
-    Array.isArray(preset.colors) &&
-    preset.colors.length === 4
-  );
-}
-
-function validateProgressPreset(preset) {
-  return Boolean(
-    preset &&
-    typeof preset.id === 'string' &&
-    typeof preset.code === 'string' &&
-    typeof preset.name === 'string' &&
-    preset.group === 'progress' &&
-    Number.isFinite(preset.initialProgress) &&
-    ['flow', 'tide'].indexOf(preset.edgeStyle || 'flow') !== -1 &&
-    Array.isArray(preset.colors) &&
-    preset.colors.length === 4
-  );
-}
-
-function getPreset(kind, ref) {
-  const list = kind === 'capsule' ? CAPSULE_PRESETS : kind === 'progress' ? PROGRESS_PRESETS : null;
-  if (!list) throw new Error(`Unknown preset kind: ${kind} (use "capsule" or "progress")`);
-  if (ref && typeof ref === 'object') {
-    const valid = kind === 'capsule' ? validatePreset(ref) : validateProgressPreset(ref);
-    if (!valid) throw new Error(`Invalid ${kind} preset object`);
-    return ref;
-  }
-  const key = String(ref).trim().toLowerCase();
-  const found = list.find(
-    (preset) =>
-      preset.id.toLowerCase() === key ||
-      preset.code.toLowerCase() === key ||
-      preset.name.toLowerCase() === key
-  );
-  if (!found) throw new Error(`Unknown ${kind} preset: ${ref}`);
-  return found;
+[...CAPSULE_PRESETS, ...PROGRESS_PRESETS];
+
+/**
+ * Resolve a preset by its literary name (e.g. '沧溟').
+ * Matching is case-insensitive and ignores surrounding whitespace,
+ * so '沧溟' and ' 沧溟 ' both work.
+ */
+function getPreset(kind, ref) {
+  const list = kind === 'capsule' ? CAPSULE_PRESETS : kind === 'progress' ? PROGRESS_PRESETS : null;
+  if (!list) throw new Error(`Unknown preset kind: ${kind} (use "capsule" or "progress")`);
+  const key = String(ref).trim().toLowerCase();
+  const found = list.find(
+    (preset) => preset.name.toLowerCase() === key
+  );
+  if (!found) throw new Error(`Unknown ${kind} preset: ${ref}`);
+  return found;
 }
 
 const DEFAULTS = {
   capsule: {
     width: '100%',
     height: 160,
-    quality: 'auto',
-    renderer: 'auto',
-    respectReducedMotion: true,
-    interactive: true,
-    mouseColor: true,
-    showCopy: true
+    quality: 'auto',
+    renderer: 'auto',
+    respectReducedMotion: true,
+    mouseColor: true,
+    showCopy: true
   },
   progress: {
     width: 454,
@@ -723,15 +692,15 @@ function prefersReducedMotion$1() {
  * Mount a cosmic (nebula) capsule into `container`.
  *
  * Options: preset (id/code/name or object), width, height (number=px or
- * string with px/%/vw/vh/em/rem), colors, seed, speed, quality, interactive,
- * respectReducedMotion, copy, cssVars.
+ * string with px/%/vw/vh/em/rem), colors, seed, speed, quality,
+ * respectReducedMotion, copy, cssVars.
  */
 function createCapsule(container, options = {}) {
   if (!container || typeof container.appendChild !== 'function') {
     throw new Error('createCapsule: container element is required');
   }
 
-  const preset = { ...getPreset('capsule', options.preset ?? 'NC-01') };
+  const preset = { ...getPreset('capsule', options.preset ?? '初光') };
   const merged = normalizeOptions(DEFAULTS.capsule, preset, options);
   const copy = { ...COPY, ...(merged.copy || {}) };
 
@@ -818,10 +787,8 @@ function createCapsule(container, options = {}) {
 
   const visibility = createVisibilityGuard(root);
 
-  if (merged.interactive !== false) {
-    root.addEventListener('pointerenter', () => emitter.emit('pointerenter', { preset: { ...preset } }));
-    root.addEventListener('pointerleave', () => emitter.emit('pointerleave', { preset: { ...preset } }));
-  }
+  root.addEventListener('pointerenter', () => emitter.emit('pointerenter', { preset: { ...preset } }));
+  root.addEventListener('pointerleave', () => emitter.emit('pointerleave', { preset: { ...preset } }));
   root.addEventListener('click', (event) => {
     emitter.emit('click', { event, preset: { ...preset } });
   });
@@ -861,12 +828,26 @@ function createCapsule(container, options = {}) {
       emitter.emit('presetchange', { preset: { ...next } });
       return this;
     },
-    setColors(colors) {
-      if (!Array.isArray(colors) || colors.length !== 4) return this;
-      preset.colors = colors;
-      renderer.setPreset({ ...preset, colors });
-      return this;
-    },
+    setColors(colors) {
+      if (!Array.isArray(colors) || colors.length !== 4) return this;
+      preset.colors = colors;
+      renderer.setPreset({ ...preset, colors });
+      return this;
+    },
+    setSeed(seed) {
+      const value = Number(seed);
+      if (!Number.isFinite(value)) return this;
+      preset.seed = value;
+      renderer.setPreset({ ...preset });
+      return this;
+    },
+    setSpeed(speed) {
+      const value = Number(speed);
+      if (!Number.isFinite(value)) return this;
+      preset.speed = value;
+      renderer.setPreset({ ...preset });
+      return this;
+    },
     setSize(width, height) {
       if (width !== undefined) merged.width = width;
       if (height !== undefined) merged.height = height;
@@ -2051,7 +2032,7 @@ function createProgressCapsule(container, options = {}) {
     throw new Error('createProgressCapsule: container element is required');
   }
 
-  const preset = { ...getPreset('progress', options.preset ?? 'NC-10') };
+  const preset = { ...getPreset('progress', options.preset ?? '星火') };
   const merged = normalizeOptions(DEFAULTS.progress, preset, options);
   const copy = { ...COPY, ...(merged.copy || {}) };
 
@@ -2190,9 +2171,9 @@ function createProgressCapsule(container, options = {}) {
       controller.setRange(min, max);
       return this;
     },
-    setPreset(ref) {
-      const next = getPreset('progress', ref);
-      Object.assign(preset, next);
+    setPreset(ref) {
+      const next = getPreset('progress', ref);
+      Object.assign(preset, next);
       controller.preset = next;
       controller.profile = next.edgeStyle === 'tide'
         ? FLOW_PROFILES.tide
@@ -2206,10 +2187,25 @@ function createProgressCapsule(container, options = {}) {
       }
       controller.webglActive = Boolean(overlay);
       controller.resizeCanvas();
-      emitter.emit('presetchange', { preset: { ...next } });
-      return this;
-    },
-    setColors(colors) {
+      emitter.emit('presetchange', { preset: { ...next } });
+      return this;
+    },
+    setEdgeStyle(edgeStyle) {
+      const value = String(edgeStyle || '').toLowerCase();
+      if (value !== 'flow' && value !== 'tide') return this;
+      preset.edgeStyle = value;
+      controller.profile = value === 'tide'
+        ? FLOW_PROFILES.tide
+        : (FLOW_PROFILES[preset.id] || FLOW_PROFILES['visual-training']);
+      if (overlay) {
+        overlay.dispose();
+        overlay = attachProgressFlowOverlay({ root, canvas, preset, getProgress: () => controller.value });
+      }
+      controller.webglActive = Boolean(overlay);
+      controller.resizeCanvas();
+      return this;
+    },
+    setColors(colors) {
       if (!Array.isArray(colors) || colors.length !== 4) return this;
       controller.setColors(colors);
       if (overlay) overlay.setColors(colors);
@@ -2319,32 +2315,29 @@ function makeWrapper({ name, props, events, create, render, methods, watch }) {
 function makeCapsuleWrapper(createCapsule, render) {
   return makeWrapper({
     name: 'CosmicCapsule',
-    props: [
-      'preset', 'width', 'height', 'colors', 'seed', 'speed', 'interactive',
-      'mouseColor', 'renderer', 'quality', 'respectReducedMotion', 'copy', 'cssVars'
+    props: [
+      'preset', 'width', 'height', 'colors', 'seed', 'speed',
+      'mouseColor', 'renderer', 'quality', 'respectReducedMotion', 'copy', 'cssVars'
     ],
     events: CAPSULE_EVENTS,
     create: createCapsule,
     render,
     watch: {
-      seed(value) {
-        const seed = Number(value);
-        if (this.controller && Number.isFinite(seed)) {
-          this.controller.setPreset({ ...this.controller.preset, seed });
-        }
-      },
-      speed(value) {
-        const speed = Number(value);
-        if (this.controller && Number.isFinite(speed)) {
-          this.controller.setPreset({ ...this.controller.preset, speed });
-        }
-      },
-                  interactive() {
-        this.scheduleRecreate();
-      },
-      mouseColor() {
-        this.scheduleRecreate();
-      },
+      seed(value) {
+        const seed = Number(value);
+        if (this.controller && Number.isFinite(seed)) {
+          this.controller.setSeed(seed);
+        }
+      },
+      speed(value) {
+        const speed = Number(value);
+        if (this.controller && Number.isFinite(speed)) {
+          this.controller.setSpeed(speed);
+        }
+      },
+      mouseColor() {
+        this.scheduleRecreate();
+      },
       renderer() {
         this.scheduleRecreate();
       }
@@ -2383,9 +2376,9 @@ function makeProgressWrapper(createProgressCapsule, render) {
       max(value) {
         if (value !== undefined && this.controller) this.controller.setRange(this.controller.min, value);
       },
-      edgeStyle(value) {
-        if (value && this.controller) this.controller.setPreset({ ...this.controller.preset, edgeStyle: value });
-      },
+      edgeStyle(value) {
+        if (value && this.controller) this.controller.setEdgeStyle(value);
+      },
       draggable() {
         this.scheduleRecreate();
       },

package/dist/vue3.cjs

@@ -322,7 +322,7 @@ var PALETTES$1 = {
 var CAPSULE_PRESETS = [{
   id: 'original',
   code: 'NC-01',
-  name: 'ORIGINAL',
+  name: '初光',
   group: 'warm',
   seed: 1.7,
   speed: 0.5,
@@ -330,7 +330,7 @@ var CAPSULE_PRESETS = [{
 }, {
   id: 'ocean',
   code: 'NC-02',
-  name: 'OCEAN',
+  name: '沧溟',
   group: 'cold',
   seed: 8.2,
   speed: 0.48,
@@ -338,7 +338,7 @@ var CAPSULE_PRESETS = [{
 }, {
   id: 'klein',
   code: 'NC-03',
-  name: 'KLEIN',
+  name: '玄夜',
   group: 'cold',
   seed: 14.1,
   speed: 0.49,
@@ -346,7 +346,7 @@ var CAPSULE_PRESETS = [{
 }, {
   id: 'ultraviolet',
   code: 'NC-04',
-  name: 'ULTRAVIOLET',
+  name: '紫霄',
   group: 'cold',
   seed: 23.4,
   speed: 0.47,
@@ -354,7 +354,7 @@ var CAPSULE_PRESETS = [{
 }, {
   id: 'chrome',
   code: 'NC-05',
-  name: 'CHROME',
+  name: '银汉',
   group: 'cold',
   seed: 37.8,
   speed: 0.42,
@@ -362,7 +362,7 @@ var CAPSULE_PRESETS = [{
 }, {
   id: 'plus',
   code: 'NC-06',
-  name: 'PLUS',
+  name: '熔金',
   group: 'warm',
   seed: 51.3,
   speed: 0.5,
@@ -372,7 +372,7 @@ var CAPSULE_PRESETS = [{
 var PROGRESS_PRESETS = [{
   id: 'model-training',
   code: 'NC-10',
-  name: 'MODEL TRAINING',
+  name: '星火',
   subtitle: 'SHA 4.5 + 100 2026 TKN',
   group: 'progress',
   initialProgress: 43,
@@ -381,7 +381,7 @@ var PROGRESS_PRESETS = [{
 }, {
   id: 'agent-migration',
   code: 'NC-11',
-  name: 'AGENT MIGRATION',
+  name: '迁流',
   subtitle: 'TRANSFERRING PROTOCOL',
   group: 'progress',
   initialProgress: 33,
@@ -390,7 +390,7 @@ var PROGRESS_PRESETS = [{
 }, {
   id: 'visual-training',
   code: 'NC-12',
-  name: 'VISUAL TRAINING',
+  name: '幻境',
   subtitle: 'GENERATING POWER ++',
   group: 'progress',
   initialProgress: 58,
@@ -399,7 +399,7 @@ var PROGRESS_PRESETS = [{
 }, {
   id: 'tide',
   code: 'NC-13',
-  name: 'TIDE',
+  name: '汐潮',
   subtitle: 'MOON PULL / COAST',
   group: 'progress',
   initialProgress: 30,
@@ -408,23 +408,18 @@ var PROGRESS_PRESETS = [{
 }];
 
 [].concat(_toConsumableArray(CAPSULE_PRESETS), _toConsumableArray(PROGRESS_PRESETS));
-function validatePreset(preset) {
-  return Boolean(preset && typeof preset.id === 'string' && typeof preset.code === 'string' && typeof preset.name === 'string' && Number.isFinite(preset.seed) && Number.isFinite(preset.speed) && Array.isArray(preset.colors) && preset.colors.length === 4);
-}
-function validateProgressPreset(preset) {
-  return Boolean(preset && typeof preset.id === 'string' && typeof preset.code === 'string' && typeof preset.name === 'string' && preset.group === 'progress' && Number.isFinite(preset.initialProgress) && ['flow', 'tide'].indexOf(preset.edgeStyle || 'flow') !== -1 && Array.isArray(preset.colors) && preset.colors.length === 4);
-}
+
+/**
+ * Resolve a preset by its literary name (e.g. '沧溟').
+ * Matching is case-insensitive and ignores surrounding whitespace,
+ * so '沧溟' and ' 沧溟 ' both work.
+ */
 function getPreset(kind, ref) {
   var list = kind === 'capsule' ? CAPSULE_PRESETS : kind === 'progress' ? PROGRESS_PRESETS : null;
   if (!list) throw new Error("Unknown preset kind: ".concat(kind, " (use \"capsule\" or \"progress\")"));
-  if (ref && _typeof(ref) === 'object') {
-    var valid = kind === 'capsule' ? validatePreset(ref) : validateProgressPreset(ref);
-    if (!valid) throw new Error("Invalid ".concat(kind, " preset object"));
-    return ref;
-  }
   var key = String(ref).trim().toLowerCase();
   var found = list.find(function (preset) {
-    return preset.id.toLowerCase() === key || preset.code.toLowerCase() === key || preset.name.toLowerCase() === key;
+    return preset.name.toLowerCase() === key;
   });
   if (!found) throw new Error("Unknown ".concat(kind, " preset: ").concat(ref));
   return found;
@@ -437,7 +432,6 @@ var DEFAULTS = {
     quality: 'auto',
     renderer: 'auto',
     respectReducedMotion: true,
-    interactive: true,
     mouseColor: true,
     showCopy: true
   },
@@ -858,8 +852,8 @@ function prefersReducedMotion$1() {
  * Mount a cosmic (nebula) capsule into `container`.
  *
  * Options: preset (id/code/name or object), width, height (number=px or
- * string with px/%/vw/vh/em/rem), colors, seed, speed, quality, interactive,
- * respectReducedMotion, copy, cssVars.
+ * string with px/%/vw/vh/em/rem), colors, seed, speed, quality,
+ * respectReducedMotion, copy, cssVars.
  */
 function createCapsule(container) {
   var _options$preset;
@@ -867,7 +861,7 @@ function createCapsule(container) {
   if (!container || typeof container.appendChild !== 'function') {
     throw new Error('createCapsule: container element is required');
   }
-  var preset = _objectSpread2({}, getPreset('capsule', (_options$preset = options.preset) !== null && _options$preset !== void 0 ? _options$preset : 'NC-01'));
+  var preset = _objectSpread2({}, getPreset('capsule', (_options$preset = options.preset) !== null && _options$preset !== void 0 ? _options$preset : '初光'));
   var merged = normalizeOptions(DEFAULTS.capsule, preset, options);
   var copy = _objectSpread2(_objectSpread2({}, COPY), merged.copy || {});
   var root = document.createElement('div');
@@ -946,18 +940,16 @@ function createCapsule(container) {
   }) : null;
   if (resizeObserver) resizeObserver.observe(root);else window.addEventListener('resize', renderer.resize);
   var visibility = createVisibilityGuard(root);
-  if (merged.interactive !== false) {
-    root.addEventListener('pointerenter', function () {
-      return emitter.emit('pointerenter', {
-        preset: _objectSpread2({}, preset)
-      });
+  root.addEventListener('pointerenter', function () {
+    return emitter.emit('pointerenter', {
+      preset: _objectSpread2({}, preset)
     });
-    root.addEventListener('pointerleave', function () {
-      return emitter.emit('pointerleave', {
-        preset: _objectSpread2({}, preset)
-      });
+  });
+  root.addEventListener('pointerleave', function () {
+    return emitter.emit('pointerleave', {
+      preset: _objectSpread2({}, preset)
     });
-  }
+  });
   root.addEventListener('click', function (event) {
     emitter.emit('click', {
       event: event,
@@ -1022,6 +1014,20 @@ function createCapsule(container) {
       }));
       return this;
     },
+    setSeed: function setSeed(seed) {
+      var value = Number(seed);
+      if (!Number.isFinite(value)) return this;
+      preset.seed = value;
+      renderer.setPreset(_objectSpread2({}, preset));
+      return this;
+    },
+    setSpeed: function setSpeed(speed) {
+      var value = Number(speed);
+      if (!Number.isFinite(value)) return this;
+      preset.speed = value;
+      renderer.setPreset(_objectSpread2({}, preset));
+      return this;
+    },
     setSize: function setSize(width, height) {
       if (width !== undefined) merged.width = width;
       if (height !== undefined) merged.height = height;
@@ -2050,7 +2056,7 @@ function createProgressCapsule(container) {
   if (!container || typeof container.appendChild !== 'function') {
     throw new Error('createProgressCapsule: container element is required');
   }
-  var preset = _objectSpread2({}, getPreset('progress', (_options$preset = options.preset) !== null && _options$preset !== void 0 ? _options$preset : 'NC-10'));
+  var preset = _objectSpread2({}, getPreset('progress', (_options$preset = options.preset) !== null && _options$preset !== void 0 ? _options$preset : '星火'));
   var merged = normalizeOptions(DEFAULTS.progress, preset, options);
   var copy = _objectSpread2(_objectSpread2({}, COPY), merged.copy || {});
   var root = document.createElement('div');
@@ -2206,6 +2212,26 @@ function createProgressCapsule(container) {
       });
       return this;
     },
+    setEdgeStyle: function setEdgeStyle(edgeStyle) {
+      var value = String(edgeStyle || '').toLowerCase();
+      if (value !== 'flow' && value !== 'tide') return this;
+      preset.edgeStyle = value;
+      controller.profile = value === 'tide' ? FLOW_PROFILES.tide : FLOW_PROFILES[preset.id] || FLOW_PROFILES['visual-training'];
+      if (overlay) {
+        overlay.dispose();
+        overlay = attachProgressFlowOverlay({
+          root: root,
+          canvas: canvas,
+          preset: preset,
+          getProgress: function getProgress() {
+            return controller.value;
+          }
+        });
+      }
+      controller.webglActive = Boolean(overlay);
+      controller.resizeCanvas();
+      return this;
+    },
     setColors: function setColors(colors) {
       if (!Array.isArray(colors) || colors.length !== 4) return this;
       controller.setColors(colors);
@@ -2343,7 +2369,7 @@ function makeWrapper(_ref) {
 function makeCapsuleWrapper(createCapsule, render) {
   return makeWrapper({
     name: 'CosmicCapsule',
-    props: ['preset', 'width', 'height', 'colors', 'seed', 'speed', 'interactive', 'mouseColor', 'renderer', 'quality', 'respectReducedMotion', 'copy', 'cssVars'],
+    props: ['preset', 'width', 'height', 'colors', 'seed', 'speed', 'mouseColor', 'renderer', 'quality', 'respectReducedMotion', 'copy', 'cssVars'],
     events: CAPSULE_EVENTS,
     create: createCapsule,
     render: render,
@@ -2351,22 +2377,15 @@ function makeCapsuleWrapper(createCapsule, render) {
       seed: function seed(value) {
         var seed = Number(value);
         if (this.controller && Number.isFinite(seed)) {
-          this.controller.setPreset(_objectSpread2(_objectSpread2({}, this.controller.preset), {}, {
-            seed: seed
-          }));
+          this.controller.setSeed(seed);
         }
       },
       speed: function speed(value) {
         var speed = Number(value);
         if (this.controller && Number.isFinite(speed)) {
-          this.controller.setPreset(_objectSpread2(_objectSpread2({}, this.controller.preset), {}, {
-            speed: speed
-          }));
+          this.controller.setSpeed(speed);
         }
       },
-      interactive: function interactive() {
-        this.scheduleRecreate();
-      },
       mouseColor: function mouseColor() {
         this.scheduleRecreate();
       },
@@ -2420,9 +2439,7 @@ function makeProgressWrapper(createProgressCapsule, render) {
         if (value !== undefined && this.controller) this.controller.setRange(this.controller.min, value);
       },
       edgeStyle: function edgeStyle(value) {
-        if (value && this.controller) this.controller.setPreset(_objectSpread2(_objectSpread2({}, this.controller.preset), {}, {
-          edgeStyle: value
-        }));
+        if (value && this.controller) this.controller.setEdgeStyle(value);
       },
       draggable: function draggable() {
         this.scheduleRecreate();