inline-style-editor 1.3.7 → 1.4.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.
Files changed (21) hide show
  1. package/README.md +3 -0
  2. package/dist/inline-style-editor.css +1 -1
  3. package/dist/inline-style-editor.js +5 -4
  4. package/dist/inline-style-editor.js.map +1 -1
  5. package/dist/inline-style-editor.mjs +792 -452
  6. package/dist/inline-style-editor.mjs.map +1 -1
  7. package/index.d.ts +38 -0
  8. package/package.json +18 -3
  9. package/docs/index.html +0 -384
  10. package/rollup.config.js +0 -41
  11. package/src/assets/index.scss +0 -2
  12. package/src/assets/style.scss +0 -152
  13. package/src/components/ColorPicker.svelte +0 -52
  14. package/src/components/InlineStyleEditor.svelte +0 -498
  15. package/src/index.js +0 -7
  16. package/src/util/boxesContour.js +0 -91
  17. package/src/util/fonts.js +0 -89
  18. package/src/util/path.js +0 -46
  19. package/src/util/util.js +0 -23
  20. package/stats.html +0 -4034
  21. package/test.html +0 -409
package/dist/inline-style-editor.mjs CHANGED
@@ -24,7 +24,9 @@ function insert(target, node, anchor) {
24
24
  target.insertBefore(node, anchor || null);
25
25
  }
26
26
  function detach(node) {
27
- node.parentNode.removeChild(node);
27
+ if (node.parentNode) {
28
+ node.parentNode.removeChild(node);
29
+ }
28
30
  }
29
31
  function destroy_each(iterations, detaching) {
30
32
  for (let i = 0; i < iterations.length; i += 1) {
@@ -62,15 +64,13 @@ function children(element) {
62
64
  }
63
65
  function set_data(text, data) {
64
66
  data = '' + data;
65
- if (text.wholeText !== data)
66
- text.data = data;
67
+ if (text.data === data)
68
+ return;
69
+ text.data = data;
67
70
  }
68
71
  function set_style(node, key, value, important) {
69
- if (value === null) {
70
- node.style.removeProperty(key);
71
- }
72
- else {
73
- node.style.setProperty(key, value, important ? 'important' : '');
72
+ {
73
+ node.style.setProperty(key, value, '');
74
74
  }
75
75
  }
76
76
  function toggle_class(element, name, toggle) {
@@ -86,18 +86,35 @@ function get_current_component() {
86
86
  throw new Error('Function called outside component initialization');
87
87
  return current_component;
88
88
  }
89
+ /**
90
+ * The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM.
91
+ * It must be called during the component's initialisation (but doesn't need to live *inside* the component;
92
+ * it can be called from an external module).
93
+ *
94
+ * `onMount` does not run inside a [server-side component](/docs#run-time-server-side-component-api).
95
+ *
96
+ * https://svelte.dev/docs#run-time-svelte-onmount
97
+ */
89
98
  function onMount(fn) {
90
99
  get_current_component().$$.on_mount.push(fn);
91
100
  }
101
+ /**
102
+ * Schedules a callback to run immediately before the component is unmounted.
103
+ *
104
+ * Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the
105
+ * only one that runs inside a server-side component.
106
+ *
107
+ * https://svelte.dev/docs#run-time-svelte-ondestroy
108
+ */
92
109
  function onDestroy(fn) {
93
110
  get_current_component().$$.on_destroy.push(fn);
94
111
  }
95
112
 
96
113
  const dirty_components = [];
97
114
  const binding_callbacks = [];
98
- const render_callbacks = [];
115
+ let render_callbacks = [];
99
116
  const flush_callbacks = [];
100
- const resolved_promise = Promise.resolve();
117
+ const resolved_promise = /* @__PURE__ */ Promise.resolve();
101
118
  let update_scheduled = false;
102
119
  function schedule_update() {
103
120
  if (!update_scheduled) {
@@ -133,15 +150,29 @@ function add_render_callback(fn) {
133
150
  const seen_callbacks = new Set();
134
151
  let flushidx = 0; // Do *not* move this inside the flush() function
135
152
  function flush() {
153
+ // Do not reenter flush while dirty components are updated, as this can
154
+ // result in an infinite loop. Instead, let the inner flush handle it.
155
+ // Reentrancy is ok afterwards for bindings etc.
156
+ if (flushidx !== 0) {
157
+ return;
158
+ }
136
159
  const saved_component = current_component;
137
160
  do {
138
161
  // first, call beforeUpdate functions
139
162
  // and update components
140
- while (flushidx < dirty_components.length) {
141
- const component = dirty_components[flushidx];
142
- flushidx++;
143
- set_current_component(component);
144
- update(component.$$);
163
+ try {
164
+ while (flushidx < dirty_components.length) {
165
+ const component = dirty_components[flushidx];
166
+ flushidx++;
167
+ set_current_component(component);
168
+ update(component.$$);
169
+ }
170
+ }
171
+ catch (e) {
172
+ // reset dirty state to not end up in a deadlocked state and then rethrow
173
+ dirty_components.length = 0;
174
+ flushidx = 0;
175
+ throw e;
145
176
  }
146
177
  set_current_component(null);
147
178
  dirty_components.length = 0;
@@ -178,6 +209,16 @@ function update($$) {
178
209
  $$.after_update.forEach(add_render_callback);
179
210
  }
180
211
  }
212
+ /**
213
+ * Useful for example to execute remaining `afterUpdate` callbacks before executing `destroy`.
214
+ */
215
+ function flush_render_callbacks(fns) {
216
+ const filtered = [];
217
+ const targets = [];
218
+ render_callbacks.forEach((c) => fns.indexOf(c) === -1 ? filtered.push(c) : targets.push(c));
219
+ targets.forEach((c) => c());
220
+ render_callbacks = filtered;
221
+ }
181
222
  const outroing = new Set();
182
223
  let outros;
183
224
  function group_outros() {
@@ -222,14 +263,17 @@ function create_component(block) {
222
263
  block && block.c();
223
264
  }
224
265
  function mount_component(component, target, anchor, customElement) {
225
- const { fragment, on_mount, on_destroy, after_update } = component.$$;
266
+ const { fragment, after_update } = component.$$;
226
267
  fragment && fragment.m(target, anchor);
227
268
  if (!customElement) {
228
269
  // onMount happens before the initial afterUpdate
229
270
  add_render_callback(() => {
230
- const new_on_destroy = on_mount.map(run).filter(is_function);
231
- if (on_destroy) {
232
- on_destroy.push(...new_on_destroy);
271
+ const new_on_destroy = component.$$.on_mount.map(run).filter(is_function);
272
+ // if the component was destroyed immediately
273
+ // it will update the `$$.on_destroy` reference to `null`.
274
+ // the destructured on_destroy may still reference to the old array
275
+ if (component.$$.on_destroy) {
276
+ component.$$.on_destroy.push(...new_on_destroy);
233
277
  }
234
278
  else {
235
279
  // Edge case - component was destroyed immediately,
@@ -244,6 +288,7 @@ function mount_component(component, target, anchor, customElement) {
244
288
  function destroy_component(component, detaching) {
245
289
  const $$ = component.$$;
246
290
  if ($$.fragment !== null) {
291
+ flush_render_callbacks($$.after_update);
247
292
  run_all($$.on_destroy);
248
293
  $$.fragment && $$.fragment.d(detaching);
249
294
  // TODO null out other refs, including component.$$ (but need to
@@ -265,7 +310,7 @@ function init(component, options, instance, create_fragment, not_equal, props, a
265
310
  set_current_component(component);
266
311
  const $$ = component.$$ = {
267
312
  fragment: null,
268
- ctx: null,
313
+ ctx: [],
269
314
  // state
270
315
  props,
271
316
  update: noop$1,
@@ -330,6 +375,9 @@ class SvelteComponent {
330
375
  this.$destroy = noop$1;
331
376
  }
332
377
  $on(type, callback) {
378
+ if (!is_function(callback)) {
379
+ return noop$1;
380
+ }
333
381
  const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
334
382
  callbacks.push(callback);
335
383
  return () => {
@@ -356,9 +404,9 @@ function pick(obj, keys) {
356
404
 
357
405
  function debounce(func, wait, immediate = false) {
358
406
  let timeout;
359
- return function() {
407
+ return function () {
360
408
  const context = this, args = arguments;
361
- const later = function() {
409
+ const later = function () {
362
410
  timeout = null;
363
411
  if (!immediate) func.apply(context, args);
364
412
  };
@@ -368,6 +416,21 @@ function debounce(func, wait, immediate = false) {
368
416
  if (callNow) func.apply(context, args);
369
417
  };
370
418
  }
419
+ function capitalizeFirstLetter(str) {
420
+ return str[0].toUpperCase() + str.slice(1);
421
+ }
422
+
423
+ function pascalCaseToSentence(str) {
424
+ const splitted = str.replace(/-/g, ' ').trim().toLowerCase();
425
+ return capitalizeFirstLetter(splitted);
426
+ }
427
+
428
+
429
+ function nbChars(strArray) {
430
+ if (!strArray) return 0;
431
+ console.log(strArray, strArray.reduce((acc, str) => acc + str.length, 0));
432
+ return strArray.reduce((acc, str) => acc + str.length, 0);
433
+ }
371
434
 
372
435
  function ascending$1(a, b) {
373
436
  return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
@@ -444,19 +507,12 @@ bisector(number).center;
444
507
 
445
508
  function count(values, valueof) {
446
509
  let count = 0;
447
- if (valueof === undefined) {
510
+ {
448
511
  for (let value of values) {
449
512
  if (value != null && (value = +value) >= value) {
450
513
  ++count;
451
514
  }
452
515
  }
453
- } else {
454
- let index = -1;
455
- for (let value of values) {
456
- if ((value = valueof(value, ++index, values)) != null && (value = +value) >= value) {
457
- ++count;
458
- }
459
- }
460
516
  }
461
517
  return count;
462
518
  }
@@ -491,63 +547,75 @@ function extent(values, valueof) {
491
547
  return [min, max];
492
548
  }
493
549
 
494
- var e10 = Math.sqrt(50),
550
+ const e10 = Math.sqrt(50),
495
551
  e5 = Math.sqrt(10),
496
552
  e2 = Math.sqrt(2);
497
553
 
498
- function ticks(start, stop, count) {
499
- var reverse,
500
- i = -1,
501
- n,
502
- ticks,
503
- step;
554
+ function tickSpec(start, stop, count) {
555
+ const step = (stop - start) / Math.max(0, count),
556
+ power = Math.floor(Math.log10(step)),
557
+ error = step / Math.pow(10, power),
558
+ factor = error >= e10 ? 10 : error >= e5 ? 5 : error >= e2 ? 2 : 1;
559
+ let i1, i2, inc;
560
+ if (power < 0) {
561
+ inc = Math.pow(10, -power) / factor;
562
+ i1 = Math.round(start * inc);
563
+ i2 = Math.round(stop * inc);
564
+ if (i1 / inc < start) ++i1;
565
+ if (i2 / inc > stop) --i2;
566
+ inc = -inc;
567
+ } else {
568
+ inc = Math.pow(10, power) * factor;
569
+ i1 = Math.round(start / inc);
570
+ i2 = Math.round(stop / inc);
571
+ if (i1 * inc < start) ++i1;
572
+ if (i2 * inc > stop) --i2;
573
+ }
574
+ if (i2 < i1 && 0.5 <= count && count < 2) return tickSpec(start, stop, count * 2);
575
+ return [i1, i2, inc];
576
+ }
504
577
 
578
+ function ticks(start, stop, count) {
505
579
  stop = +stop, start = +start, count = +count;
506
- if (start === stop && count > 0) return [start];
507
- if (reverse = stop < start) n = start, start = stop, stop = n;
508
- if ((step = tickIncrement(start, stop, count)) === 0 || !isFinite(step)) return [];
509
-
510
- if (step > 0) {
511
- let r0 = Math.round(start / step), r1 = Math.round(stop / step);
512
- if (r0 * step < start) ++r0;
513
- if (r1 * step > stop) --r1;
514
- ticks = new Array(n = r1 - r0 + 1);
515
- while (++i < n) ticks[i] = (r0 + i) * step;
580
+ if (!(count > 0)) return [];
581
+ if (start === stop) return [start];
582
+ const reverse = stop < start, [i1, i2, inc] = reverse ? tickSpec(stop, start, count) : tickSpec(start, stop, count);
583
+ if (!(i2 >= i1)) return [];
584
+ const n = i2 - i1 + 1, ticks = new Array(n);
585
+ if (reverse) {
586
+ if (inc < 0) for (let i = 0; i < n; ++i) ticks[i] = (i2 - i) / -inc;
587
+ else for (let i = 0; i < n; ++i) ticks[i] = (i2 - i) * inc;
516
588
  } else {
517
- step = -step;
518
- let r0 = Math.round(start * step), r1 = Math.round(stop * step);
519
- if (r0 / step < start) ++r0;
520
- if (r1 / step > stop) --r1;
521
- ticks = new Array(n = r1 - r0 + 1);
522
- while (++i < n) ticks[i] = (r0 + i) / step;
589
+ if (inc < 0) for (let i = 0; i < n; ++i) ticks[i] = (i1 + i) / -inc;
590
+ else for (let i = 0; i < n; ++i) ticks[i] = (i1 + i) * inc;
523
591
  }
524
-
525
- if (reverse) ticks.reverse();
526
-
527
592
  return ticks;
528
593
  }
529
594
 
530
595
  function tickIncrement(start, stop, count) {
531
- var step = (stop - start) / Math.max(0, count),
532
- power = Math.floor(Math.log(step) / Math.LN10),
533
- error = step / Math.pow(10, power);
534
- return power >= 0
535
- ? (error >= e10 ? 10 : error >= e5 ? 5 : error >= e2 ? 2 : 1) * Math.pow(10, power)
536
- : -Math.pow(10, -power) / (error >= e10 ? 10 : error >= e5 ? 5 : error >= e2 ? 2 : 1);
596
+ stop = +stop, start = +start, count = +count;
597
+ return tickSpec(start, stop, count)[2];
537
598
  }
538
599
 
539
- function tickStep(start, stop, count) {
540
- var step0 = Math.abs(stop - start) / Math.max(0, count),
541
- step1 = Math.pow(10, Math.floor(Math.log(step0) / Math.LN10)),
542
- error = step0 / step1;
543
- if (error >= e10) step1 *= 10;
544
- else if (error >= e5) step1 *= 5;
545
- else if (error >= e2) step1 *= 2;
546
- return stop < start ? -step1 : step1;
600
+ function nice(start, stop, count) {
601
+ let prestep;
602
+ while (true) {
603
+ const step = tickIncrement(start, stop, count);
604
+ if (step === prestep || step === 0 || !isFinite(step)) {
605
+ return [start, stop];
606
+ } else if (step > 0) {
607
+ start = Math.floor(start / step) * step;
608
+ stop = Math.ceil(stop / step) * step;
609
+ } else if (step < 0) {
610
+ start = Math.ceil(start * step) / step;
611
+ stop = Math.floor(stop * step) / step;
612
+ }
613
+ prestep = step;
614
+ }
547
615
  }
548
616
 
549
617
  function thresholdSturges(values) {
550
- return Math.ceil(Math.log(count(values)) / Math.LN2) + 1;
618
+ return Math.max(1, Math.ceil(Math.log(count(values)) / Math.LN2) + 1);
551
619
  }
552
620
 
553
621
  var array = Array.prototype;
@@ -626,8 +694,10 @@ function contours() {
626
694
 
627
695
  // Convert number of thresholds into uniform thresholds.
628
696
  if (!Array.isArray(tz)) {
629
- const e = extent(values), ts = tickStep(e[0], e[1], tz);
630
- tz = ticks(Math.floor(e[0] / ts) * ts, Math.floor(e[1] / ts - 1) * ts, tz);
697
+ const e = extent(values, finite);
698
+ tz = ticks(...nice(e[0], e[1], tz), tz);
699
+ while (tz[tz.length - 1] >= e[1]) tz.pop();
700
+ while (tz[1] < e[0]) tz.shift();
631
701
  } else {
632
702
  tz = tz.slice().sort(ascending);
633
703
  }
@@ -638,11 +708,14 @@ function contours() {
638
708
  // Accumulate, smooth contour rings, assign holes to exterior rings.
639
709
  // Based on https://github.com/mbostock/shapefile/blob/v0.6.2/shp/polygon.js
640
710
  function contour(values, value) {
711
+ const v = value == null ? NaN : +value;
712
+ if (isNaN(v)) throw new Error(`invalid value: ${value}`);
713
+
641
714
  var polygons = [],
642
715
  holes = [];
643
716
 
644
- isorings(values, value, function(ring) {
645
- smooth(ring, values, value);
717
+ isorings(values, v, function(ring) {
718
+ smooth(ring, values, v);
646
719
  if (area(ring) > 0) polygons.push([ring]);
647
720
  else holes.push(ring);
648
721
  });
@@ -672,10 +745,10 @@ function contours() {
672
745
 
673
746
  // Special case for the first row (y = -1, t2 = t3 = 0).
674
747
  x = y = -1;
675
- t1 = values[0] >= value;
748
+ t1 = above(values[0], value);
676
749
  cases[t1 << 1].forEach(stitch);
677
750
  while (++x < dx - 1) {
678
- t0 = t1, t1 = values[x + 1] >= value;
751
+ t0 = t1, t1 = above(values[x + 1], value);
679
752
  cases[t0 | t1 << 1].forEach(stitch);
680
753
  }
681
754
  cases[t1 << 0].forEach(stitch);
@@ -683,12 +756,12 @@ function contours() {
683
756
  // General case for the intermediate rows.
684
757
  while (++y < dy - 1) {
685
758
  x = -1;
686
- t1 = values[y * dx + dx] >= value;
687
- t2 = values[y * dx] >= value;
759
+ t1 = above(values[y * dx + dx], value);
760
+ t2 = above(values[y * dx], value);
688
761
  cases[t1 << 1 | t2 << 2].forEach(stitch);
689
762
  while (++x < dx - 1) {
690
- t0 = t1, t1 = values[y * dx + dx + x + 1] >= value;
691
- t3 = t2, t2 = values[y * dx + x + 1] >= value;
763
+ t0 = t1, t1 = above(values[y * dx + dx + x + 1], value);
764
+ t3 = t2, t2 = above(values[y * dx + x + 1], value);
692
765
  cases[t0 | t1 << 1 | t2 << 2 | t3 << 3].forEach(stitch);
693
766
  }
694
767
  cases[t1 | t2 << 3].forEach(stitch);
@@ -699,7 +772,7 @@ function contours() {
699
772
  t2 = values[y * dx] >= value;
700
773
  cases[t2 << 2].forEach(stitch);
701
774
  while (++x < dx - 1) {
702
- t3 = t2, t2 = values[y * dx + x + 1] >= value;
775
+ t3 = t2, t2 = above(values[y * dx + x + 1], value);
703
776
  cases[t2 << 2 | t3 << 3].forEach(stitch);
704
777
  }
705
778
  cases[t2 << 3].forEach(stitch);
@@ -756,15 +829,12 @@ function contours() {
756
829
  y = point[1],
757
830
  xt = x | 0,
758
831
  yt = y | 0,
759
- v0,
760
- v1 = values[yt * dx + xt];
832
+ v1 = valid(values[yt * dx + xt]);
761
833
  if (x > 0 && x < dx && xt === x) {
762
- v0 = values[yt * dx + xt - 1];
763
- point[0] = x + (value - v0) / (v1 - v0) - 0.5;
834
+ point[0] = smooth1(x, valid(values[yt * dx + xt - 1]), v1, value);
764
835
  }
765
836
  if (y > 0 && y < dy && yt === y) {
766
- v0 = values[(yt - 1) * dx + xt];
767
- point[1] = y + (value - v0) / (v1 - v0) - 0.5;
837
+ point[1] = smooth1(y, valid(values[(yt - 1) * dx + xt]), v1, value);
768
838
  }
769
839
  });
770
840
  }
@@ -789,6 +859,29 @@ function contours() {
789
859
  return contours;
790
860
  }
791
861
 
862
+ // When computing the extent, ignore infinite values (as well as invalid ones).
863
+ function finite(x) {
864
+ return isFinite(x) ? x : NaN;
865
+ }
866
+
867
+ // Is the (possibly invalid) x greater than or equal to the (known valid) value?
868
+ // Treat any invalid value as below negative infinity.
869
+ function above(x, value) {
870
+ return x == null ? false : +x >= value;
871
+ }
872
+
873
+ // During smoothing, treat any invalid value as negative infinity.
874
+ function valid(v) {
875
+ return v == null || isNaN(v = +v) ? -Infinity : v;
876
+ }
877
+
878
+ function smooth1(x, v0, v1, value) {
879
+ const a = value - v0;
880
+ const b = v1 - v0;
881
+ const d = isFinite(a) || isFinite(b) ? a / b : Math.sign(a) / Math.sign(b);
882
+ return isNaN(d) ? x : x + d - 0.5;
883
+ }
884
+
792
885
  function pointInBox(p, box) {
793
886
  return !(p.x < box.left || p.x > box.right || p.y > box.bottom || p.y < box.top)
794
887
  }
@@ -878,10 +971,10 @@ function computeContours(boundingBoxes, pageDimensions) {
878
971
  }
879
972
 
880
973
  /*!
881
- * vanilla-picker v2.12.1
974
+ * vanilla-picker v2.12.3
882
975
  * https://vanilla-picker.js.org
883
976
  *
884
- * Copyright 2017-2021 Andreas Borgen (https://github.com/Sphinxxxx), Adam Brooks (https://github.com/dissimulate)
977
+ * Copyright 2017-2024 Andreas Borgen (https://github.com/Sphinxxxx), Adam Brooks (https://github.com/dissimulate)
885
978
  * Released under the ISC license.
886
979
  */
887
980
  var classCallCheck = function (instance, Constructor) {
@@ -1377,9 +1470,6 @@ function stopEvent(e) {
1377
1470
  function onKey(bucket, target, keys, handler, stop) {
1378
1471
  bucket.add(target, EVENT_KEY, function (e) {
1379
1472
  if (keys.indexOf(e.key) >= 0) {
1380
- if (stop) {
1381
- stopEvent(e);
1382
- }
1383
1473
  handler(e);
1384
1474
  }
1385
1475
  });
@@ -1426,9 +1516,6 @@ var Picker = function () {
1426
1516
 
1427
1517
  function transfer(source, target, skipKeys) {
1428
1518
  for (var key in source) {
1429
- if (skipKeys && skipKeys.indexOf(key) >= 0) {
1430
- continue;
1431
- }
1432
1519
 
1433
1520
  target[key] = source[key];
1434
1521
  }
@@ -1869,7 +1956,7 @@ var Picker = function () {
1869
1956
  return Picker;
1870
1957
  }();
1871
1958
 
1872
- /* src/components/ColorPicker.svelte generated by Svelte v3.49.0 */
1959
+ /* src/components/ColorPicker.svelte generated by Svelte v3.59.2 */
1873
1960
 
1874
1961
  function create_fragment$1(ctx) {
1875
1962
  let div;
@@ -1877,6 +1964,7 @@ function create_fragment$1(ctx) {
1877
1964
  return {
1878
1965
  c() {
1879
1966
  div = element("div");
1967
+ attr(div, "class", "picker");
1880
1968
  },
1881
1969
  m(target, anchor) {
1882
1970
  insert(target, div, anchor);
@@ -1982,8 +2070,6 @@ class ColorPicker extends SvelteComponent {
1982
2070
  }
1983
2071
  }
1984
2072
 
1985
- var ColorPicker$1 = ColorPicker;
1986
-
1987
2073
  // https://stackoverflow.com/a/3368855
1988
2074
  function getAvailableFonts() {
1989
2075
  const fontsToCheck = new Set([
@@ -2071,77 +2157,84 @@ function listFonts() {
2071
2157
  return [...new Set(arr)];
2072
2158
  }
2073
2159
 
2074
- /* src/components/InlineStyleEditor.svelte generated by Svelte v3.49.0 */
2160
+ /* src/components/InlineStyleEditor.svelte generated by Svelte v3.59.2 */
2075
2161
 
2076
2162
  function get_each_context(ctx, list, i) {
2077
2163
  const child_ctx = ctx.slice();
2078
- child_ctx[65] = list[i];
2079
- child_ctx[67] = list;
2080
- child_ctx[68] = i;
2081
- const constants_0 = /*choices*/ child_ctx[65].props[/*choices*/ child_ctx[65].selected];
2082
- child_ctx[66] = constants_0;
2164
+ child_ctx[69] = list[i];
2165
+ child_ctx[71] = list;
2166
+ child_ctx[72] = i;
2167
+ const constants_0 = /*choices*/ child_ctx[69].props[/*choices*/ child_ctx[69].selected];
2168
+ child_ctx[70] = constants_0;
2083
2169
  return child_ctx;
2084
2170
  }
2085
2171
 
2086
2172
  function get_each_context_1(ctx, list, i) {
2087
2173
  const child_ctx = ctx.slice();
2088
- child_ctx[69] = list[i];
2174
+ child_ctx[73] = list[i];
2089
2175
  return child_ctx;
2090
2176
  }
2091
2177
 
2092
2178
  function get_if_ctx(ctx) {
2093
2179
  const child_ctx = ctx.slice();
2094
- const constants_0 = /*allCurrentPropDefs*/ child_ctx[14][/*selectedName*/ child_ctx[66]].choices();
2095
- child_ctx[65] = constants_0;
2180
+ const constants_0 = /*allCurrentPropDefs*/ child_ctx[16][/*selectedName*/ child_ctx[70]].choices();
2181
+ child_ctx[69] = constants_0;
2096
2182
  return child_ctx;
2097
2183
  }
2098
2184
 
2099
2185
  function get_each_context_2(ctx, list, i) {
2100
2186
  const child_ctx = ctx.slice();
2101
- child_ctx[72] = list[i];
2102
- child_ctx[74] = i;
2187
+ child_ctx[76] = list[i];
2188
+ child_ctx[78] = i;
2103
2189
  return child_ctx;
2104
2190
  }
2105
2191
 
2106
2192
  function get_each_context_3(ctx, list, i) {
2107
2193
  const child_ctx = ctx.slice();
2108
- child_ctx[75] = list[i];
2109
- child_ctx[77] = i;
2194
+ child_ctx[79] = list[i];
2195
+ child_ctx[81] = i;
2110
2196
  return child_ctx;
2111
2197
  }
2112
2198
 
2113
- function get_each_context_4(ctx, list, i) {
2199
+ function get_each_context_5(ctx, list, i) {
2114
2200
  const child_ctx = ctx.slice();
2115
- child_ctx[78] = list[i];
2116
- child_ctx[80] = i;
2201
+ child_ctx[82] = list[i];
2202
+ child_ctx[84] = i;
2117
2203
  return child_ctx;
2118
2204
  }
2119
2205
 
2120
- function get_each_context_5(ctx, list, i) {
2206
+ function get_each_context_4(ctx, list, i) {
2121
2207
  const child_ctx = ctx.slice();
2122
- child_ctx[81] = list[i][0];
2123
- child_ctx[82] = list[i][1];
2208
+ child_ctx[82] = list[i];
2124
2209
  child_ctx[84] = i;
2125
2210
  return child_ctx;
2126
2211
  }
2127
2212
 
2128
- // (416:4) {#if targetsToSearch.length > 1}
2129
- function create_if_block_9(ctx) {
2213
+ function get_each_context_6(ctx, list, i) {
2214
+ const child_ctx = ctx.slice();
2215
+ child_ctx[86] = list[i][0];
2216
+ child_ctx[87] = list[i][1];
2217
+ child_ctx[89] = i;
2218
+ return child_ctx;
2219
+ }
2220
+
2221
+ // (473:4) {#if targetsToSearch.length > 1}
2222
+ function create_if_block_11(ctx) {
2130
2223
  let div;
2131
2224
  let b;
2132
2225
  let t1;
2133
- let each_value_5 = /*targetsToSearch*/ ctx[2];
2226
+ let each_value_6 = /*targetsToSearch*/ ctx[3];
2134
2227
  let each_blocks = [];
2135
2228
 
2136
- for (let i = 0; i < each_value_5.length; i += 1) {
2137
- each_blocks[i] = create_each_block_5(get_each_context_5(ctx, each_value_5, i));
2229
+ for (let i = 0; i < each_value_6.length; i += 1) {
2230
+ each_blocks[i] = create_each_block_6(get_each_context_6(ctx, each_value_6, i));
2138
2231
  }
2139
2232
 
2140
2233
  return {
2141
2234
  c() {
2142
2235
  div = element("div");
2143
2236
  b = element("b");
2144
- b.textContent = "Elem";
2237
+ b.textContent = "Element";
2145
2238
  t1 = space();
2146
2239
 
2147
2240
  for (let i = 0; i < each_blocks.length; i += 1) {
@@ -2156,21 +2249,23 @@ function create_if_block_9(ctx) {
2156
2249
  append(div, t1);
2157
2250
 
2158
2251
  for (let i = 0; i < each_blocks.length; i += 1) {
2159
- each_blocks[i].m(div, null);
2252
+ if (each_blocks[i]) {
2253
+ each_blocks[i].m(div, null);
2254
+ }
2160
2255
  }
2161
2256
  },
2162
2257
  p(ctx, dirty) {
2163
- if (dirty[0] & /*selectedElemIndex, selectedRuleIndex, targetsToSearch*/ 100) {
2164
- each_value_5 = /*targetsToSearch*/ ctx[2];
2258
+ if (dirty[0] & /*selectedElemIndex, selectedRuleIndex, targetsToSearch*/ 200) {
2259
+ each_value_6 = /*targetsToSearch*/ ctx[3];
2165
2260
  let i;
2166
2261
 
2167
- for (i = 0; i < each_value_5.length; i += 1) {
2168
- const child_ctx = get_each_context_5(ctx, each_value_5, i);
2262
+ for (i = 0; i < each_value_6.length; i += 1) {
2263
+ const child_ctx = get_each_context_6(ctx, each_value_6, i);
2169
2264
 
2170
2265
  if (each_blocks[i]) {
2171
2266
  each_blocks[i].p(child_ctx, dirty);
2172
2267
  } else {
2173
- each_blocks[i] = create_each_block_5(child_ctx);
2268
+ each_blocks[i] = create_each_block_6(child_ctx);
2174
2269
  each_blocks[i].c();
2175
2270
  each_blocks[i].m(div, null);
2176
2271
  }
@@ -2180,7 +2275,7 @@ function create_if_block_9(ctx) {
2180
2275
  each_blocks[i].d(1);
2181
2276
  }
2182
2277
 
2183
- each_blocks.length = each_value_5.length;
2278
+ each_blocks.length = each_value_6.length;
2184
2279
  }
2185
2280
  },
2186
2281
  d(detaching) {
@@ -2190,17 +2285,17 @@ function create_if_block_9(ctx) {
2190
2285
  };
2191
2286
  }
2192
2287
 
2193
- // (419:8) {#each targetsToSearch as [_, name], elemIndex}
2194
- function create_each_block_5(ctx) {
2288
+ // (476:12) {#each targetsToSearch as [_, name], elemIndex}
2289
+ function create_each_block_6(ctx) {
2195
2290
  let span;
2196
- let t0_value = /*name*/ ctx[82] + "";
2291
+ let t0_value = /*name*/ ctx[87] + "";
2197
2292
  let t0;
2198
2293
  let t1;
2199
2294
  let mounted;
2200
2295
  let dispose;
2201
2296
 
2202
2297
  function click_handler() {
2203
- return /*click_handler*/ ctx[36](/*elemIndex*/ ctx[84]);
2298
+ return /*click_handler*/ ctx[39](/*elemIndex*/ ctx[89]);
2204
2299
  }
2205
2300
 
2206
2301
  return {
@@ -2208,7 +2303,7 @@ function create_each_block_5(ctx) {
2208
2303
  span = element("span");
2209
2304
  t0 = text(t0_value);
2210
2305
  t1 = space();
2211
- toggle_class(span, "selected", /*selectedElemIndex*/ ctx[5] === /*elemIndex*/ ctx[84]);
2306
+ toggle_class(span, "selected", /*selectedElemIndex*/ ctx[6] === /*elemIndex*/ ctx[89]);
2212
2307
  },
2213
2308
  m(target, anchor) {
2214
2309
  insert(target, span, anchor);
@@ -2222,10 +2317,10 @@ function create_each_block_5(ctx) {
2222
2317
  },
2223
2318
  p(new_ctx, dirty) {
2224
2319
  ctx = new_ctx;
2225
- if (dirty[0] & /*targetsToSearch*/ 4 && t0_value !== (t0_value = /*name*/ ctx[82] + "")) set_data(t0, t0_value);
2320
+ if (dirty[0] & /*targetsToSearch*/ 8 && t0_value !== (t0_value = /*name*/ ctx[87] + "")) set_data(t0, t0_value);
2226
2321
 
2227
- if (dirty[0] & /*selectedElemIndex*/ 32) {
2228
- toggle_class(span, "selected", /*selectedElemIndex*/ ctx[5] === /*elemIndex*/ ctx[84]);
2322
+ if (dirty[0] & /*selectedElemIndex*/ 64) {
2323
+ toggle_class(span, "selected", /*selectedElemIndex*/ ctx[6] === /*elemIndex*/ ctx[89]);
2229
2324
  }
2230
2325
  },
2231
2326
  d(detaching) {
@@ -2236,25 +2331,150 @@ function create_each_block_5(ctx) {
2236
2331
  };
2237
2332
  }
2238
2333
 
2239
- // (428:8) {#each getRuleNames(allRules[selectedElemIndex]) as ruleName, ruleIndex}
2240
- function create_each_block_4(ctx) {
2334
+ // (499:8) {:else}
2335
+ function create_else_block_2(ctx) {
2336
+ let each_1_anchor;
2337
+ let each_value_5 = getRuleNames(/*allRules*/ ctx[4][/*selectedElemIndex*/ ctx[6]]);
2338
+ let each_blocks = [];
2339
+
2340
+ for (let i = 0; i < each_value_5.length; i += 1) {
2341
+ each_blocks[i] = create_each_block_5(get_each_context_5(ctx, each_value_5, i));
2342
+ }
2343
+
2344
+ return {
2345
+ c() {
2346
+ for (let i = 0; i < each_blocks.length; i += 1) {
2347
+ each_blocks[i].c();
2348
+ }
2349
+
2350
+ each_1_anchor = empty();
2351
+ },
2352
+ m(target, anchor) {
2353
+ for (let i = 0; i < each_blocks.length; i += 1) {
2354
+ if (each_blocks[i]) {
2355
+ each_blocks[i].m(target, anchor);
2356
+ }
2357
+ }
2358
+
2359
+ insert(target, each_1_anchor, anchor);
2360
+ },
2361
+ p(ctx, dirty) {
2362
+ if (dirty[0] & /*allRules, selectedElemIndex, selectedRuleIndex, selectRule, getCssRuleName, clickedElement*/ 134218450) {
2363
+ each_value_5 = getRuleNames(/*allRules*/ ctx[4][/*selectedElemIndex*/ ctx[6]]);
2364
+ let i;
2365
+
2366
+ for (i = 0; i < each_value_5.length; i += 1) {
2367
+ const child_ctx = get_each_context_5(ctx, each_value_5, i);
2368
+
2369
+ if (each_blocks[i]) {
2370
+ each_blocks[i].p(child_ctx, dirty);
2371
+ } else {
2372
+ each_blocks[i] = create_each_block_5(child_ctx);
2373
+ each_blocks[i].c();
2374
+ each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
2375
+ }
2376
+ }
2377
+
2378
+ for (; i < each_blocks.length; i += 1) {
2379
+ each_blocks[i].d(1);
2380
+ }
2381
+
2382
+ each_blocks.length = each_value_5.length;
2383
+ }
2384
+ },
2385
+ d(detaching) {
2386
+ destroy_each(each_blocks, detaching);
2387
+ if (detaching) detach(each_1_anchor);
2388
+ }
2389
+ };
2390
+ }
2391
+
2392
+ // (491:8) {#if nbChars(getRuleNamesTransformed(allRules[selectedElemIndex])) > 30}
2393
+ function create_if_block_10(ctx) {
2394
+ let select;
2395
+ let mounted;
2396
+ let dispose;
2397
+ let each_value_4 = getRuleNames(/*allRules*/ ctx[4][/*selectedElemIndex*/ ctx[6]]);
2398
+ let each_blocks = [];
2399
+
2400
+ for (let i = 0; i < each_value_4.length; i += 1) {
2401
+ each_blocks[i] = create_each_block_4(get_each_context_4(ctx, each_value_4, i));
2402
+ }
2403
+
2404
+ return {
2405
+ c() {
2406
+ select = element("select");
2407
+
2408
+ for (let i = 0; i < each_blocks.length; i += 1) {
2409
+ each_blocks[i].c();
2410
+ }
2411
+ },
2412
+ m(target, anchor) {
2413
+ insert(target, select, anchor);
2414
+
2415
+ for (let i = 0; i < each_blocks.length; i += 1) {
2416
+ if (each_blocks[i]) {
2417
+ each_blocks[i].m(select, null);
2418
+ }
2419
+ }
2420
+
2421
+ if (!mounted) {
2422
+ dispose = listen(select, "change", /*change_handler*/ ctx[40]);
2423
+ mounted = true;
2424
+ }
2425
+ },
2426
+ p(ctx, dirty) {
2427
+ if (dirty[0] & /*selectedRuleIndex, getCssRuleName, allRules, selectedElemIndex, clickedElement*/ 722) {
2428
+ each_value_4 = getRuleNames(/*allRules*/ ctx[4][/*selectedElemIndex*/ ctx[6]]);
2429
+ let i;
2430
+
2431
+ for (i = 0; i < each_value_4.length; i += 1) {
2432
+ const child_ctx = get_each_context_4(ctx, each_value_4, i);
2433
+
2434
+ if (each_blocks[i]) {
2435
+ each_blocks[i].p(child_ctx, dirty);
2436
+ } else {
2437
+ each_blocks[i] = create_each_block_4(child_ctx);
2438
+ each_blocks[i].c();
2439
+ each_blocks[i].m(select, null);
2440
+ }
2441
+ }
2442
+
2443
+ for (; i < each_blocks.length; i += 1) {
2444
+ each_blocks[i].d(1);
2445
+ }
2446
+
2447
+ each_blocks.length = each_value_4.length;
2448
+ }
2449
+ },
2450
+ d(detaching) {
2451
+ if (detaching) detach(select);
2452
+ destroy_each(each_blocks, detaching);
2453
+ mounted = false;
2454
+ dispose();
2455
+ }
2456
+ };
2457
+ }
2458
+
2459
+ // (500:12) {#each getRuleNames(allRules[selectedElemIndex]) as ruleName, ruleIndex}
2460
+ function create_each_block_5(ctx) {
2241
2461
  let span;
2242
- let t_value = /*ruleName*/ ctx[78] + "";
2462
+ let t_value = /*getCssRuleName*/ ctx[1](/*ruleName*/ ctx[82], /*clickedElement*/ ctx[9]) + "";
2243
2463
  let t;
2244
2464
  let span_title_value;
2245
2465
  let mounted;
2246
2466
  let dispose;
2247
2467
 
2248
2468
  function click_handler_1() {
2249
- return /*click_handler_1*/ ctx[37](/*ruleIndex*/ ctx[80]);
2469
+ return /*click_handler_1*/ ctx[41](/*ruleIndex*/ ctx[84]);
2250
2470
  }
2251
2471
 
2252
2472
  return {
2253
2473
  c() {
2254
2474
  span = element("span");
2255
2475
  t = text(t_value);
2256
- attr(span, "title", span_title_value = /*ruleName*/ ctx[78]);
2257
- toggle_class(span, "selected", /*selectedRuleIndex*/ ctx[6] === /*ruleIndex*/ ctx[80]);
2476
+ attr(span, "title", span_title_value = /*ruleName*/ ctx[82]);
2477
+ toggle_class(span, "selected", /*selectedRuleIndex*/ ctx[7] === /*ruleIndex*/ ctx[84]);
2258
2478
  },
2259
2479
  m(target, anchor) {
2260
2480
  insert(target, span, anchor);
@@ -2267,14 +2487,14 @@ function create_each_block_4(ctx) {
2267
2487
  },
2268
2488
  p(new_ctx, dirty) {
2269
2489
  ctx = new_ctx;
2270
- if (dirty[0] & /*allRules, selectedElemIndex*/ 40 && t_value !== (t_value = /*ruleName*/ ctx[78] + "")) set_data(t, t_value);
2490
+ if (dirty[0] & /*getCssRuleName, allRules, selectedElemIndex, clickedElement*/ 594 && t_value !== (t_value = /*getCssRuleName*/ ctx[1](/*ruleName*/ ctx[82], /*clickedElement*/ ctx[9]) + "")) set_data(t, t_value);
2271
2491
 
2272
- if (dirty[0] & /*allRules, selectedElemIndex*/ 40 && span_title_value !== (span_title_value = /*ruleName*/ ctx[78])) {
2492
+ if (dirty[0] & /*allRules, selectedElemIndex*/ 80 && span_title_value !== (span_title_value = /*ruleName*/ ctx[82])) {
2273
2493
  attr(span, "title", span_title_value);
2274
2494
  }
2275
2495
 
2276
- if (dirty[0] & /*selectedRuleIndex*/ 64) {
2277
- toggle_class(span, "selected", /*selectedRuleIndex*/ ctx[6] === /*ruleIndex*/ ctx[80]);
2496
+ if (dirty[0] & /*selectedRuleIndex*/ 128) {
2497
+ toggle_class(span, "selected", /*selectedRuleIndex*/ ctx[7] === /*ruleIndex*/ ctx[84]);
2278
2498
  }
2279
2499
  },
2280
2500
  d(detaching) {
@@ -2285,17 +2505,53 @@ function create_each_block_4(ctx) {
2285
2505
  };
2286
2506
  }
2287
2507
 
2288
- // (439:12) {#if type !== 'custom' || (currentRule === 'inline' && type === 'custom' && hasDisplayedCustom )}
2289
- function create_if_block_8(ctx) {
2508
+ // (493:16) {#each getRuleNames(allRules[selectedElemIndex]) as ruleName, ruleIndex}
2509
+ function create_each_block_4(ctx) {
2510
+ let option;
2511
+ let t_value = /*getCssRuleName*/ ctx[1](/*ruleName*/ ctx[82], /*clickedElement*/ ctx[9]) + "";
2512
+ let t;
2513
+ let option_selected_value;
2514
+
2515
+ return {
2516
+ c() {
2517
+ option = element("option");
2518
+ t = text(t_value);
2519
+ option.selected = option_selected_value = /*selectedRuleIndex*/ ctx[7] === /*ruleIndex*/ ctx[84];
2520
+ option.__value = /*ruleIndex*/ ctx[84];
2521
+ option.value = option.__value;
2522
+ },
2523
+ m(target, anchor) {
2524
+ insert(target, option, anchor);
2525
+ append(option, t);
2526
+ },
2527
+ p(ctx, dirty) {
2528
+ if (dirty[0] & /*getCssRuleName, allRules, selectedElemIndex, clickedElement*/ 594 && t_value !== (t_value = /*getCssRuleName*/ ctx[1](/*ruleName*/ ctx[82], /*clickedElement*/ ctx[9]) + "")) set_data(t, t_value);
2529
+
2530
+ if (dirty[0] & /*selectedRuleIndex*/ 128 && option_selected_value !== (option_selected_value = /*selectedRuleIndex*/ ctx[7] === /*ruleIndex*/ ctx[84])) {
2531
+ option.selected = option_selected_value;
2532
+ }
2533
+ },
2534
+ d(detaching) {
2535
+ if (detaching) detach(option);
2536
+ }
2537
+ };
2538
+ }
2539
+
2540
+ // (517:12) {#if type !== "custom" || (currentRule === "inline" && type === "custom" && hasDisplayedCustom)}
2541
+ function create_if_block_9(ctx) {
2290
2542
  let span;
2291
- let t0_value = /*type*/ ctx[75] + "";
2543
+
2544
+ let t0_value = (/*type*/ ctx[79] === "stroke"
2545
+ ? "SVG paint"
2546
+ : capitalizeFirstLetter(/*type*/ ctx[79])) + "";
2547
+
2292
2548
  let t0;
2293
2549
  let t1;
2294
2550
  let mounted;
2295
2551
  let dispose;
2296
2552
 
2297
2553
  function click_handler_2() {
2298
- return /*click_handler_2*/ ctx[38](/*typeIndex*/ ctx[77]);
2554
+ return /*click_handler_2*/ ctx[42](/*typeIndex*/ ctx[81]);
2299
2555
  }
2300
2556
 
2301
2557
  return {
@@ -2303,7 +2559,7 @@ function create_if_block_8(ctx) {
2303
2559
  span = element("span");
2304
2560
  t0 = text(t0_value);
2305
2561
  t1 = space();
2306
- toggle_class(span, "selected", /*selectedTypeIndex*/ ctx[7] === /*typeIndex*/ ctx[77]);
2562
+ toggle_class(span, "selected", /*selectedTypeIndex*/ ctx[8] === /*typeIndex*/ ctx[81]);
2307
2563
  },
2308
2564
  m(target, anchor) {
2309
2565
  insert(target, span, anchor);
@@ -2317,10 +2573,13 @@ function create_if_block_8(ctx) {
2317
2573
  },
2318
2574
  p(new_ctx, dirty) {
2319
2575
  ctx = new_ctx;
2320
- if (dirty[0] & /*allTypes, selectedElemIndex*/ 48 && t0_value !== (t0_value = /*type*/ ctx[75] + "")) set_data(t0, t0_value);
2321
2576
 
2322
- if (dirty[0] & /*selectedTypeIndex*/ 128) {
2323
- toggle_class(span, "selected", /*selectedTypeIndex*/ ctx[7] === /*typeIndex*/ ctx[77]);
2577
+ if (dirty[0] & /*allTypes, selectedElemIndex*/ 96 && t0_value !== (t0_value = (/*type*/ ctx[79] === "stroke"
2578
+ ? "SVG paint"
2579
+ : capitalizeFirstLetter(/*type*/ ctx[79])) + "")) set_data(t0, t0_value);
2580
+
2581
+ if (dirty[0] & /*selectedTypeIndex*/ 256) {
2582
+ toggle_class(span, "selected", /*selectedTypeIndex*/ ctx[8] === /*typeIndex*/ ctx[81]);
2324
2583
  }
2325
2584
  },
2326
2585
  d(detaching) {
@@ -2331,10 +2590,10 @@ function create_if_block_8(ctx) {
2331
2590
  };
2332
2591
  }
2333
2592
 
2334
- // (437:8) {#each allTypes[selectedElemIndex] || [] as type, typeIndex}
2593
+ // (515:8) {#each allTypes[selectedElemIndex] || [] as type, typeIndex}
2335
2594
  function create_each_block_3(ctx) {
2336
2595
  let if_block_anchor;
2337
- let if_block = (/*type*/ ctx[75] !== 'custom' || /*currentRule*/ ctx[17] === 'inline' && /*type*/ ctx[75] === 'custom' && /*hasDisplayedCustom*/ ctx[16]) && create_if_block_8(ctx);
2596
+ let if_block = (/*type*/ ctx[79] !== "custom" || /*currentRule*/ ctx[19] === "inline" && /*type*/ ctx[79] === "custom" && /*hasDisplayedCustom*/ ctx[18]) && create_if_block_9(ctx);
2338
2597
 
2339
2598
  return {
2340
2599
  c() {
@@ -2346,11 +2605,11 @@ function create_each_block_3(ctx) {
2346
2605
  insert(target, if_block_anchor, anchor);
2347
2606
  },
2348
2607
  p(ctx, dirty) {
2349
- if (/*type*/ ctx[75] !== 'custom' || /*currentRule*/ ctx[17] === 'inline' && /*type*/ ctx[75] === 'custom' && /*hasDisplayedCustom*/ ctx[16]) {
2608
+ if (/*type*/ ctx[79] !== "custom" || /*currentRule*/ ctx[19] === "inline" && /*type*/ ctx[79] === "custom" && /*hasDisplayedCustom*/ ctx[18]) {
2350
2609
  if (if_block) {
2351
2610
  if_block.p(ctx, dirty);
2352
2611
  } else {
2353
- if_block = create_if_block_8(ctx);
2612
+ if_block = create_if_block_9(ctx);
2354
2613
  if_block.c();
2355
2614
  if_block.m(if_block_anchor.parentNode, if_block_anchor);
2356
2615
  }
@@ -2366,14 +2625,14 @@ function create_each_block_3(ctx) {
2366
2625
  };
2367
2626
  }
2368
2627
 
2369
- // (444:4) {#if allTypes[selectedElemIndex]}
2628
+ // (529:4) {#if allTypes[selectedElemIndex]}
2370
2629
  function create_if_block(ctx) {
2371
2630
  let div;
2372
2631
  let t0;
2373
2632
  let t1;
2374
- let show_if = /*currentRule*/ ctx[17] === 'inline' && /*inlineDeletable*/ ctx[0](/*currentElement*/ ctx[18]);
2633
+ let show_if = /*currentRule*/ ctx[19] === "inline" && /*inlineDeletable*/ ctx[0](/*currentElement*/ ctx[20]);
2375
2634
  let current;
2376
- let each_value = /*propsByType*/ ctx[13];
2635
+ let each_value = /*propsByType*/ ctx[15];
2377
2636
  let each_blocks = [];
2378
2637
 
2379
2638
  for (let i = 0; i < each_value.length; i += 1) {
@@ -2384,7 +2643,7 @@ function create_if_block(ctx) {
2384
2643
  each_blocks[i] = null;
2385
2644
  });
2386
2645
 
2387
- let if_block0 = /*currentRule*/ ctx[17] === 'inline' && /*bringableToFront*/ ctx[15][/*selectedElemIndex*/ ctx[5]] !== null && create_if_block_2(ctx);
2646
+ let if_block0 = /*currentRule*/ ctx[19] === "inline" && /*bringableToFront*/ ctx[17][/*selectedElemIndex*/ ctx[6]] !== null && create_if_block_2(ctx);
2388
2647
  let if_block1 = show_if && create_if_block_1(ctx);
2389
2648
 
2390
2649
  return {
@@ -2405,7 +2664,9 @@ function create_if_block(ctx) {
2405
2664
  insert(target, div, anchor);
2406
2665
 
2407
2666
  for (let i = 0; i < each_blocks.length; i += 1) {
2408
- each_blocks[i].m(div, null);
2667
+ if (each_blocks[i]) {
2668
+ each_blocks[i].m(div, null);
2669
+ }
2409
2670
  }
2410
2671
 
2411
2672
  append(div, t0);
@@ -2415,8 +2676,8 @@ function create_if_block(ctx) {
2415
2676
  current = true;
2416
2677
  },
2417
2678
  p(ctx, dirty) {
2418
- if (dirty[0] & /*allCurrentPropDefs, propsByType, updateProp, deleteProp*/ 9461760) {
2419
- each_value = /*propsByType*/ ctx[13];
2679
+ if (dirty[0] & /*propsByType, allCurrentPropDefs, updateProp, deleteProp*/ 75595776) {
2680
+ each_value = /*propsByType*/ ctx[15];
2420
2681
  let i;
2421
2682
 
2422
2683
  for (i = 0; i < each_value.length; i += 1) {
@@ -2442,7 +2703,7 @@ function create_if_block(ctx) {
2442
2703
  check_outros();
2443
2704
  }
2444
2705
 
2445
- if (/*currentRule*/ ctx[17] === 'inline' && /*bringableToFront*/ ctx[15][/*selectedElemIndex*/ ctx[5]] !== null) {
2706
+ if (/*currentRule*/ ctx[19] === "inline" && /*bringableToFront*/ ctx[17][/*selectedElemIndex*/ ctx[6]] !== null) {
2446
2707
  if (if_block0) {
2447
2708
  if_block0.p(ctx, dirty);
2448
2709
  } else {
@@ -2455,7 +2716,7 @@ function create_if_block(ctx) {
2455
2716
  if_block0 = null;
2456
2717
  }
2457
2718
 
2458
- if (dirty[0] & /*currentRule, inlineDeletable, currentElement*/ 393217) show_if = /*currentRule*/ ctx[17] === 'inline' && /*inlineDeletable*/ ctx[0](/*currentElement*/ ctx[18]);
2719
+ if (dirty[0] & /*currentRule, inlineDeletable, currentElement*/ 1572865) show_if = /*currentRule*/ ctx[19] === "inline" && /*inlineDeletable*/ ctx[0](/*currentElement*/ ctx[20]);
2459
2720
 
2460
2721
  if (show_if) {
2461
2722
  if (if_block1) {
@@ -2497,10 +2758,10 @@ function create_if_block(ctx) {
2497
2758
  };
2498
2759
  }
2499
2760
 
2500
- // (455:16) {:else}
2501
- function create_else_block(ctx) {
2761
+ // (552:24) {:else}
2762
+ function create_else_block_1(ctx) {
2502
2763
  let span;
2503
- let t_value = /*selectedName*/ ctx[66] + "";
2764
+ let t_value = pascalCaseToSentence(/*selectedName*/ ctx[70]) + "";
2504
2765
  let t;
2505
2766
 
2506
2767
  return {
@@ -2513,7 +2774,7 @@ function create_else_block(ctx) {
2513
2774
  append(span, t);
2514
2775
  },
2515
2776
  p(ctx, dirty) {
2516
- if (dirty[0] & /*propsByType*/ 8192 && t_value !== (t_value = /*selectedName*/ ctx[66] + "")) set_data(t, t_value);
2777
+ if (dirty[0] & /*propsByType*/ 32768 && t_value !== (t_value = pascalCaseToSentence(/*selectedName*/ ctx[70]) + "")) set_data(t, t_value);
2517
2778
  },
2518
2779
  d(detaching) {
2519
2780
  if (detaching) detach(span);
@@ -2521,26 +2782,24 @@ function create_else_block(ctx) {
2521
2782
  };
2522
2783
  }
2523
2784
 
2524
- // (449:16) {#if choices.props.length > 1}
2785
+ // (535:24) {#if choices.props.length > 1}
2525
2786
  function create_if_block_7(ctx) {
2526
- let div;
2527
2787
  let select;
2528
2788
  let mounted;
2529
2789
  let dispose;
2530
- let each_value_2 = /*choices*/ ctx[65].props;
2790
+ let each_value_2 = /*choices*/ ctx[69].props;
2531
2791
  let each_blocks = [];
2532
2792
 
2533
2793
  for (let i = 0; i < each_value_2.length; i += 1) {
2534
2794
  each_blocks[i] = create_each_block_2(get_each_context_2(ctx, each_value_2, i));
2535
2795
  }
2536
2796
 
2537
- function change_handler(...args) {
2538
- return /*change_handler*/ ctx[39](/*choices*/ ctx[65], /*each_value*/ ctx[67], /*choices_index*/ ctx[68], ...args);
2797
+ function change_handler_1(...args) {
2798
+ return /*change_handler_1*/ ctx[43](/*choices*/ ctx[69], /*each_value*/ ctx[71], /*choices_index*/ ctx[72], ...args);
2539
2799
  }
2540
2800
 
2541
2801
  return {
2542
2802
  c() {
2543
- div = element("div");
2544
2803
  select = element("select");
2545
2804
 
2546
2805
  for (let i = 0; i < each_blocks.length; i += 1) {
@@ -2548,23 +2807,24 @@ function create_if_block_7(ctx) {
2548
2807
  }
2549
2808
  },
2550
2809
  m(target, anchor) {
2551
- insert(target, div, anchor);
2552
- append(div, select);
2810
+ insert(target, select, anchor);
2553
2811
 
2554
2812
  for (let i = 0; i < each_blocks.length; i += 1) {
2555
- each_blocks[i].m(select, null);
2813
+ if (each_blocks[i]) {
2814
+ each_blocks[i].m(select, null);
2815
+ }
2556
2816
  }
2557
2817
 
2558
2818
  if (!mounted) {
2559
- dispose = listen(select, "change", change_handler);
2819
+ dispose = listen(select, "change", change_handler_1);
2560
2820
  mounted = true;
2561
2821
  }
2562
2822
  },
2563
2823
  p(new_ctx, dirty) {
2564
2824
  ctx = new_ctx;
2565
2825
 
2566
- if (dirty[0] & /*propsByType*/ 8192) {
2567
- each_value_2 = /*choices*/ ctx[65].props;
2826
+ if (dirty[0] & /*propsByType*/ 32768) {
2827
+ each_value_2 = /*choices*/ ctx[69].props;
2568
2828
  let i;
2569
2829
 
2570
2830
  for (i = 0; i < each_value_2.length; i += 1) {
@@ -2587,7 +2847,7 @@ function create_if_block_7(ctx) {
2587
2847
  }
2588
2848
  },
2589
2849
  d(detaching) {
2590
- if (detaching) detach(div);
2850
+ if (detaching) detach(select);
2591
2851
  destroy_each(each_blocks, detaching);
2592
2852
  mounted = false;
2593
2853
  dispose();
@@ -2595,53 +2855,116 @@ function create_if_block_7(ctx) {
2595
2855
  };
2596
2856
  }
2597
2857
 
2598
- // (451:24) {#each choices.props as propName, i}
2599
- function create_each_block_2(ctx) {
2600
- let option;
2601
- let t0_value = /*propName*/ ctx[72] + "";
2858
+ // (546:40) {:else}
2859
+ function create_else_block(ctx) {
2860
+ let t_value = pascalCaseToSentence(/*propName*/ ctx[76]) + "";
2861
+ let t;
2862
+
2863
+ return {
2864
+ c() {
2865
+ t = text(t_value);
2866
+ },
2867
+ m(target, anchor) {
2868
+ insert(target, t, anchor);
2869
+ },
2870
+ p(ctx, dirty) {
2871
+ if (dirty[0] & /*propsByType*/ 32768 && t_value !== (t_value = pascalCaseToSentence(/*propName*/ ctx[76]) + "")) set_data(t, t_value);
2872
+ },
2873
+ d(detaching) {
2874
+ if (detaching) detach(t);
2875
+ }
2876
+ };
2877
+ }
2878
+
2879
+ // (544:40) {#if choices.type === "color"}
2880
+ function create_if_block_8(ctx) {
2881
+ let t0_value = capitalizeFirstLetter(/*propName*/ ctx[76]) + "";
2602
2882
  let t0;
2603
2883
  let t1;
2884
+
2885
+ return {
2886
+ c() {
2887
+ t0 = text(t0_value);
2888
+ t1 = text(" color");
2889
+ },
2890
+ m(target, anchor) {
2891
+ insert(target, t0, anchor);
2892
+ insert(target, t1, anchor);
2893
+ },
2894
+ p(ctx, dirty) {
2895
+ if (dirty[0] & /*propsByType*/ 32768 && t0_value !== (t0_value = capitalizeFirstLetter(/*propName*/ ctx[76]) + "")) set_data(t0, t0_value);
2896
+ },
2897
+ d(detaching) {
2898
+ if (detaching) detach(t0);
2899
+ if (detaching) detach(t1);
2900
+ }
2901
+ };
2902
+ }
2903
+
2904
+ // (542:32) {#each choices.props as propName, i}
2905
+ function create_each_block_2(ctx) {
2906
+ let option;
2907
+ let t;
2604
2908
  let option_selected_value;
2605
2909
 
2910
+ function select_block_type_2(ctx, dirty) {
2911
+ if (/*choices*/ ctx[69].type === "color") return create_if_block_8;
2912
+ return create_else_block;
2913
+ }
2914
+
2915
+ let current_block_type = select_block_type_2(ctx);
2916
+ let if_block = current_block_type(ctx);
2917
+
2606
2918
  return {
2607
2919
  c() {
2608
2920
  option = element("option");
2609
- t0 = text(t0_value);
2610
- t1 = space();
2611
- option.selected = option_selected_value = /*i*/ ctx[74] === /*choices*/ ctx[65].selected;
2612
- option.__value = /*i*/ ctx[74];
2921
+ if_block.c();
2922
+ t = space();
2923
+ option.selected = option_selected_value = /*i*/ ctx[78] === /*choices*/ ctx[69].selected;
2924
+ option.__value = /*i*/ ctx[78];
2613
2925
  option.value = option.__value;
2614
2926
  },
2615
2927
  m(target, anchor) {
2616
2928
  insert(target, option, anchor);
2617
- append(option, t0);
2618
- append(option, t1);
2929
+ if_block.m(option, null);
2930
+ append(option, t);
2619
2931
  },
2620
2932
  p(ctx, dirty) {
2621
- if (dirty[0] & /*propsByType*/ 8192 && t0_value !== (t0_value = /*propName*/ ctx[72] + "")) set_data(t0, t0_value);
2933
+ if (current_block_type === (current_block_type = select_block_type_2(ctx)) && if_block) {
2934
+ if_block.p(ctx, dirty);
2935
+ } else {
2936
+ if_block.d(1);
2937
+ if_block = current_block_type(ctx);
2938
+
2939
+ if (if_block) {
2940
+ if_block.c();
2941
+ if_block.m(option, t);
2942
+ }
2943
+ }
2622
2944
 
2623
- if (dirty[0] & /*propsByType*/ 8192 && option_selected_value !== (option_selected_value = /*i*/ ctx[74] === /*choices*/ ctx[65].selected)) {
2945
+ if (dirty[0] & /*propsByType*/ 32768 && option_selected_value !== (option_selected_value = /*i*/ ctx[78] === /*choices*/ ctx[69].selected)) {
2624
2946
  option.selected = option_selected_value;
2625
2947
  }
2626
2948
  },
2627
2949
  d(detaching) {
2628
2950
  if (detaching) detach(option);
2951
+ if_block.d();
2629
2952
  }
2630
2953
  };
2631
2954
  }
2632
2955
 
2633
- // (478:50)
2956
+ // (587:54)
2634
2957
  function create_if_block_6(ctx) {
2635
2958
  let colorpicker;
2636
2959
  let current;
2637
2960
 
2638
2961
  function func(...args) {
2639
- return /*func*/ ctx[43](/*selectedName*/ ctx[66], ...args);
2962
+ return /*func*/ ctx[47](/*selectedName*/ ctx[70], ...args);
2640
2963
  }
2641
2964
 
2642
- colorpicker = new ColorPicker$1({
2965
+ colorpicker = new ColorPicker({
2643
2966
  props: {
2644
- value: /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[66]].value,
2967
+ value: /*allCurrentPropDefs*/ ctx[16][/*selectedName*/ ctx[70]].value,
2645
2968
  onChange: func
2646
2969
  }
2647
2970
  });
@@ -2657,8 +2980,8 @@ function create_if_block_6(ctx) {
2657
2980
  p(new_ctx, dirty) {
2658
2981
  ctx = new_ctx;
2659
2982
  const colorpicker_changes = {};
2660
- if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576) colorpicker_changes.value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[66]].value;
2661
- if (dirty[0] & /*propsByType*/ 8192) colorpicker_changes.onChange = func;
2983
+ if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 98304) colorpicker_changes.value = /*allCurrentPropDefs*/ ctx[16][/*selectedName*/ ctx[70]].value;
2984
+ if (dirty[0] & /*propsByType*/ 32768) colorpicker_changes.onChange = func;
2662
2985
  colorpicker.$set(colorpicker_changes);
2663
2986
  },
2664
2987
  i(local) {
@@ -2676,23 +2999,23 @@ function create_if_block_6(ctx) {
2676
2999
  };
2677
3000
  }
2678
3001
 
2679
- // (468:51)
3002
+ // (575:55)
2680
3003
  function create_if_block_4(ctx) {
2681
3004
  let select;
2682
- let show_if = !/*choices*/ ctx[65].includes(/*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[66]].value);
3005
+ let show_if = !/*choices*/ ctx[69].includes(/*allCurrentPropDefs*/ ctx[16][/*selectedName*/ ctx[70]].value);
2683
3006
  let if_block_anchor;
2684
3007
  let mounted;
2685
3008
  let dispose;
2686
3009
  let if_block = show_if && create_if_block_5();
2687
- let each_value_1 = /*choices*/ ctx[65];
3010
+ let each_value_1 = /*choices*/ ctx[69];
2688
3011
  let each_blocks = [];
2689
3012
 
2690
3013
  for (let i = 0; i < each_value_1.length; i += 1) {
2691
3014
  each_blocks[i] = create_each_block_1(get_each_context_1(ctx, each_value_1, i));
2692
3015
  }
2693
3016
 
2694
- function change_handler_2(...args) {
2695
- return /*change_handler_2*/ ctx[42](/*selectedName*/ ctx[66], ...args);
3017
+ function change_handler_3(...args) {
3018
+ return /*change_handler_3*/ ctx[46](/*selectedName*/ ctx[70], ...args);
2696
3019
  }
2697
3020
 
2698
3021
  return {
@@ -2711,17 +3034,19 @@ function create_if_block_4(ctx) {
2711
3034
  append(select, if_block_anchor);
2712
3035
 
2713
3036
  for (let i = 0; i < each_blocks.length; i += 1) {
2714
- each_blocks[i].m(select, null);
3037
+ if (each_blocks[i]) {
3038
+ each_blocks[i].m(select, null);
3039
+ }
2715
3040
  }
2716
3041
 
2717
3042
  if (!mounted) {
2718
- dispose = listen(select, "change", change_handler_2);
3043
+ dispose = listen(select, "change", change_handler_3);
2719
3044
  mounted = true;
2720
3045
  }
2721
3046
  },
2722
3047
  p(new_ctx, dirty) {
2723
3048
  ctx = new_ctx;
2724
- if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576) show_if = !/*choices*/ ctx[65].includes(/*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[66]].value);
3049
+ if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 98304) show_if = !/*choices*/ ctx[69].includes(/*allCurrentPropDefs*/ ctx[16][/*selectedName*/ ctx[70]].value);
2725
3050
 
2726
3051
  if (show_if) {
2727
3052
  if (if_block) ; else {
@@ -2734,8 +3059,8 @@ function create_if_block_4(ctx) {
2734
3059
  if_block = null;
2735
3060
  }
2736
3061
 
2737
- if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576) {
2738
- each_value_1 = /*choices*/ ctx[65];
3062
+ if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 98304) {
3063
+ each_value_1 = /*choices*/ ctx[69];
2739
3064
  let i;
2740
3065
 
2741
3066
  for (i = 0; i < each_value_1.length; i += 1) {
@@ -2769,7 +3094,7 @@ function create_if_block_4(ctx) {
2769
3094
  };
2770
3095
  }
2771
3096
 
2772
- // (459:16) {#if choices.type === 'slider'}
3097
+ // (557:20) {#if choices.type === "slider"}
2773
3098
  function create_if_block_3(ctx) {
2774
3099
  let input;
2775
3100
  let input_min_value;
@@ -2778,13 +3103,13 @@ function create_if_block_3(ctx) {
2778
3103
  let input_value_value;
2779
3104
  let t0;
2780
3105
  let span;
2781
- let t1_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[66]].displayed + "";
3106
+ let t1_value = /*allCurrentPropDefs*/ ctx[16][/*selectedName*/ ctx[70]].displayed + "";
2782
3107
  let t1;
2783
3108
  let mounted;
2784
3109
  let dispose;
2785
3110
 
2786
- function change_handler_1(...args) {
2787
- return /*change_handler_1*/ ctx[41](/*selectedName*/ ctx[66], ...args);
3111
+ function change_handler_2(...args) {
3112
+ return /*change_handler_2*/ ctx[45](/*selectedName*/ ctx[70], ...args);
2788
3113
  }
2789
3114
 
2790
3115
  return {
@@ -2794,10 +3119,10 @@ function create_if_block_3(ctx) {
2794
3119
  span = element("span");
2795
3120
  t1 = text(t1_value);
2796
3121
  attr(input, "type", "range");
2797
- attr(input, "min", input_min_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[66]].min);
2798
- attr(input, "max", input_max_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[66]].max);
2799
- attr(input, "step", input_step_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[66]].step || 1);
2800
- input.value = input_value_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[66]].value;
3122
+ attr(input, "min", input_min_value = /*allCurrentPropDefs*/ ctx[16][/*selectedName*/ ctx[70]].min);
3123
+ attr(input, "max", input_max_value = /*allCurrentPropDefs*/ ctx[16][/*selectedName*/ ctx[70]].max);
3124
+ attr(input, "step", input_step_value = /*allCurrentPropDefs*/ ctx[16][/*selectedName*/ ctx[70]].step || 1);
3125
+ input.value = input_value_value = /*allCurrentPropDefs*/ ctx[16][/*selectedName*/ ctx[70]].value;
2801
3126
  attr(span, "class", "current-value");
2802
3127
  },
2803
3128
  m(target, anchor) {
@@ -2807,30 +3132,30 @@ function create_if_block_3(ctx) {
2807
3132
  append(span, t1);
2808
3133
 
2809
3134
  if (!mounted) {
2810
- dispose = listen(input, "change", change_handler_1);
3135
+ dispose = listen(input, "change", change_handler_2);
2811
3136
  mounted = true;
2812
3137
  }
2813
3138
  },
2814
3139
  p(new_ctx, dirty) {
2815
3140
  ctx = new_ctx;
2816
3141
 
2817
- if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576 && input_min_value !== (input_min_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[66]].min)) {
3142
+ if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 98304 && input_min_value !== (input_min_value = /*allCurrentPropDefs*/ ctx[16][/*selectedName*/ ctx[70]].min)) {
2818
3143
  attr(input, "min", input_min_value);
2819
3144
  }
2820
3145
 
2821
- if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576 && input_max_value !== (input_max_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[66]].max)) {
3146
+ if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 98304 && input_max_value !== (input_max_value = /*allCurrentPropDefs*/ ctx[16][/*selectedName*/ ctx[70]].max)) {
2822
3147
  attr(input, "max", input_max_value);
2823
3148
  }
2824
3149
 
2825
- if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576 && input_step_value !== (input_step_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[66]].step || 1)) {
3150
+ if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 98304 && input_step_value !== (input_step_value = /*allCurrentPropDefs*/ ctx[16][/*selectedName*/ ctx[70]].step || 1)) {
2826
3151
  attr(input, "step", input_step_value);
2827
3152
  }
2828
3153
 
2829
- if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576 && input_value_value !== (input_value_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[66]].value)) {
3154
+ if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 98304 && input_value_value !== (input_value_value = /*allCurrentPropDefs*/ ctx[16][/*selectedName*/ ctx[70]].value)) {
2830
3155
  input.value = input_value_value;
2831
3156
  }
2832
3157
 
2833
- if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576 && t1_value !== (t1_value = /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[66]].displayed + "")) set_data(t1, t1_value);
3158
+ if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 98304 && t1_value !== (t1_value = /*allCurrentPropDefs*/ ctx[16][/*selectedName*/ ctx[70]].displayed + "")) set_data(t1, t1_value);
2834
3159
  },
2835
3160
  i: noop$1,
2836
3161
  o: noop$1,
@@ -2844,7 +3169,7 @@ function create_if_block_3(ctx) {
2844
3169
  };
2845
3170
  }
2846
3171
 
2847
- // (471:24) {#if !choices.includes(allCurrentPropDefs[selectedName].value)}
3172
+ // (578:28) {#if !choices.includes(allCurrentPropDefs[selectedName].value)}
2848
3173
  function create_if_block_5(ctx) {
2849
3174
  let option;
2850
3175
 
@@ -2865,10 +3190,10 @@ function create_if_block_5(ctx) {
2865
3190
  };
2866
3191
  }
2867
3192
 
2868
- // (474:24) {#each choices as choice}
3193
+ // (581:28) {#each choices as choice}
2869
3194
  function create_each_block_1(ctx) {
2870
3195
  let option;
2871
- let t_value = /*choice*/ ctx[69] + "";
3196
+ let t_value = /*choice*/ ctx[73] + "";
2872
3197
  let t;
2873
3198
  let option_selected_value;
2874
3199
  let option_value_value;
@@ -2877,8 +3202,8 @@ function create_each_block_1(ctx) {
2877
3202
  c() {
2878
3203
  option = element("option");
2879
3204
  t = text(t_value);
2880
- option.selected = option_selected_value = /*choice*/ ctx[69] == /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[66]].value || null;
2881
- option.__value = option_value_value = " " + /*choice*/ ctx[69] + " ";
3205
+ option.selected = option_selected_value = /*choice*/ ctx[73] == /*allCurrentPropDefs*/ ctx[16][/*selectedName*/ ctx[70]].value || null;
3206
+ option.__value = option_value_value = "\n " + /*choice*/ ctx[73] + "\n ";
2882
3207
  option.value = option.__value;
2883
3208
  },
2884
3209
  m(target, anchor) {
@@ -2886,13 +3211,13 @@ function create_each_block_1(ctx) {
2886
3211
  append(option, t);
2887
3212
  },
2888
3213
  p(ctx, dirty) {
2889
- if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576 && t_value !== (t_value = /*choice*/ ctx[69] + "")) set_data(t, t_value);
3214
+ if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 98304 && t_value !== (t_value = /*choice*/ ctx[73] + "")) set_data(t, t_value);
2890
3215
 
2891
- if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576 && option_selected_value !== (option_selected_value = /*choice*/ ctx[69] == /*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[66]].value || null)) {
3216
+ if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 98304 && option_selected_value !== (option_selected_value = /*choice*/ ctx[73] == /*allCurrentPropDefs*/ ctx[16][/*selectedName*/ ctx[70]].value || null)) {
2892
3217
  option.selected = option_selected_value;
2893
3218
  }
2894
3219
 
2895
- if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 24576 && option_value_value !== (option_value_value = " " + /*choice*/ ctx[69] + " ")) {
3220
+ if (dirty[0] & /*allCurrentPropDefs, propsByType*/ 98304 && option_value_value !== (option_value_value = "\n " + /*choice*/ ctx[73] + "\n ")) {
2896
3221
  option.__value = option_value_value;
2897
3222
  option.value = option.__value;
2898
3223
  }
@@ -2903,37 +3228,39 @@ function create_each_block_1(ctx) {
2903
3228
  };
2904
3229
  }
2905
3230
 
2906
- // (446:8) {#each propsByType as choices}
3231
+ // (531:12) {#each propsByType as choices}
2907
3232
  function create_each_block(ctx) {
2908
- let div;
3233
+ let div1;
3234
+ let div0;
2909
3235
  let t0;
2910
3236
  let span;
2911
3237
  let t2;
2912
3238
  let current_block_type_index;
2913
3239
  let if_block1;
3240
+ let div1_class_value;
2914
3241
  let current;
2915
3242
  let mounted;
2916
3243
  let dispose;
2917
3244
 
2918
- function select_block_type(ctx, dirty) {
2919
- if (/*choices*/ ctx[65].props.length > 1) return create_if_block_7;
2920
- return create_else_block;
3245
+ function select_block_type_1(ctx, dirty) {
3246
+ if (/*choices*/ ctx[69].props.length > 1) return create_if_block_7;
3247
+ return create_else_block_1;
2921
3248
  }
2922
3249
 
2923
- let current_block_type = select_block_type(ctx);
3250
+ let current_block_type = select_block_type_1(ctx);
2924
3251
  let if_block0 = current_block_type(ctx);
2925
3252
 
2926
3253
  function click_handler_3() {
2927
- return /*click_handler_3*/ ctx[40](/*selectedName*/ ctx[66]);
3254
+ return /*click_handler_3*/ ctx[44](/*selectedName*/ ctx[70]);
2928
3255
  }
2929
3256
 
2930
3257
  const if_block_creators = [create_if_block_3, create_if_block_4, create_if_block_6];
2931
3258
  const if_blocks = [];
2932
3259
 
2933
- function select_block_type_1(ctx, dirty) {
2934
- if (/*choices*/ ctx[65].type === 'slider') return 0;
2935
- if (/*choices*/ ctx[65].type == 'select') return 1;
2936
- if (/*choices*/ ctx[65].type == 'color') return 2;
3260
+ function select_block_type_3(ctx, dirty) {
3261
+ if (/*choices*/ ctx[69].type === "slider") return 0;
3262
+ if (/*choices*/ ctx[69].type == "select") return 1;
3263
+ if (/*choices*/ ctx[69].type == "color") return 2;
2937
3264
  return -1;
2938
3265
  }
2939
3266
 
@@ -2942,13 +3269,14 @@ function create_each_block(ctx) {
2942
3269
  return ctx;
2943
3270
  }
2944
3271
 
2945
- if (~(current_block_type_index = select_block_type_1(ctx))) {
3272
+ if (~(current_block_type_index = select_block_type_3(ctx))) {
2946
3273
  if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](select_block_ctx(ctx, current_block_type_index));
2947
3274
  }
2948
3275
 
2949
3276
  return {
2950
3277
  c() {
2951
- div = element("div");
3278
+ div1 = element("div");
3279
+ div0 = element("div");
2952
3280
  if_block0.c();
2953
3281
  t0 = space();
2954
3282
  span = element("span");
@@ -2956,17 +3284,19 @@ function create_each_block(ctx) {
2956
3284
  t2 = space();
2957
3285
  if (if_block1) if_block1.c();
2958
3286
  attr(span, "class", "delete");
2959
- attr(div, "class", "prop-section");
3287
+ attr(div0, "class", "prop-name");
3288
+ attr(div1, "class", div1_class_value = "prop-section " + /*choices*/ ctx[69].type);
2960
3289
  },
2961
3290
  m(target, anchor) {
2962
- insert(target, div, anchor);
2963
- if_block0.m(div, null);
2964
- append(div, t0);
2965
- append(div, span);
2966
- append(div, t2);
3291
+ insert(target, div1, anchor);
3292
+ append(div1, div0);
3293
+ if_block0.m(div0, null);
3294
+ append(div0, t0);
3295
+ append(div0, span);
3296
+ append(div1, t2);
2967
3297
 
2968
3298
  if (~current_block_type_index) {
2969
- if_blocks[current_block_type_index].m(div, null);
3299
+ if_blocks[current_block_type_index].m(div1, null);
2970
3300
  }
2971
3301
 
2972
3302
  current = true;
@@ -2979,7 +3309,7 @@ function create_each_block(ctx) {
2979
3309
  p(new_ctx, dirty) {
2980
3310
  ctx = new_ctx;
2981
3311
 
2982
- if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block0) {
3312
+ if (current_block_type === (current_block_type = select_block_type_1(ctx)) && if_block0) {
2983
3313
  if_block0.p(ctx, dirty);
2984
3314
  } else {
2985
3315
  if_block0.d(1);
@@ -2987,12 +3317,12 @@ function create_each_block(ctx) {
2987
3317
 
2988
3318
  if (if_block0) {
2989
3319
  if_block0.c();
2990
- if_block0.m(div, t0);
3320
+ if_block0.m(div0, t0);
2991
3321
  }
2992
3322
  }
2993
3323
 
2994
3324
  let previous_block_index = current_block_type_index;
2995
- current_block_type_index = select_block_type_1(ctx);
3325
+ current_block_type_index = select_block_type_3(ctx);
2996
3326
 
2997
3327
  if (current_block_type_index === previous_block_index) {
2998
3328
  if (~current_block_type_index) {
@@ -3020,11 +3350,15 @@ function create_each_block(ctx) {
3020
3350
  }
3021
3351
 
3022
3352
  transition_in(if_block1, 1);
3023
- if_block1.m(div, null);
3353
+ if_block1.m(div1, null);
3024
3354
  } else {
3025
3355
  if_block1 = null;
3026
3356
  }
3027
3357
  }
3358
+
3359
+ if (!current || dirty[0] & /*propsByType*/ 32768 && div1_class_value !== (div1_class_value = "prop-section " + /*choices*/ ctx[69].type)) {
3360
+ attr(div1, "class", div1_class_value);
3361
+ }
3028
3362
  },
3029
3363
  i(local) {
3030
3364
  if (current) return;
@@ -3036,7 +3370,7 @@ function create_each_block(ctx) {
3036
3370
  current = false;
3037
3371
  },
3038
3372
  d(detaching) {
3039
- if (detaching) detach(div);
3373
+ if (detaching) detach(div1);
3040
3374
  if_block0.d();
3041
3375
 
3042
3376
  if (~current_block_type_index) {
@@ -3049,7 +3383,7 @@ function create_each_block(ctx) {
3049
3383
  };
3050
3384
  }
3051
3385
 
3052
- // (486:8) {#if currentRule === 'inline' && bringableToFront[selectedElemIndex] !== null}
3386
+ // (595:12) {#if currentRule === "inline" && bringableToFront[selectedElemIndex] !== null}
3053
3387
  function create_if_block_2(ctx) {
3054
3388
  let div;
3055
3389
  let mounted;
@@ -3060,19 +3394,19 @@ function create_if_block_2(ctx) {
3060
3394
  div = element("div");
3061
3395
  div.textContent = "Bring to front";
3062
3396
  attr(div, "class", "btn");
3063
- toggle_class(div, "active", /*bringableToFront*/ ctx[15][/*selectedElemIndex*/ ctx[5]] === true);
3397
+ toggle_class(div, "active", /*bringableToFront*/ ctx[17][/*selectedElemIndex*/ ctx[6]] === true);
3064
3398
  },
3065
3399
  m(target, anchor) {
3066
3400
  insert(target, div, anchor);
3067
3401
 
3068
3402
  if (!mounted) {
3069
- dispose = listen(div, "click", /*bringToFront*/ ctx[21]);
3403
+ dispose = listen(div, "click", /*bringToFront*/ ctx[24]);
3070
3404
  mounted = true;
3071
3405
  }
3072
3406
  },
3073
3407
  p(ctx, dirty) {
3074
- if (dirty[0] & /*bringableToFront, selectedElemIndex*/ 32800) {
3075
- toggle_class(div, "active", /*bringableToFront*/ ctx[15][/*selectedElemIndex*/ ctx[5]] === true);
3408
+ if (dirty[0] & /*bringableToFront, selectedElemIndex*/ 131136) {
3409
+ toggle_class(div, "active", /*bringableToFront*/ ctx[17][/*selectedElemIndex*/ ctx[6]] === true);
3076
3410
  }
3077
3411
  },
3078
3412
  d(detaching) {
@@ -3083,7 +3417,7 @@ function create_if_block_2(ctx) {
3083
3417
  };
3084
3418
  }
3085
3419
 
3086
- // (491:8) {#if currentRule === 'inline' && inlineDeletable(currentElement)}
3420
+ // (600:12) {#if currentRule === "inline" && inlineDeletable(currentElement)}
3087
3421
  function create_if_block_1(ctx) {
3088
3422
  let div;
3089
3423
  let mounted;
@@ -3099,7 +3433,7 @@ function create_if_block_1(ctx) {
3099
3433
  insert(target, div, anchor);
3100
3434
 
3101
3435
  if (!mounted) {
3102
- dispose = listen(div, "click", /*deleteElem*/ ctx[22]);
3436
+ dispose = listen(div, "click", /*deleteElem*/ ctx[25]);
3103
3437
  mounted = true;
3104
3438
  }
3105
3439
  },
@@ -3129,6 +3463,7 @@ function create_fragment(ctx) {
3129
3463
  let div2;
3130
3464
  let b0;
3131
3465
  let t6;
3466
+ let show_if;
3132
3467
  let t7;
3133
3468
  let div3;
3134
3469
  let b1;
@@ -3137,22 +3472,25 @@ function create_fragment(ctx) {
3137
3472
  let current;
3138
3473
  let mounted;
3139
3474
  let dispose;
3140
- let if_block0 = /*targetsToSearch*/ ctx[2].length > 1 && create_if_block_9(ctx);
3141
- let each_value_4 = getRuleNames(/*allRules*/ ctx[3][/*selectedElemIndex*/ ctx[5]]);
3142
- let each_blocks_1 = [];
3475
+ let if_block0 = /*targetsToSearch*/ ctx[3].length > 1 && create_if_block_11(ctx);
3143
3476
 
3144
- for (let i = 0; i < each_value_4.length; i += 1) {
3145
- each_blocks_1[i] = create_each_block_4(get_each_context_4(ctx, each_value_4, i));
3477
+ function select_block_type(ctx, dirty) {
3478
+ if (dirty[0] & /*allRules, selectedElemIndex*/ 80) show_if = null;
3479
+ if (show_if == null) show_if = !!(nbChars(/*getRuleNamesTransformed*/ ctx[21](/*allRules*/ ctx[4][/*selectedElemIndex*/ ctx[6]])) > 30);
3480
+ if (show_if) return create_if_block_10;
3481
+ return create_else_block_2;
3146
3482
  }
3147
3483
 
3148
- let each_value_3 = /*allTypes*/ ctx[4][/*selectedElemIndex*/ ctx[5]] || [];
3484
+ let current_block_type = select_block_type(ctx, [-1, -1, -1]);
3485
+ let if_block1 = current_block_type(ctx);
3486
+ let each_value_3 = /*allTypes*/ ctx[5][/*selectedElemIndex*/ ctx[6]] || [];
3149
3487
  let each_blocks = [];
3150
3488
 
3151
3489
  for (let i = 0; i < each_value_3.length; i += 1) {
3152
3490
  each_blocks[i] = create_each_block_3(get_each_context_3(ctx, each_value_3, i));
3153
3491
  }
3154
3492
 
3155
- let if_block1 = /*allTypes*/ ctx[4][/*selectedElemIndex*/ ctx[5]] && create_if_block(ctx);
3493
+ let if_block2 = /*allTypes*/ ctx[5][/*selectedElemIndex*/ ctx[6]] && create_if_block(ctx);
3156
3494
 
3157
3495
  return {
3158
3496
  c() {
@@ -3171,13 +3509,9 @@ function create_fragment(ctx) {
3171
3509
  t4 = space();
3172
3510
  div2 = element("div");
3173
3511
  b0 = element("b");
3174
- b0.textContent = "Rule:";
3512
+ b0.textContent = "Applied to:";
3175
3513
  t6 = space();
3176
-
3177
- for (let i = 0; i < each_blocks_1.length; i += 1) {
3178
- each_blocks_1[i].c();
3179
- }
3180
-
3514
+ if_block1.c();
3181
3515
  t7 = space();
3182
3516
  div3 = element("div");
3183
3517
  b1 = element("b");
@@ -3189,9 +3523,9 @@ function create_fragment(ctx) {
3189
3523
  }
3190
3524
 
3191
3525
  t10 = space();
3192
- if (if_block1) if_block1.c();
3526
+ if (if_block2) if_block2.c();
3193
3527
  set_style(div0, "position", "absolute");
3194
- attr(path, "d", /*pathWithHoles*/ ctx[11]);
3528
+ attr(path, "d", /*pathWithHoles*/ ctx[13]);
3195
3529
  attr(clipPath, "id", "overlay-clip");
3196
3530
  attr(clipPath, "clip-rule", "evenodd");
3197
3531
  attr(rect, "y", "0");
@@ -3203,8 +3537,8 @@ function create_fragment(ctx) {
3203
3537
  attr(svg, "version", "1.1");
3204
3538
  attr(svg, "xmlns", "http://www.w3.org/2000/svg");
3205
3539
  attr(svg, "xmlns:xlink", "http://www.w3.org/1999/xlink");
3206
- attr(svg, "width", svg_width_value = /*pageDimensions*/ ctx[12].width);
3207
- attr(svg, "height", svg_height_value = /*pageDimensions*/ ctx[12].height);
3540
+ attr(svg, "width", svg_width_value = /*pageDimensions*/ ctx[14].width);
3541
+ attr(svg, "height", svg_height_value = /*pageDimensions*/ ctx[14].height);
3208
3542
  attr(div1, "class", "close-button");
3209
3543
  attr(div2, "class", "select-tab");
3210
3544
  attr(div3, "class", "select-tab");
@@ -3212,13 +3546,13 @@ function create_fragment(ctx) {
3212
3546
  },
3213
3547
  m(target, anchor) {
3214
3548
  insert(target, div0, anchor);
3215
- /*div0_binding*/ ctx[34](div0);
3549
+ /*div0_binding*/ ctx[37](div0);
3216
3550
  insert(target, t0, anchor);
3217
3551
  insert(target, svg, anchor);
3218
3552
  append(svg, clipPath);
3219
3553
  append(clipPath, path);
3220
3554
  append(svg, rect);
3221
- /*svg_binding*/ ctx[35](svg);
3555
+ /*svg_binding*/ ctx[38](svg);
3222
3556
  insert(target, t1, anchor);
3223
3557
  insert(target, div4, anchor);
3224
3558
  append(div4, div1);
@@ -3228,52 +3562,50 @@ function create_fragment(ctx) {
3228
3562
  append(div4, div2);
3229
3563
  append(div2, b0);
3230
3564
  append(div2, t6);
3231
-
3232
- for (let i = 0; i < each_blocks_1.length; i += 1) {
3233
- each_blocks_1[i].m(div2, null);
3234
- }
3235
-
3565
+ if_block1.m(div2, null);
3236
3566
  append(div4, t7);
3237
3567
  append(div4, div3);
3238
3568
  append(div3, b1);
3239
3569
  append(div3, t9);
3240
3570
 
3241
3571
  for (let i = 0; i < each_blocks.length; i += 1) {
3242
- each_blocks[i].m(div3, null);
3572
+ if (each_blocks[i]) {
3573
+ each_blocks[i].m(div3, null);
3574
+ }
3243
3575
  }
3244
3576
 
3245
3577
  append(div4, t10);
3246
- if (if_block1) if_block1.m(div4, null);
3247
- /*div4_binding*/ ctx[44](div4);
3578
+ if (if_block2) if_block2.m(div4, null);
3579
+ /*div4_binding*/ ctx[48](div4);
3248
3580
  current = true;
3249
3581
 
3250
3582
  if (!mounted) {
3251
3583
  dispose = [
3252
- listen(svg, "click", /*overlayClicked*/ ctx[19]),
3253
- listen(div1, "click", /*close*/ ctx[1])
3584
+ listen(svg, "click", /*overlayClicked*/ ctx[22]),
3585
+ listen(div1, "click", /*close*/ ctx[2])
3254
3586
  ];
3255
3587
 
3256
3588
  mounted = true;
3257
3589
  }
3258
3590
  },
3259
3591
  p(ctx, dirty) {
3260
- if (!current || dirty[0] & /*pathWithHoles*/ 2048) {
3261
- attr(path, "d", /*pathWithHoles*/ ctx[11]);
3592
+ if (!current || dirty[0] & /*pathWithHoles*/ 8192) {
3593
+ attr(path, "d", /*pathWithHoles*/ ctx[13]);
3262
3594
  }
3263
3595
 
3264
- if (!current || dirty[0] & /*pageDimensions*/ 4096 && svg_width_value !== (svg_width_value = /*pageDimensions*/ ctx[12].width)) {
3596
+ if (!current || dirty[0] & /*pageDimensions*/ 16384 && svg_width_value !== (svg_width_value = /*pageDimensions*/ ctx[14].width)) {
3265
3597
  attr(svg, "width", svg_width_value);
3266
3598
  }
3267
3599
 
3268
- if (!current || dirty[0] & /*pageDimensions*/ 4096 && svg_height_value !== (svg_height_value = /*pageDimensions*/ ctx[12].height)) {
3600
+ if (!current || dirty[0] & /*pageDimensions*/ 16384 && svg_height_value !== (svg_height_value = /*pageDimensions*/ ctx[14].height)) {
3269
3601
  attr(svg, "height", svg_height_value);
3270
3602
  }
3271
3603
 
3272
- if (/*targetsToSearch*/ ctx[2].length > 1) {
3604
+ if (/*targetsToSearch*/ ctx[3].length > 1) {
3273
3605
  if (if_block0) {
3274
3606
  if_block0.p(ctx, dirty);
3275
3607
  } else {
3276
- if_block0 = create_if_block_9(ctx);
3608
+ if_block0 = create_if_block_11(ctx);
3277
3609
  if_block0.c();
3278
3610
  if_block0.m(div4, t4);
3279
3611
  }
@@ -3282,31 +3614,20 @@ function create_fragment(ctx) {
3282
3614
  if_block0 = null;
3283
3615
  }
3284
3616
 
3285
- if (dirty[0] & /*allRules, selectedElemIndex, selectedRuleIndex, selectRule*/ 16777320) {
3286
- each_value_4 = getRuleNames(/*allRules*/ ctx[3][/*selectedElemIndex*/ ctx[5]]);
3287
- let i;
3288
-
3289
- for (i = 0; i < each_value_4.length; i += 1) {
3290
- const child_ctx = get_each_context_4(ctx, each_value_4, i);
3291
-
3292
- if (each_blocks_1[i]) {
3293
- each_blocks_1[i].p(child_ctx, dirty);
3294
- } else {
3295
- each_blocks_1[i] = create_each_block_4(child_ctx);
3296
- each_blocks_1[i].c();
3297
- each_blocks_1[i].m(div2, null);
3298
- }
3299
- }
3617
+ if (current_block_type === (current_block_type = select_block_type(ctx, dirty)) && if_block1) {
3618
+ if_block1.p(ctx, dirty);
3619
+ } else {
3620
+ if_block1.d(1);
3621
+ if_block1 = current_block_type(ctx);
3300
3622
 
3301
- for (; i < each_blocks_1.length; i += 1) {
3302
- each_blocks_1[i].d(1);
3623
+ if (if_block1) {
3624
+ if_block1.c();
3625
+ if_block1.m(div2, null);
3303
3626
  }
3304
-
3305
- each_blocks_1.length = each_value_4.length;
3306
3627
  }
3307
3628
 
3308
- if (dirty[0] & /*selectedTypeIndex, allTypes, selectedElemIndex, currentRule, hasDisplayedCustom*/ 196784) {
3309
- each_value_3 = /*allTypes*/ ctx[4][/*selectedElemIndex*/ ctx[5]] || [];
3629
+ if (dirty[0] & /*selectedTypeIndex, allTypes, selectedElemIndex, currentRule, hasDisplayedCustom*/ 786784) {
3630
+ each_value_3 = /*allTypes*/ ctx[5][/*selectedElemIndex*/ ctx[6]] || [];
3310
3631
  let i;
3311
3632
 
3312
3633
  for (i = 0; i < each_value_3.length; i += 1) {
@@ -3328,24 +3649,24 @@ function create_fragment(ctx) {
3328
3649
  each_blocks.length = each_value_3.length;
3329
3650
  }
3330
3651
 
3331
- if (/*allTypes*/ ctx[4][/*selectedElemIndex*/ ctx[5]]) {
3332
- if (if_block1) {
3333
- if_block1.p(ctx, dirty);
3652
+ if (/*allTypes*/ ctx[5][/*selectedElemIndex*/ ctx[6]]) {
3653
+ if (if_block2) {
3654
+ if_block2.p(ctx, dirty);
3334
3655
 
3335
- if (dirty[0] & /*allTypes, selectedElemIndex*/ 48) {
3336
- transition_in(if_block1, 1);
3656
+ if (dirty[0] & /*allTypes, selectedElemIndex*/ 96) {
3657
+ transition_in(if_block2, 1);
3337
3658
  }
3338
3659
  } else {
3339
- if_block1 = create_if_block(ctx);
3340
- if_block1.c();
3341
- transition_in(if_block1, 1);
3342
- if_block1.m(div4, null);
3660
+ if_block2 = create_if_block(ctx);
3661
+ if_block2.c();
3662
+ transition_in(if_block2, 1);
3663
+ if_block2.m(div4, null);
3343
3664
  }
3344
- } else if (if_block1) {
3665
+ } else if (if_block2) {
3345
3666
  group_outros();
3346
3667
 
3347
- transition_out(if_block1, 1, 1, () => {
3348
- if_block1 = null;
3668
+ transition_out(if_block2, 1, 1, () => {
3669
+ if_block2 = null;
3349
3670
  });
3350
3671
 
3351
3672
  check_outros();
@@ -3353,26 +3674,26 @@ function create_fragment(ctx) {
3353
3674
  },
3354
3675
  i(local) {
3355
3676
  if (current) return;
3356
- transition_in(if_block1);
3677
+ transition_in(if_block2);
3357
3678
  current = true;
3358
3679
  },
3359
3680
  o(local) {
3360
- transition_out(if_block1);
3681
+ transition_out(if_block2);
3361
3682
  current = false;
3362
3683
  },
3363
3684
  d(detaching) {
3364
3685
  if (detaching) detach(div0);
3365
- /*div0_binding*/ ctx[34](null);
3686
+ /*div0_binding*/ ctx[37](null);
3366
3687
  if (detaching) detach(t0);
3367
3688
  if (detaching) detach(svg);
3368
- /*svg_binding*/ ctx[35](null);
3689
+ /*svg_binding*/ ctx[38](null);
3369
3690
  if (detaching) detach(t1);
3370
3691
  if (detaching) detach(div4);
3371
3692
  if (if_block0) if_block0.d();
3372
- destroy_each(each_blocks_1, detaching);
3693
+ if_block1.d();
3373
3694
  destroy_each(each_blocks, detaching);
3374
- if (if_block1) if_block1.d();
3375
- /*div4_binding*/ ctx[44](null);
3695
+ if (if_block2) if_block2.d();
3696
+ /*div4_binding*/ ctx[48](null);
3376
3697
  mounted = false;
3377
3698
  run_all(dispose);
3378
3699
  }
@@ -3389,7 +3710,7 @@ function getRuleNames(rules) {
3389
3710
  if (!rules) return [];
3390
3711
 
3391
3712
  return rules.map((rule, i) => {
3392
- if (rule === 'inline') return 'inline';
3713
+ if (rule === "inline") return "inline";
3393
3714
  const cssSelector = rule.selectorText;
3394
3715
  const title = rule.parentStyleSheet.title || `${i}`;
3395
3716
  return `${title}: ${cssSelector}`;
@@ -3415,10 +3736,10 @@ function cssRgbToHex(rgbStr) {
3415
3736
 
3416
3737
  return m.reduce(
3417
3738
  (hexStr, cur, i) => {
3418
- if (i === 3) hexStr += Math.round(cur * 255).toString(16).padStart(2, '0'); else hexStr += cur.toString(16).padStart(2, '0');
3739
+ if (i === 3) hexStr += Math.round(cur * 255).toString(16).padStart(2, "0"); else hexStr += cur.toString(16).padStart(2, "0");
3419
3740
  return hexStr;
3420
3741
  },
3421
- '#'
3742
+ "#"
3422
3743
  );
3423
3744
  }
3424
3745
 
@@ -3429,7 +3750,7 @@ function parsePropvalue(value, type = "number") {
3429
3750
 
3430
3751
  if (type == "rgb") {
3431
3752
  if (value === "none") return "#00000000";
3432
- if (value.includes('rgb') || value[0] == "#") return cssRgbToHex(value);
3753
+ if (value.includes("rgb") || value[0] == "#") return cssRgbToHex(value);
3433
3754
  }
3434
3755
 
3435
3756
  return value;
@@ -3464,16 +3785,16 @@ function instance($$self, $$props, $$invalidate) {
3464
3785
  type: "slider",
3465
3786
  min: 0,
3466
3787
  max: 30,
3467
- suffix: 'px'
3788
+ suffix: "px"
3468
3789
  },
3469
3790
  "border-width": {
3470
3791
  type: "slider",
3471
3792
  min: 0,
3472
3793
  max: 30,
3473
- suffix: 'px'
3794
+ suffix: "px"
3474
3795
  },
3475
3796
  "border-style": {
3476
- type: 'select',
3797
+ type: "select",
3477
3798
  choices: () => [
3478
3799
  "none",
3479
3800
  "dotted",
@@ -3487,33 +3808,33 @@ function instance($$self, $$props, $$invalidate) {
3487
3808
  ]
3488
3809
  },
3489
3810
  "border-color": { type: "color" },
3490
- "font-family": { type: 'select', choices: getFontFamilies },
3811
+ "font-family": { type: "select", choices: getFontFamilies },
3491
3812
  "font-size": {
3492
3813
  type: "slider",
3493
3814
  min: 0,
3494
3815
  max: 40,
3495
- suffix: 'px'
3816
+ suffix: "px"
3496
3817
  },
3497
3818
  "font-weight": { type: "slider", min: 0, max: 800 },
3498
- "color": { type: "color" },
3819
+ color: { type: "color" },
3499
3820
  "stroke-width": {
3500
3821
  type: "slider",
3501
3822
  min: 0,
3502
3823
  max: 20,
3503
3824
  step: 0.5,
3504
- suffix: 'px'
3825
+ suffix: "px"
3505
3826
  },
3506
- 'stroke': { type: "color" },
3827
+ stroke: { type: "color" },
3507
3828
  "stroke-linejoin": {
3508
- type: 'select',
3829
+ type: "select",
3509
3830
  choices: () => ["bevel", "miter", "round"]
3510
3831
  },
3511
- 'fill': { type: "color" },
3832
+ fill: { type: "color" },
3512
3833
  "stroke-dasharray": {
3513
3834
  type: "slider",
3514
3835
  min: 0,
3515
3836
  max: 30,
3516
- suffix: 'px'
3837
+ suffix: "px"
3517
3838
  },
3518
3839
  "background-color": { type: "color" }
3519
3840
  };
@@ -3529,6 +3850,11 @@ function instance($$self, $$props, $$invalidate) {
3529
3850
  let { inlineDeletable = () => true } = $$props;
3530
3851
  let { cssRuleFilter = null } = $$props;
3531
3852
 
3853
+ let { getCssRuleName = (cssRuleName, element) => {
3854
+ if (cssRuleName === "inline") return "Selected element";
3855
+ return cssRuleName;
3856
+ } } = $$props;
3857
+
3532
3858
  const propByType = {
3533
3859
  [typeText]: fontProps,
3534
3860
  [typeBorder]: borderProps,
@@ -3539,10 +3865,11 @@ function instance($$self, $$props, $$invalidate) {
3539
3865
 
3540
3866
  const inputTypeOrder = { slider: 0, select: 1, color: 2 };
3541
3867
  let elementToListen = null;
3868
+ let clickedElement = null;
3542
3869
  let positionAnchor;
3543
3870
  let self;
3544
3871
  let helperElemWrapper;
3545
- let pathWithHoles = '';
3872
+ let pathWithHoles = "";
3546
3873
  let pageDimensions = { width: 0, height: 0 };
3547
3874
  let targetsToSearch = [[]];
3548
3875
  let allRules = []; // list of list of CSS rules, for every target element
@@ -3550,7 +3877,7 @@ function instance($$self, $$props, $$invalidate) {
3550
3877
  let selectedElemIndex = 0;
3551
3878
  let selectedRuleIndex = 0;
3552
3879
  let selectedTypeIndex = 0;
3553
- let propsByType; // propType -> {[props], selected}
3880
+ let propsByType; // propType -> {[props], selected}
3554
3881
  let allCurrentPropDefs = {}; // propName => selectorDef
3555
3882
  let bringableToFront = []; // null = not bringable, true = bringable, false = was bringed
3556
3883
  let hasDisplayedCustom = false;
@@ -3558,7 +3885,7 @@ function instance($$self, $$props, $$invalidate) {
3558
3885
 
3559
3886
  onMount(() => {
3560
3887
  close();
3561
- $$invalidate(32, elementToListen = self.parentNode);
3888
+ $$invalidate(35, elementToListen = self.parentNode);
3562
3889
  document.body.appendChild(self);
3563
3890
  document.body.appendChild(helperElemWrapper);
3564
3891
  document.body.appendChild(positionAnchor);
@@ -3572,12 +3899,12 @@ function instance($$self, $$props, $$invalidate) {
3572
3899
  1000
3573
3900
  );
3574
3901
 
3575
- window.addEventListener('resize', udpatePageDimensions);
3902
+ window.addEventListener("resize", udpatePageDimensions);
3576
3903
  });
3577
3904
 
3578
3905
  onDestroy(() => {
3579
- window.removeEventListener('resize', udpatePageDimensions);
3580
- if (listenOnClick) elementToListen.removeEventListener("click", getTargetsAndRules);
3906
+ window.removeEventListener("resize", udpatePageDimensions);
3907
+ if (listenOnClick) elementToListen.removeEventListener("click", _open);
3581
3908
  });
3582
3909
 
3583
3910
  function getFontFamilies() {
@@ -3590,8 +3917,8 @@ function instance($$self, $$props, $$invalidate) {
3590
3917
 
3591
3918
  Object.keys(_allCurrentPropDefs).forEach(key => {
3592
3919
  const propSelectType = _allCurrentPropDefs[key].type;
3593
- let retrieveType = 'number';
3594
- if (propSelectType === 'color') retrieveType = 'rgb'; else if (propSelectType === 'select') retrieveType = 'raw';
3920
+ let retrieveType = "number";
3921
+ if (propSelectType === "color") retrieveType = "rgb"; else if (propSelectType === "select") retrieveType = "raw";
3595
3922
 
3596
3923
  if (_allCurrentPropDefs[key].getter) {
3597
3924
  const val = _allCurrentPropDefs[key].getter(currentElement);
@@ -3604,12 +3931,12 @@ function instance($$self, $$props, $$invalidate) {
3604
3931
  _allCurrentPropDefs[key].value = val;
3605
3932
  _allCurrentPropDefs[key].displayed = val;
3606
3933
  } else {
3607
- _allCurrentPropDefs[key].displayed = getComputedPropValue(currentElement, key, 'raw');
3934
+ _allCurrentPropDefs[key].displayed = getComputedPropValue(currentElement, key, "raw");
3608
3935
  _allCurrentPropDefs[key].value = getComputedPropValue(currentElement, key, retrieveType);
3609
3936
  }
3610
3937
  });
3611
3938
 
3612
- $$invalidate(13, propsByType = Object.entries(_allCurrentPropDefs).reduce(
3939
+ $$invalidate(15, propsByType = Object.entries(_allCurrentPropDefs).reduce(
3613
3940
  (byType, [propName, selectorDef]) => {
3614
3941
  const selectorType = selectorDef.type;
3615
3942
  const existing = byType.find(x => x.type === selectorType);
@@ -3629,10 +3956,14 @@ function instance($$self, $$props, $$invalidate) {
3629
3956
  return 0;
3630
3957
  }));
3631
3958
 
3632
- $$invalidate(14, allCurrentPropDefs = _allCurrentPropDefs);
3959
+ $$invalidate(16, allCurrentPropDefs = _allCurrentPropDefs);
3633
3960
  updateHelpers();
3634
3961
  }
3635
3962
 
3963
+ function getRuleNamesTransformed(rules) {
3964
+ return getRuleNames(rules).map(name => getCssRuleName(name, clickedElement));
3965
+ }
3966
+
3636
3967
  let warningDisplayed = new Set();
3637
3968
 
3638
3969
  function getMatchedCSSRules(elems) {
@@ -3641,7 +3972,7 @@ function instance($$self, $$props, $$invalidate) {
3641
3972
  return elems.reduce(
3642
3973
  (matchedRulesByElem, elemDef) => {
3643
3974
  const el = elemDef[0];
3644
- const matchedRules = ['inline'];
3975
+ const matchedRules = ["inline"];
3645
3976
 
3646
3977
  for (let i in sheets) {
3647
3978
  try {
@@ -3650,8 +3981,8 @@ function instance($$self, $$props, $$invalidate) {
3650
3981
  for (let r in rules) {
3651
3982
  let selectorText = rules[r].selectorText;
3652
3983
  if (!selectorText || rules[r].selectorText.length > 50) continue; // skip selectors too long
3653
- if (selectorText.split(',').some(selector => selector === '*')) continue; // skip * selector
3654
- if (selectorText.endsWith(':hover')) selectorText = selectorText.substring(0, selectorText.length - (':hover').length);
3984
+ if (selectorText.split(",").some(selector => selector === "*")) continue; // skip * selector
3985
+ if (selectorText.endsWith(":hover")) selectorText = selectorText.substring(0, selectorText.length - (":hover").length);
3655
3986
 
3656
3987
  if (el.matches(selectorText)) {
3657
3988
  if (cssRuleFilter !== null && !cssRuleFilter(el, rules[r].selectorText)) continue;
@@ -3660,7 +3991,7 @@ function instance($$self, $$props, $$invalidate) {
3660
3991
  }
3661
3992
  } catch(err) {
3662
3993
  if (!warningDisplayed.has(i)) {
3663
- console.warn('Style editor: Not able to access', sheets[i].ownerNode, 'sheet. Try CORS loading the sheet if you want to edit it.');
3994
+ console.warn("Style editor: Not able to access", sheets[i].ownerNode, "sheet. Try CORS loading the sheet if you want to edit it.");
3664
3995
  warningDisplayed.add(i);
3665
3996
  }
3666
3997
  }
@@ -3679,7 +4010,7 @@ function instance($$self, $$props, $$invalidate) {
3679
4010
  const elem = elemDef[0];
3680
4011
  const types = [];
3681
4012
 
3682
- if (elem.firstChild && (elem.firstChild.nodeType === 3 || elem.firstChild.tagName === 'tspan')) {
4013
+ if (elem.firstChild && (elem.firstChild.nodeType === 3 || elem.firstChild.tagName === "tspan")) {
3683
4014
  // Node.TEXT_NODE
3684
4015
  types.push(typeText);
3685
4016
  }
@@ -3691,7 +4022,7 @@ function instance($$self, $$props, $$invalidate) {
3691
4022
  types.push(typeStroke);
3692
4023
  const parentTag = elem.parentElement.tagName.toLowerCase();
3693
4024
 
3694
- if (parentTag === 'g' && elem.previousElementSibling && elem.previousElementSibling.tagName.toLowerCase() == elemTagName) {
4025
+ if (parentTag === "g" && elem.previousElementSibling && elem.previousElementSibling.tagName.toLowerCase() == elemTagName) {
3695
4026
  bringable = true;
3696
4027
  }
3697
4028
  } else {
@@ -3716,22 +4047,23 @@ function instance($$self, $$props, $$invalidate) {
3716
4047
  }
3717
4048
 
3718
4049
  async function open(el, x, y) {
4050
+ $$invalidate(9, clickedElement = el);
3719
4051
  udpatePageDimensions();
3720
- if (el.classList.contains('overlay-over')) return overlayClicked(); else if (self.contains(el)) return;
3721
- $$invalidate(5, selectedElemIndex = 0);
3722
- $$invalidate(6, selectedRuleIndex = 0);
3723
- $$invalidate(7, selectedTypeIndex = 0);
3724
- $$invalidate(15, bringableToFront = []);
3725
- $$invalidate(4, allTypes = []);
3726
- $$invalidate(3, allRules = []);
3727
- if (getElems) $$invalidate(2, targetsToSearch = getElems(el)); else $$invalidate(2, targetsToSearch = [[el, 'Clicked']]);
3728
- $$invalidate(4, allTypes = getEditableTypes(targetsToSearch));
3729
- $$invalidate(16, hasDisplayedCustom = false);
3730
- $$invalidate(3, allRules = getMatchedCSSRules(targetsToSearch));
4052
+ if (el.classList.contains("overlay-over")) return overlayClicked(); else if (self.contains(el)) return;
4053
+ $$invalidate(6, selectedElemIndex = 0);
4054
+ $$invalidate(7, selectedRuleIndex = 0);
4055
+ $$invalidate(8, selectedTypeIndex = 0);
4056
+ $$invalidate(17, bringableToFront = []);
4057
+ $$invalidate(5, allTypes = []);
4058
+ $$invalidate(4, allRules = []);
4059
+ if (getElems) $$invalidate(3, targetsToSearch = getElems(el)); else $$invalidate(3, targetsToSearch = [[el, "Clicked"]]);
4060
+ $$invalidate(5, allTypes = getEditableTypes(targetsToSearch));
4061
+ $$invalidate(18, hasDisplayedCustom = false);
4062
+ $$invalidate(4, allRules = getMatchedCSSRules(targetsToSearch));
3731
4063
 
3732
4064
  for (let def of Object.values(customProps)) {
3733
4065
  if (def.getter(el) !== null) {
3734
- $$invalidate(16, hasDisplayedCustom = true);
4066
+ $$invalidate(18, hasDisplayedCustom = true);
3735
4067
  break;
3736
4068
  }
3737
4069
  }
@@ -3750,13 +4082,13 @@ function instance($$self, $$props, $$invalidate) {
3750
4082
  }
3751
4083
 
3752
4084
  function close() {
3753
- $$invalidate(9, self.style.display = "none", self);
3754
- $$invalidate(10, helperElemWrapper.style.display = "none", helperElemWrapper);
3755
- $$invalidate(11, pathWithHoles = '');
4085
+ $$invalidate(11, self.style.display = "none", self);
4086
+ $$invalidate(12, helperElemWrapper.style.display = "none", helperElemWrapper);
4087
+ $$invalidate(13, pathWithHoles = "");
3756
4088
  }
3757
4089
 
3758
4090
  function isOpened() {
3759
- return self.style.display === 'block';
4091
+ return self.style.display === "block";
3760
4092
  }
3761
4093
 
3762
4094
  function overlayClicked() {
@@ -3764,8 +4096,8 @@ function instance($$self, $$props, $$invalidate) {
3764
4096
  }
3765
4097
 
3766
4098
  function show(x, y) {
3767
- $$invalidate(9, self.style.display = "block", self);
3768
- $$invalidate(9, self.style.opacity = 0, self);
4099
+ $$invalidate(11, self.style.display = "block", self);
4100
+ $$invalidate(11, self.style.opacity = 0, self);
3769
4101
  const popupDimension = self.getBoundingClientRect();
3770
4102
 
3771
4103
  x = x + popupDimension.width + 20 > pageDimensions.width
@@ -3777,10 +4109,10 @@ function instance($$self, $$props, $$invalidate) {
3777
4109
  : y + 20;
3778
4110
 
3779
4111
  y = Math.max(y, 0);
3780
- $$invalidate(9, self.style.left = x + "px", self);
3781
- $$invalidate(9, self.style.top = y + "px", self);
3782
- $$invalidate(10, helperElemWrapper.style.display = "block", helperElemWrapper);
3783
- $$invalidate(9, self.style.opacity = 1, self);
4112
+ $$invalidate(11, self.style.left = x + "px", self);
4113
+ $$invalidate(11, self.style.top = y + "px", self);
4114
+ $$invalidate(12, helperElemWrapper.style.display = "block", helperElemWrapper);
4115
+ $$invalidate(11, self.style.opacity = 1, self);
3784
4116
  updateHelpers();
3785
4117
  }
3786
4118
 
@@ -3789,19 +4121,19 @@ function instance($$self, $$props, $$invalidate) {
3789
4121
  if (!currentRule) return;
3790
4122
  let matching;
3791
4123
 
3792
- if (currentRule === 'inline') matching = [currentElement]; else {
3793
- const selector = currentRule.selectorText.replace(/(:hover)|:focus/g, '');
4124
+ if (currentRule === "inline") matching = [currentElement]; else {
4125
+ const selector = currentRule.selectorText.replace(/(:hover)|:focus/g, "");
3794
4126
  matching = Array.from(document.querySelectorAll(selector));
3795
4127
  }
3796
4128
 
3797
4129
  const boundingBoxes = matching.map(el => getBoundingBoxInfos(el, 10));
3798
- $$invalidate(11, pathWithHoles = computeContours(boundingBoxes, pageDimensions));
4130
+ $$invalidate(13, pathWithHoles = computeContours(boundingBoxes, pageDimensions));
3799
4131
  }
3800
4132
 
3801
4133
  function _updateProp(propName, val, suffix) {
3802
4134
  const finalValue = suffix ? val + suffix : val;
3803
4135
 
3804
- if (currentRule === 'inline') {
4136
+ if (currentRule === "inline") {
3805
4137
  if (allCurrentPropDefs[propName].setter) {
3806
4138
  allCurrentPropDefs[propName].setter(currentElement, val);
3807
4139
  } else {
@@ -3810,8 +4142,8 @@ function instance($$self, $$props, $$invalidate) {
3810
4142
  }
3811
4143
  } else currentRule.style.setProperty(propName, finalValue);
3812
4144
 
3813
- $$invalidate(14, allCurrentPropDefs[propName].value = val, allCurrentPropDefs);
3814
- $$invalidate(14, allCurrentPropDefs[propName].displayed = finalValue, allCurrentPropDefs);
4145
+ $$invalidate(16, allCurrentPropDefs[propName].value = val, allCurrentPropDefs);
4146
+ $$invalidate(16, allCurrentPropDefs[propName].displayed = finalValue, allCurrentPropDefs);
3815
4147
  onStyleChanged(currentElement, currentRule, propName, finalValue);
3816
4148
  updateHelpers();
3817
4149
  }
@@ -3825,7 +4157,7 @@ function instance($$self, $$props, $$invalidate) {
3825
4157
  const marginTop = parseInt(bodyStyle.marginTop);
3826
4158
  const marginBottom = parseInt(bodyStyle.marginBottom);
3827
4159
 
3828
- $$invalidate(12, pageDimensions = {
4160
+ $$invalidate(14, pageDimensions = {
3829
4161
  width: document.body.offsetWidth + marginLeft + marginRight,
3830
4162
  height: document.body.offsetHeight + marginTop + marginBottom
3831
4163
  });
@@ -3843,9 +4175,9 @@ function instance($$self, $$props, $$invalidate) {
3843
4175
  }
3844
4176
 
3845
4177
  function bringToFront() {
3846
- $$invalidate(15, bringableToFront[selectedElemIndex] = false, bringableToFront);
4178
+ $$invalidate(17, bringableToFront[selectedElemIndex] = false, bringableToFront);
3847
4179
  currentElement.parentNode.appendChild(currentElement);
3848
- onStyleChanged(currentElement, currentRule, 'bringtofront', null);
4180
+ onStyleChanged(currentElement, currentRule, "bringtofront", null);
3849
4181
  }
3850
4182
 
3851
4183
  function deleteElem() {
@@ -3854,7 +4186,7 @@ function instance($$self, $$props, $$invalidate) {
3854
4186
  }
3855
4187
 
3856
4188
  function deleteProp(propName) {
3857
- if (currentRule === 'inline') {
4189
+ if (currentRule === "inline") {
3858
4190
  currentElement.style.removeProperty(propName);
3859
4191
  } else {
3860
4192
  currentRule.style.removeProperty(propName);
@@ -3865,70 +4197,74 @@ function instance($$self, $$props, $$invalidate) {
3865
4197
  }
3866
4198
 
3867
4199
  function selectRule(ruleIndex) {
4200
+ console.log("selectrule", ruleIndex);
3868
4201
  const newRule = allRules[selectedElemIndex]?.[ruleIndex];
3869
4202
 
3870
- if (newRule !== 'inline' && selectedTypeIndex === allTypes[selectedElemIndex].length - 1) {
3871
- $$invalidate(7, selectedTypeIndex = 0);
4203
+ if (newRule !== "inline" && selectedTypeIndex === allTypes[selectedElemIndex].length - 1) {
4204
+ $$invalidate(8, selectedTypeIndex = 0);
3872
4205
  }
3873
4206
 
3874
- $$invalidate(6, selectedRuleIndex = ruleIndex);
4207
+ $$invalidate(7, selectedRuleIndex = ruleIndex);
3875
4208
  }
3876
4209
 
3877
4210
  function div0_binding($$value) {
3878
4211
  binding_callbacks[$$value ? 'unshift' : 'push'](() => {
3879
4212
  positionAnchor = $$value;
3880
- $$invalidate(8, positionAnchor);
4213
+ $$invalidate(10, positionAnchor);
3881
4214
  });
3882
4215
  }
3883
4216
 
3884
4217
  function svg_binding($$value) {
3885
4218
  binding_callbacks[$$value ? 'unshift' : 'push'](() => {
3886
4219
  helperElemWrapper = $$value;
3887
- $$invalidate(10, helperElemWrapper);
4220
+ $$invalidate(12, helperElemWrapper);
3888
4221
  });
3889
4222
  }
3890
4223
 
3891
4224
  const click_handler = elemIndex => {
3892
- $$invalidate(5, selectedElemIndex = elemIndex);
3893
- $$invalidate(6, selectedRuleIndex = 0);
4225
+ $$invalidate(6, selectedElemIndex = elemIndex);
4226
+ $$invalidate(7, selectedRuleIndex = 0);
3894
4227
  };
3895
4228
 
4229
+ const change_handler = e => selectRule(e.target.value);
4230
+
3896
4231
  const click_handler_1 = ruleIndex => {
3897
4232
  selectRule(ruleIndex);
3898
4233
  };
3899
4234
 
3900
4235
  const click_handler_2 = typeIndex => {
3901
- $$invalidate(7, selectedTypeIndex = typeIndex);
4236
+ $$invalidate(8, selectedTypeIndex = typeIndex);
3902
4237
  };
3903
4238
 
3904
- const change_handler = async (choices, each_value, choices_index, e) => {
3905
- $$invalidate(13, each_value[choices_index].selected = e.target.value, propsByType);
4239
+ const change_handler_1 = async (choices, each_value, choices_index, e) => {
4240
+ $$invalidate(15, each_value[choices_index].selected = e.target.value, propsByType);
3906
4241
  await tick();
3907
4242
  };
3908
4243
 
3909
4244
  const click_handler_3 = selectedName => deleteProp(selectedName);
3910
- const change_handler_1 = (selectedName, e) => updateProp(selectedName, e.target.value, allCurrentPropDefs[selectedName].suffix, e.target);
3911
- const change_handler_2 = (selectedName, e) => updateProp(selectedName, e.target.value);
4245
+ const change_handler_2 = (selectedName, e) => updateProp(selectedName, e.target.value, allCurrentPropDefs[selectedName].suffix, e.target);
4246
+ const change_handler_3 = (selectedName, e) => updateProp(selectedName, e.target.value);
3912
4247
  const func = (selectedName, color) => updateProp(selectedName, color);
3913
4248
 
3914
4249
  function div4_binding($$value) {
3915
4250
  binding_callbacks[$$value ? 'unshift' : 'push'](() => {
3916
4251
  self = $$value;
3917
- $$invalidate(9, self);
4252
+ $$invalidate(11, self);
3918
4253
  });
3919
4254
  }
3920
4255
 
3921
4256
  $$self.$$set = $$props => {
3922
- if ('getElems' in $$props) $$invalidate(25, getElems = $$props.getElems);
3923
- if ('listenOnClick' in $$props) $$invalidate(26, listenOnClick = $$props.listenOnClick);
3924
- if ('onStyleChanged' in $$props) $$invalidate(27, onStyleChanged = $$props.onStyleChanged);
3925
- if ('customProps' in $$props) $$invalidate(28, customProps = $$props.customProps);
4257
+ if ('getElems' in $$props) $$invalidate(28, getElems = $$props.getElems);
4258
+ if ('listenOnClick' in $$props) $$invalidate(29, listenOnClick = $$props.listenOnClick);
4259
+ if ('onStyleChanged' in $$props) $$invalidate(30, onStyleChanged = $$props.onStyleChanged);
4260
+ if ('customProps' in $$props) $$invalidate(31, customProps = $$props.customProps);
3926
4261
  if ('inlineDeletable' in $$props) $$invalidate(0, inlineDeletable = $$props.inlineDeletable);
3927
- if ('cssRuleFilter' in $$props) $$invalidate(29, cssRuleFilter = $$props.cssRuleFilter);
4262
+ if ('cssRuleFilter' in $$props) $$invalidate(32, cssRuleFilter = $$props.cssRuleFilter);
4263
+ if ('getCssRuleName' in $$props) $$invalidate(1, getCssRuleName = $$props.getCssRuleName);
3928
4264
  };
3929
4265
 
3930
4266
  $$self.$$.update = () => {
3931
- if ($$self.$$.dirty[1] & /*elementToListen*/ 2) {
4267
+ if ($$self.$$.dirty[1] & /*elementToListen*/ 16) {
3932
4268
  {
3933
4269
  if (elementToListen !== null) {
3934
4270
  init();
@@ -3936,23 +4272,23 @@ function instance($$self, $$props, $$invalidate) {
3936
4272
  }
3937
4273
  }
3938
4274
 
3939
- if ($$self.$$.dirty[0] & /*targetsToSearch, selectedElemIndex*/ 36) {
3940
- $$invalidate(18, currentElement = targetsToSearch[selectedElemIndex][0]);
4275
+ if ($$self.$$.dirty[0] & /*targetsToSearch, selectedElemIndex*/ 72) {
4276
+ $$invalidate(20, currentElement = targetsToSearch[selectedElemIndex][0]);
3941
4277
  }
3942
4278
 
3943
- if ($$self.$$.dirty[0] & /*allRules, selectedElemIndex, selectedRuleIndex*/ 104) {
3944
- $$invalidate(17, currentRule = allRules[selectedElemIndex]?.[selectedRuleIndex]);
4279
+ if ($$self.$$.dirty[0] & /*allRules, selectedElemIndex, selectedRuleIndex*/ 208) {
4280
+ $$invalidate(19, currentRule = allRules[selectedElemIndex]?.[selectedRuleIndex]);
3945
4281
  }
3946
4282
 
3947
- if ($$self.$$.dirty[0] & /*allTypes, selectedElemIndex, selectedTypeIndex*/ 176 | $$self.$$.dirty[1] & /*curType*/ 4) {
4283
+ if ($$self.$$.dirty[0] & /*allTypes, selectedElemIndex, selectedTypeIndex*/ 352 | $$self.$$.dirty[1] & /*curType*/ 32) {
3948
4284
  {
3949
4285
  if (allTypes[selectedElemIndex]?.[selectedTypeIndex] !== curType) {
3950
- $$invalidate(33, curType = allTypes[selectedElemIndex]?.[selectedTypeIndex]);
4286
+ $$invalidate(36, curType = allTypes[selectedElemIndex]?.[selectedTypeIndex]);
3951
4287
  }
3952
4288
  }
3953
4289
  }
3954
4290
 
3955
- if ($$self.$$.dirty[0] & /*selectedRuleIndex, selectedElemIndex*/ 96 | $$self.$$.dirty[1] & /*curType*/ 4) {
4291
+ if ($$self.$$.dirty[0] & /*selectedRuleIndex, selectedElemIndex*/ 192 | $$self.$$.dirty[1] & /*curType*/ 32) {
3956
4292
  {
3957
4293
  if (curType || selectedRuleIndex || selectedElemIndex) {
3958
4294
  initAndGroup();
@@ -3963,6 +4299,7 @@ function instance($$self, $$props, $$invalidate) {
3963
4299
 
3964
4300
  return [
3965
4301
  inlineDeletable,
4302
+ getCssRuleName,
3966
4303
  close,
3967
4304
  targetsToSearch,
3968
4305
  allRules,
@@ -3970,6 +4307,7 @@ function instance($$self, $$props, $$invalidate) {
3970
4307
  selectedElemIndex,
3971
4308
  selectedRuleIndex,
3972
4309
  selectedTypeIndex,
4310
+ clickedElement,
3973
4311
  positionAnchor,
3974
4312
  self,
3975
4313
  helperElemWrapper,
@@ -3981,6 +4319,7 @@ function instance($$self, $$props, $$invalidate) {
3981
4319
  hasDisplayedCustom,
3982
4320
  currentRule,
3983
4321
  currentElement,
4322
+ getRuleNamesTransformed,
3984
4323
  overlayClicked,
3985
4324
  updateProp,
3986
4325
  bringToFront,
@@ -3999,18 +4338,19 @@ function instance($$self, $$props, $$invalidate) {
3999
4338
  div0_binding,
4000
4339
  svg_binding,
4001
4340
  click_handler,
4341
+ change_handler,
4002
4342
  click_handler_1,
4003
4343
  click_handler_2,
4004
- change_handler,
4005
- click_handler_3,
4006
4344
  change_handler_1,
4345
+ click_handler_3,
4007
4346
  change_handler_2,
4347
+ change_handler_3,
4008
4348
  func,
4009
4349
  div4_binding
4010
4350
  ];
4011
4351
  }
4012
4352
 
4013
- class InlineStyleEditor$1 extends SvelteComponent {
4353
+ let InlineStyleEditor$1 = class InlineStyleEditor extends SvelteComponent {
4014
4354
  constructor(options) {
4015
4355
  super();
4016
4356
 
@@ -4021,15 +4361,16 @@ class InlineStyleEditor$1 extends SvelteComponent {
4021
4361
  create_fragment,
4022
4362
  safe_not_equal,
4023
4363
  {
4024
- getElems: 25,
4025
- listenOnClick: 26,
4026
- onStyleChanged: 27,
4027
- customProps: 28,
4364
+ getElems: 28,
4365
+ listenOnClick: 29,
4366
+ onStyleChanged: 30,
4367
+ customProps: 31,
4028
4368
  inlineDeletable: 0,
4029
- cssRuleFilter: 29,
4030
- open: 30,
4031
- close: 1,
4032
- isOpened: 31
4369
+ cssRuleFilter: 32,
4370
+ getCssRuleName: 1,
4371
+ open: 33,
4372
+ close: 2,
4373
+ isOpened: 34
4033
4374
  },
4034
4375
  null,
4035
4376
  [-1, -1, -1]
@@ -4037,24 +4378,23 @@ class InlineStyleEditor$1 extends SvelteComponent {
4037
4378
  }
4038
4379
 
4039
4380
  get open() {
4040
- return this.$$.ctx[30];
4381
+ return this.$$.ctx[33];
4041
4382
  }
4042
4383
 
4043
4384
  get close() {
4044
- return this.$$.ctx[1];
4385
+ return this.$$.ctx[2];
4045
4386
  }
4046
4387
 
4047
4388
  get isOpened() {
4048
- return this.$$.ctx[31];
4389
+ return this.$$.ctx[34];
4049
4390
  }
4050
- }
4051
-
4052
- var StyleEditor = InlineStyleEditor$1;
4391
+ };
4053
4392
 
4054
4393
  class InlineStyleEditor {
4055
4394
  constructor(options) {
4056
- return new StyleEditor({target: document.body, props: options});
4395
+ return new InlineStyleEditor$1({target: document.body, props: options});
4057
4396
  }
4058
4397
  }
4059
4398
 
4060
4399
  export { InlineStyleEditor as default };
4400
+ //# sourceMappingURL=inline-style-editor.mjs.map