webstudio 0.218.0 → 0.219.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/cli.js CHANGED
@@ -15,10 +15,10 @@ import { hideBin } from "yargs/helpers";
15
15
  import { join, dirname, normalize, basename, relative } from "node:path";
16
16
  import envPaths from "env-paths";
17
17
  import { z } from "zod";
18
- import { access, constants, writeFile, mkdir, readFile, rm, rename, readdir, cp } from "node:fs/promises";
19
- import { text, isCancel, cancel, log, spinner, confirm, select as select$1 } from "@clack/prompts";
18
+ import { access, constants, writeFile, mkdir, readFile, rm, readdir, cp, rename } from "node:fs/promises";
19
+ import { text, isCancel, cancel, log, spinner, confirm, select as select$2 } from "@clack/prompts";
20
20
  import pc from "picocolors";
21
- import { createWriteStream, existsSync } from "node:fs";
21
+ import { existsSync, createWriteStream } from "node:fs";
22
22
  import { pipeline } from "node:stream/promises";
23
23
  import { pathToFileURL, fileURLToPath } from "node:url";
24
24
  import pLimit from "p-limit";
@@ -105,6 +105,11 @@ const INTERNAL_TEMPLATES = [
105
105
  value: "cloudflare",
106
106
  label: "Cloudflare",
107
107
  expand: ["defaults", "cloudflare"]
108
+ },
109
+ {
110
+ value: "cloudflare-new",
111
+ label: "Cloudflare (new)",
112
+ expand: ["react-router", "react-router-cloudflare"]
108
113
  }
109
114
  ];
110
115
  const isFileExists = async (filePath) => {
@@ -1656,7 +1661,6 @@ var FormTextFieldIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" vie
1656
1661
  var FormIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.184 5.5h.731a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75H2.085a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h11.099ZM13.184 10.5h.732a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75H2.084a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h11.099Z"/><path fill="currentColor" d="M6.613 14.5h.222a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-5.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5H6.613Z"/></svg>`;
1657
1662
  var HeaderIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2ZM4 4h8"/></svg>`;
1658
1663
  var HeadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4 8h8M4 13.333V2.667M12 13.333V2.667"/></svg>`;
1659
- var HtmlElementIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.556 2H3.444C2.647 2 2 2.647 2 3.444v10.112C2 14.353 2.647 15 3.444 15h10.112c.797 0 1.444-.647 1.444-1.444V3.444C15 2.647 14.353 2 13.556 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.5 10 12 8.5 10.5 7M6 7 4.5 8.5 6 10m3.188-4.5-1.876 6"/></svg>`;
1660
1664
  var ImageIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 7.333a1.333 1.333 0 1 0 0-2.666 1.333 1.333 0 0 0 0 2.666ZM14 10l-2.057-2.057a1.333 1.333 0 0 0-1.886 0L4 14"/></svg>`;
1661
1665
  var ItemIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2 6h.007M5.333 10H14M5.333 6H14"/></svg>`;
1662
1666
  var LabelIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6.476 11.074V4.926m0 6.148h3.77v-.615m-3.77.615h-.722m.722-6.148h.632m-.632 0h-.722"/></svg>`;
@@ -1696,6 +1700,11 @@ var WindowInfoIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBo
1696
1700
  var WindowTitleIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 4H3.333C2.597 4 2 4.497 2 5.111v7.778C2 13.503 2.597 14 3.333 14h9.334c.736 0 1.333-.498 1.333-1.111V5.11C14 4.497 13.403 4 12.667 4ZM4 2h8"/></svg>`;
1697
1701
  var XmlIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.163 9.02v-4L8.83 1.686h-5.5A1.333 1.333 0 0 0 1.997 3.02v6"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.164 2.186v1.667a1.333 1.333 0 0 0 1.333 1.333h2.667M1.997 11.314l3 3M4.997 11.314l-3 3M6.997 14.314v-3l1.5 1.523 1.5-1.523v3M12.163 11.314v3h1.84"/></svg>`;
1698
1702
  var YoutubeIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path d="M.892 11.528a18.047 18.047 0 0 1 0-7.482A1.496 1.496 0 0 1 1.94 3a37.082 37.082 0 0 1 12.12 0 1.497 1.497 0 0 1 1.048 1.047 18.046 18.046 0 0 1 0 7.482 1.497 1.497 0 0 1-1.048 1.048 37.077 37.077 0 0 1-12.12 0 1.497 1.497 0 0 1-1.048-1.048Z"/><path d="m6.5 10.3 4-2.4-4-2.4v4.8Z"/></svg>`;
1703
+ var __defProp2 = Object.defineProperty;
1704
+ var __export = (target, all) => {
1705
+ for (var name2 in all)
1706
+ __defProp2(target, name2, { get: all[name2], enumerable: true });
1707
+ };
1699
1708
  var AssetId = z.string();
1700
1709
  var baseAsset = {
1701
1710
  id: AssetId,
@@ -2542,6 +2551,105 @@ z.object({
2542
2551
  states: z.optional(z.array(ComponentState)),
2543
2552
  order: z.number().optional()
2544
2553
  });
2554
+ var normalize_css_exports = {};
2555
+ __export(normalize_css_exports, {
2556
+ a: () => a$b,
2557
+ address: () => address$1,
2558
+ article: () => article$1,
2559
+ aside: () => aside$1,
2560
+ b: () => b$8,
2561
+ body: () => body$1,
2562
+ button: () => button$1,
2563
+ checkbox: () => checkbox$1,
2564
+ code: () => code$1,
2565
+ div: () => div$1,
2566
+ figure: () => figure$1,
2567
+ footer: () => footer$1,
2568
+ form: () => form$1,
2569
+ h1: () => h1$1,
2570
+ h2: () => h2$1,
2571
+ h3: () => h3$1,
2572
+ h4: () => h4$1,
2573
+ h5: () => h5$1,
2574
+ h6: () => h6$1,
2575
+ header: () => header$1,
2576
+ hr: () => hr$1,
2577
+ html: () => html,
2578
+ i: () => i$8,
2579
+ img: () => img$1,
2580
+ input: () => input$1,
2581
+ kbd: () => kbd,
2582
+ label: () => label$1,
2583
+ legend: () => legend,
2584
+ li: () => li$1,
2585
+ main: () => main$2,
2586
+ nav: () => nav$1,
2587
+ ol: () => ol$1,
2588
+ optgroup: () => optgroup,
2589
+ p: () => p$b,
2590
+ pre: () => pre,
2591
+ progress: () => progress,
2592
+ radio: () => radio$1,
2593
+ samp: () => samp,
2594
+ section: () => section$1,
2595
+ select: () => select$1,
2596
+ small: () => small,
2597
+ span: () => span$1,
2598
+ strong: () => strong,
2599
+ sub: () => sub$1,
2600
+ summary: () => summary,
2601
+ sup: () => sup$1,
2602
+ table: () => table,
2603
+ textarea: () => textarea$1,
2604
+ time: () => time$1,
2605
+ ul: () => ul$1
2606
+ });
2607
+ var div$1 = [
2608
+ { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
2609
+ {
2610
+ property: "border-top-width",
2611
+ value: { type: "unit", unit: "px", value: 1 }
2612
+ },
2613
+ {
2614
+ property: "border-right-width",
2615
+ value: { type: "unit", unit: "px", value: 1 }
2616
+ },
2617
+ {
2618
+ property: "border-bottom-width",
2619
+ value: { type: "unit", unit: "px", value: 1 }
2620
+ },
2621
+ {
2622
+ property: "border-left-width",
2623
+ value: { type: "unit", unit: "px", value: 1 }
2624
+ },
2625
+ { property: "outline-width", value: { type: "unit", unit: "px", value: 1 } }
2626
+ ];
2627
+ var address$1 = div$1;
2628
+ var article$1 = div$1;
2629
+ var aside$1 = div$1;
2630
+ var figure$1 = div$1;
2631
+ var footer$1 = div$1;
2632
+ var header$1 = div$1;
2633
+ var main$2 = div$1;
2634
+ var nav$1 = div$1;
2635
+ var section$1 = div$1;
2636
+ var form$1 = div$1;
2637
+ var label$1 = div$1;
2638
+ var time$1 = div$1;
2639
+ var h1$1 = div$1;
2640
+ var h2$1 = div$1;
2641
+ var h3$1 = div$1;
2642
+ var h4$1 = div$1;
2643
+ var h5$1 = div$1;
2644
+ var h6$1 = div$1;
2645
+ var i$8 = div$1;
2646
+ var img$1 = div$1;
2647
+ var a$b = div$1;
2648
+ var li$1 = div$1;
2649
+ var ul$1 = div$1;
2650
+ var ol$1 = div$1;
2651
+ var p$b = div$1;
2652
+ var span$1 = div$1;
2545
2653
  var html = [
2546
2654
  { property: "display", value: { type: "keyword", value: "grid" } },
2547
2655
  { property: "min-height", value: { type: "unit", unit: "%", value: 100 } },
@@ -2559,6 +2667,491 @@ var html = [
2559
2667
  value: { type: "keyword", value: "preserve" }
2560
2668
  }
2561
2669
  ];
2670
+ var body$1 = [
2671
+ { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
2672
+ {
2673
+ property: "margin-right",
2674
+ value: { type: "unit", unit: "number", value: 0 }
2675
+ },
2676
+ {
2677
+ property: "margin-bottom",
2678
+ value: { type: "unit", unit: "number", value: 0 }
2679
+ },
2680
+ {
2681
+ property: "margin-left",
2682
+ value: { type: "unit", unit: "number", value: 0 }
2683
+ },
2684
+ { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
2685
+ {
2686
+ property: "border-top-width",
2687
+ value: { type: "unit", unit: "px", value: 1 }
2688
+ },
2689
+ {
2690
+ property: "border-right-width",
2691
+ value: { type: "unit", unit: "px", value: 1 }
2692
+ },
2693
+ {
2694
+ property: "border-bottom-width",
2695
+ value: { type: "unit", unit: "px", value: 1 }
2696
+ },
2697
+ {
2698
+ property: "border-left-width",
2699
+ value: { type: "unit", unit: "px", value: 1 }
2700
+ }
2701
+ ];
2702
+ var hr$1 = [
2703
+ { property: "height", value: { type: "unit", unit: "number", value: 0 } },
2704
+ { property: "color", value: { type: "keyword", value: "inherit" } },
2705
+ { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
2706
+ {
2707
+ property: "border-top-width",
2708
+ value: { type: "unit", unit: "px", value: 1 }
2709
+ },
2710
+ {
2711
+ property: "border-right-width",
2712
+ value: { type: "unit", unit: "px", value: 1 }
2713
+ },
2714
+ {
2715
+ property: "border-bottom-width",
2716
+ value: { type: "unit", unit: "px", value: 1 }
2717
+ },
2718
+ {
2719
+ property: "border-left-width",
2720
+ value: { type: "unit", unit: "px", value: 1 }
2721
+ }
2722
+ ];
2723
+ var b$8 = [
2724
+ {
2725
+ property: "font-weight",
2726
+ value: { type: "unit", unit: "number", value: 700 }
2727
+ },
2728
+ { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
2729
+ {
2730
+ property: "border-top-width",
2731
+ value: { type: "unit", unit: "px", value: 1 }
2732
+ },
2733
+ {
2734
+ property: "border-right-width",
2735
+ value: { type: "unit", unit: "px", value: 1 }
2736
+ },
2737
+ {
2738
+ property: "border-bottom-width",
2739
+ value: { type: "unit", unit: "px", value: 1 }
2740
+ },
2741
+ {
2742
+ property: "border-left-width",
2743
+ value: { type: "unit", unit: "px", value: 1 }
2744
+ }
2745
+ ];
2746
+ var strong = b$8;
2747
+ var code$1 = [
2748
+ {
2749
+ property: "font-family",
2750
+ value: {
2751
+ type: "fontFamily",
2752
+ value: [
2753
+ "ui-monospace",
2754
+ "SFMono-Regular",
2755
+ "Consolas",
2756
+ "Liberation Mono",
2757
+ "Menlo",
2758
+ "monospace"
2759
+ ]
2760
+ }
2761
+ },
2762
+ { property: "font-size", value: { type: "unit", unit: "em", value: 1 } },
2763
+ { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
2764
+ {
2765
+ property: "border-top-width",
2766
+ value: { type: "unit", unit: "px", value: 1 }
2767
+ },
2768
+ {
2769
+ property: "border-right-width",
2770
+ value: { type: "unit", unit: "px", value: 1 }
2771
+ },
2772
+ {
2773
+ property: "border-bottom-width",
2774
+ value: { type: "unit", unit: "px", value: 1 }
2775
+ },
2776
+ {
2777
+ property: "border-left-width",
2778
+ value: { type: "unit", unit: "px", value: 1 }
2779
+ }
2780
+ ];
2781
+ var kbd = code$1;
2782
+ var samp = code$1;
2783
+ var pre = code$1;
2784
+ var small = [
2785
+ { property: "font-size", value: { type: "unit", unit: "%", value: 80 } },
2786
+ { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
2787
+ {
2788
+ property: "border-top-width",
2789
+ value: { type: "unit", unit: "px", value: 1 }
2790
+ },
2791
+ {
2792
+ property: "border-right-width",
2793
+ value: { type: "unit", unit: "px", value: 1 }
2794
+ },
2795
+ {
2796
+ property: "border-bottom-width",
2797
+ value: { type: "unit", unit: "px", value: 1 }
2798
+ },
2799
+ {
2800
+ property: "border-left-width",
2801
+ value: { type: "unit", unit: "px", value: 1 }
2802
+ }
2803
+ ];
2804
+ var sub$1 = [
2805
+ { property: "font-size", value: { type: "unit", unit: "%", value: 75 } },
2806
+ {
2807
+ property: "line-height",
2808
+ value: { type: "unit", unit: "number", value: 0 }
2809
+ },
2810
+ { property: "position", value: { type: "keyword", value: "relative" } },
2811
+ { property: "vertical-align", value: { type: "keyword", value: "baseline" } },
2812
+ { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
2813
+ {
2814
+ property: "border-top-width",
2815
+ value: { type: "unit", unit: "px", value: 1 }
2816
+ },
2817
+ {
2818
+ property: "border-right-width",
2819
+ value: { type: "unit", unit: "px", value: 1 }
2820
+ },
2821
+ {
2822
+ property: "border-bottom-width",
2823
+ value: { type: "unit", unit: "px", value: 1 }
2824
+ },
2825
+ {
2826
+ property: "border-left-width",
2827
+ value: { type: "unit", unit: "px", value: 1 }
2828
+ },
2829
+ { property: "bottom", value: { type: "unit", unit: "em", value: -0.25 } }
2830
+ ];
2831
+ var sup$1 = [
2832
+ { property: "font-size", value: { type: "unit", unit: "%", value: 75 } },
2833
+ {
2834
+ property: "line-height",
2835
+ value: { type: "unit", unit: "number", value: 0 }
2836
+ },
2837
+ { property: "position", value: { type: "keyword", value: "relative" } },
2838
+ { property: "vertical-align", value: { type: "keyword", value: "baseline" } },
2839
+ { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
2840
+ {
2841
+ property: "border-top-width",
2842
+ value: { type: "unit", unit: "px", value: 1 }
2843
+ },
2844
+ {
2845
+ property: "border-right-width",
2846
+ value: { type: "unit", unit: "px", value: 1 }
2847
+ },
2848
+ {
2849
+ property: "border-bottom-width",
2850
+ value: { type: "unit", unit: "px", value: 1 }
2851
+ },
2852
+ {
2853
+ property: "border-left-width",
2854
+ value: { type: "unit", unit: "px", value: 1 }
2855
+ },
2856
+ { property: "top", value: { type: "unit", unit: "em", value: -0.5 } }
2857
+ ];
2858
+ var table = [
2859
+ {
2860
+ property: "text-indent",
2861
+ value: { type: "unit", unit: "number", value: 0 }
2862
+ },
2863
+ {
2864
+ property: "border-top-width",
2865
+ value: { type: "unit", unit: "px", value: 1 }
2866
+ },
2867
+ {
2868
+ property: "border-right-width",
2869
+ value: { type: "unit", unit: "px", value: 1 }
2870
+ },
2871
+ {
2872
+ property: "border-bottom-width",
2873
+ value: { type: "unit", unit: "px", value: 1 }
2874
+ },
2875
+ {
2876
+ property: "border-left-width",
2877
+ value: { type: "unit", unit: "px", value: 1 }
2878
+ },
2879
+ {
2880
+ property: "border-top-color",
2881
+ value: { type: "keyword", value: "inherit" }
2882
+ },
2883
+ {
2884
+ property: "border-right-color",
2885
+ value: { type: "keyword", value: "inherit" }
2886
+ },
2887
+ {
2888
+ property: "border-bottom-color",
2889
+ value: { type: "keyword", value: "inherit" }
2890
+ },
2891
+ {
2892
+ property: "border-left-color",
2893
+ value: { type: "keyword", value: "inherit" }
2894
+ },
2895
+ { property: "box-sizing", value: { type: "keyword", value: "border-box" } }
2896
+ ];
2897
+ var input$1 = [
2898
+ { property: "font-family", value: { type: "keyword", value: "inherit" } },
2899
+ { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
2900
+ {
2901
+ property: "line-height",
2902
+ value: { type: "unit", unit: "number", value: 1.15 }
2903
+ },
2904
+ { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
2905
+ {
2906
+ property: "margin-right",
2907
+ value: { type: "unit", unit: "number", value: 0 }
2908
+ },
2909
+ {
2910
+ property: "margin-bottom",
2911
+ value: { type: "unit", unit: "number", value: 0 }
2912
+ },
2913
+ {
2914
+ property: "margin-left",
2915
+ value: { type: "unit", unit: "number", value: 0 }
2916
+ },
2917
+ { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
2918
+ {
2919
+ property: "border-top-width",
2920
+ value: { type: "unit", unit: "px", value: 1 }
2921
+ },
2922
+ {
2923
+ property: "border-right-width",
2924
+ value: { type: "unit", unit: "px", value: 1 }
2925
+ },
2926
+ {
2927
+ property: "border-bottom-width",
2928
+ value: { type: "unit", unit: "px", value: 1 }
2929
+ },
2930
+ {
2931
+ property: "border-left-width",
2932
+ value: { type: "unit", unit: "px", value: 1 }
2933
+ },
2934
+ { property: "border-top-style", value: { type: "keyword", value: "solid" } },
2935
+ {
2936
+ property: "border-right-style",
2937
+ value: { type: "keyword", value: "solid" }
2938
+ },
2939
+ {
2940
+ property: "border-bottom-style",
2941
+ value: { type: "keyword", value: "solid" }
2942
+ },
2943
+ { property: "border-left-style", value: { type: "keyword", value: "solid" } }
2944
+ ];
2945
+ var textarea$1 = input$1;
2946
+ var optgroup = [
2947
+ { property: "font-family", value: { type: "keyword", value: "inherit" } },
2948
+ { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
2949
+ {
2950
+ property: "line-height",
2951
+ value: { type: "unit", unit: "number", value: 1.15 }
2952
+ },
2953
+ { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
2954
+ {
2955
+ property: "margin-right",
2956
+ value: { type: "unit", unit: "number", value: 0 }
2957
+ },
2958
+ {
2959
+ property: "margin-bottom",
2960
+ value: { type: "unit", unit: "number", value: 0 }
2961
+ },
2962
+ {
2963
+ property: "margin-left",
2964
+ value: { type: "unit", unit: "number", value: 0 }
2965
+ },
2966
+ { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
2967
+ {
2968
+ property: "border-top-width",
2969
+ value: { type: "unit", unit: "px", value: 1 }
2970
+ },
2971
+ {
2972
+ property: "border-right-width",
2973
+ value: { type: "unit", unit: "px", value: 1 }
2974
+ },
2975
+ {
2976
+ property: "border-bottom-width",
2977
+ value: { type: "unit", unit: "px", value: 1 }
2978
+ },
2979
+ {
2980
+ property: "border-left-width",
2981
+ value: { type: "unit", unit: "px", value: 1 }
2982
+ }
2983
+ ];
2984
+ var radio$1 = [
2985
+ { property: "font-family", value: { type: "keyword", value: "inherit" } },
2986
+ { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
2987
+ {
2988
+ property: "line-height",
2989
+ value: { type: "unit", unit: "number", value: 1.15 }
2990
+ },
2991
+ { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
2992
+ {
2993
+ property: "margin-right",
2994
+ value: { type: "unit", unit: "number", value: 0 }
2995
+ },
2996
+ {
2997
+ property: "margin-bottom",
2998
+ value: { type: "unit", unit: "number", value: 0 }
2999
+ },
3000
+ {
3001
+ property: "margin-left",
3002
+ value: { type: "unit", unit: "number", value: 0 }
3003
+ },
3004
+ { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
3005
+ {
3006
+ property: "border-top-width",
3007
+ value: { type: "unit", unit: "px", value: 1 }
3008
+ },
3009
+ {
3010
+ property: "border-right-width",
3011
+ value: { type: "unit", unit: "px", value: 1 }
3012
+ },
3013
+ {
3014
+ property: "border-bottom-width",
3015
+ value: { type: "unit", unit: "px", value: 1 }
3016
+ },
3017
+ {
3018
+ property: "border-left-width",
3019
+ value: { type: "unit", unit: "px", value: 1 }
3020
+ },
3021
+ { property: "border-top-style", value: { type: "keyword", value: "none" } },
3022
+ { property: "border-right-style", value: { type: "keyword", value: "none" } },
3023
+ {
3024
+ property: "border-bottom-style",
3025
+ value: { type: "keyword", value: "none" }
3026
+ },
3027
+ { property: "border-left-style", value: { type: "keyword", value: "none" } }
3028
+ ];
3029
+ var checkbox$1 = radio$1;
3030
+ var button$1 = [
3031
+ { property: "font-family", value: { type: "keyword", value: "inherit" } },
3032
+ { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
3033
+ {
3034
+ property: "line-height",
3035
+ value: { type: "unit", unit: "number", value: 1.15 }
3036
+ },
3037
+ { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
3038
+ {
3039
+ property: "margin-right",
3040
+ value: { type: "unit", unit: "number", value: 0 }
3041
+ },
3042
+ {
3043
+ property: "margin-bottom",
3044
+ value: { type: "unit", unit: "number", value: 0 }
3045
+ },
3046
+ {
3047
+ property: "margin-left",
3048
+ value: { type: "unit", unit: "number", value: 0 }
3049
+ },
3050
+ { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
3051
+ {
3052
+ property: "border-top-width",
3053
+ value: { type: "unit", unit: "px", value: 1 }
3054
+ },
3055
+ {
3056
+ property: "border-right-width",
3057
+ value: { type: "unit", unit: "px", value: 1 }
3058
+ },
3059
+ {
3060
+ property: "border-bottom-width",
3061
+ value: { type: "unit", unit: "px", value: 1 }
3062
+ },
3063
+ {
3064
+ property: "border-left-width",
3065
+ value: { type: "unit", unit: "px", value: 1 }
3066
+ },
3067
+ { property: "border-top-style", value: { type: "keyword", value: "solid" } },
3068
+ {
3069
+ property: "border-right-style",
3070
+ value: { type: "keyword", value: "solid" }
3071
+ },
3072
+ {
3073
+ property: "border-bottom-style",
3074
+ value: { type: "keyword", value: "solid" }
3075
+ },
3076
+ { property: "border-left-style", value: { type: "keyword", value: "solid" } },
3077
+ { property: "text-transform", value: { type: "keyword", value: "none" } }
3078
+ ];
3079
+ var select$1 = button$1;
3080
+ var legend = [
3081
+ {
3082
+ property: "padding-top",
3083
+ value: { type: "unit", unit: "number", value: 0 }
3084
+ },
3085
+ {
3086
+ property: "padding-right",
3087
+ value: { type: "unit", unit: "number", value: 0 }
3088
+ },
3089
+ {
3090
+ property: "padding-bottom",
3091
+ value: { type: "unit", unit: "number", value: 0 }
3092
+ },
3093
+ {
3094
+ property: "padding-left",
3095
+ value: { type: "unit", unit: "number", value: 0 }
3096
+ },
3097
+ { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
3098
+ {
3099
+ property: "border-top-width",
3100
+ value: { type: "unit", unit: "px", value: 1 }
3101
+ },
3102
+ {
3103
+ property: "border-right-width",
3104
+ value: { type: "unit", unit: "px", value: 1 }
3105
+ },
3106
+ {
3107
+ property: "border-bottom-width",
3108
+ value: { type: "unit", unit: "px", value: 1 }
3109
+ },
3110
+ {
3111
+ property: "border-left-width",
3112
+ value: { type: "unit", unit: "px", value: 1 }
3113
+ }
3114
+ ];
3115
+ var progress = [
3116
+ { property: "vertical-align", value: { type: "keyword", value: "baseline" } },
3117
+ { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
3118
+ {
3119
+ property: "border-top-width",
3120
+ value: { type: "unit", unit: "px", value: 1 }
3121
+ },
3122
+ {
3123
+ property: "border-right-width",
3124
+ value: { type: "unit", unit: "px", value: 1 }
3125
+ },
3126
+ {
3127
+ property: "border-bottom-width",
3128
+ value: { type: "unit", unit: "px", value: 1 }
3129
+ },
3130
+ {
3131
+ property: "border-left-width",
3132
+ value: { type: "unit", unit: "px", value: 1 }
3133
+ }
3134
+ ];
3135
+ var summary = [
3136
+ { property: "display", value: { type: "keyword", value: "list-item" } },
3137
+ { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
3138
+ {
3139
+ property: "border-top-width",
3140
+ value: { type: "unit", unit: "px", value: 1 }
3141
+ },
3142
+ {
3143
+ property: "border-right-width",
3144
+ value: { type: "unit", unit: "px", value: 1 }
3145
+ },
3146
+ {
3147
+ property: "border-bottom-width",
3148
+ value: { type: "unit", unit: "px", value: 1 }
3149
+ },
3150
+ {
3151
+ property: "border-left-width",
3152
+ value: { type: "unit", unit: "px", value: 1 }
3153
+ }
3154
+ ];
2562
3155
  var rootComponent = "ws:root";
2563
3156
  var rootMeta = {
2564
3157
  label: "Global Root",
@@ -2570,7 +3163,9 @@ var rootMeta = {
2570
3163
  var elementComponent = "ws:element";
2571
3164
  var elementMeta = {
2572
3165
  label: "Element",
2573
- icon: HtmlElementIcon
3166
+ icon: BoxIcon,
3167
+ // convert [object Module] to [object Object] to enable structured cloning
3168
+ presetStyle: { ...normalize_css_exports }
2574
3169
  };
2575
3170
  var collectionComponent = "ws:collection";
2576
3171
  var collectionMeta = {
@@ -3489,16 +4084,6 @@ var normalizeProps = ({
3489
4084
  type: "string",
3490
4085
  value: `${assetBaseUrl}${asset.name}`
3491
4086
  });
3492
- if (source === "canvas") {
3493
- newProps.push({
3494
- id: `${prop.instanceId}-${asset.id}-assetId`,
3495
- name: "$webstudio$canvasOnly$assetId",
3496
- required: false,
3497
- instanceId: prop.instanceId,
3498
- type: "string",
3499
- value: asset.id
3500
- });
3501
- }
3502
4087
  continue;
3503
4088
  }
3504
4089
  if (prop.type === "page") {
@@ -3560,501 +4145,55 @@ var isAttributeNameSafe = (attributeName) => {
3560
4145
  return false;
3561
4146
  };
3562
4147
  var standardAttributesToReactProps = {
3563
- // HTML
3564
- accept: "accept",
3565
- acceptcharset: "acceptCharset",
3566
4148
  "accept-charset": "acceptCharset",
3567
4149
  accesskey: "accessKey",
3568
- action: "action",
3569
4150
  allowfullscreen: "allowFullScreen",
3570
- alt: "alt",
3571
- as: "as",
3572
- async: "async",
3573
4151
  autocapitalize: "autoCapitalize",
3574
4152
  autocomplete: "autoComplete",
3575
4153
  autocorrect: "autoCorrect",
3576
4154
  autofocus: "autoFocus",
3577
4155
  autoplay: "autoPlay",
3578
- autosave: "autoSave",
3579
- capture: "capture",
3580
- cellpadding: "cellPadding",
3581
- cellspacing: "cellSpacing",
3582
- challenge: "challenge",
3583
4156
  charset: "charSet",
3584
- checked: "checked",
3585
- children: "children",
3586
- cite: "cite",
3587
4157
  class: "className",
3588
- classid: "classID",
3589
- classname: "className",
3590
- cols: "cols",
3591
4158
  colspan: "colSpan",
3592
- content: "content",
3593
4159
  contenteditable: "contentEditable",
3594
- contextmenu: "contextMenu",
3595
- controls: "controls",
3596
- controlslist: "controlsList",
3597
- coords: "coords",
3598
4160
  crossorigin: "crossOrigin",
3599
- dangerouslysetinnerhtml: "dangerouslySetInnerHTML",
3600
- data: "data",
3601
4161
  datetime: "dateTime",
3602
- default: "default",
3603
- defaultchecked: "defaultChecked",
3604
- defaultvalue: "defaultValue",
3605
- defer: "defer",
3606
- dir: "dir",
3607
- disabled: "disabled",
3608
- disablepictureinpicture: "disablePictureInPicture",
3609
- disableremoteplayback: "disableRemotePlayback",
3610
- download: "download",
3611
- draggable: "draggable",
3612
4162
  enctype: "encType",
3613
4163
  enterkeyhint: "enterKeyHint",
3614
4164
  fetchpriority: "fetchPriority",
3615
4165
  for: "htmlFor",
3616
- form: "form",
3617
4166
  formmethod: "formMethod",
3618
4167
  formaction: "formAction",
3619
4168
  formenctype: "formEncType",
3620
4169
  formnovalidate: "formNoValidate",
3621
4170
  formtarget: "formTarget",
3622
- frameborder: "frameBorder",
3623
- headers: "headers",
3624
- height: "height",
3625
- hidden: "hidden",
3626
- high: "high",
3627
- href: "href",
3628
4171
  hreflang: "hrefLang",
3629
- htmlfor: "htmlFor",
3630
- httpequiv: "httpEquiv",
3631
4172
  "http-equiv": "httpEquiv",
3632
- icon: "icon",
3633
- id: "id",
3634
4173
  imagesizes: "imageSizes",
3635
4174
  imagesrcset: "imageSrcSet",
3636
- inert: "inert",
3637
- innerhtml: "innerHTML",
3638
4175
  inputmode: "inputMode",
3639
- integrity: "integrity",
3640
- is: "is",
3641
4176
  itemid: "itemID",
3642
4177
  itemprop: "itemProp",
3643
4178
  itemref: "itemRef",
3644
4179
  itemscope: "itemScope",
3645
4180
  itemtype: "itemType",
3646
- keyparams: "keyParams",
3647
- keytype: "keyType",
3648
- kind: "kind",
3649
- label: "label",
3650
- lang: "lang",
3651
- list: "list",
3652
- loop: "loop",
3653
- low: "low",
3654
- manifest: "manifest",
3655
- marginwidth: "marginWidth",
3656
- marginheight: "marginHeight",
3657
- max: "max",
3658
4181
  maxlength: "maxLength",
3659
- media: "media",
3660
- mediagroup: "mediaGroup",
3661
- method: "method",
3662
- min: "min",
3663
4182
  minlength: "minLength",
3664
- multiple: "multiple",
3665
- muted: "muted",
3666
- name: "name",
3667
4183
  nomodule: "noModule",
3668
- nonce: "nonce",
3669
4184
  novalidate: "noValidate",
3670
- open: "open",
3671
- optimum: "optimum",
3672
- pattern: "pattern",
3673
- placeholder: "placeholder",
3674
4185
  playsinline: "playsInline",
3675
- poster: "poster",
3676
- preload: "preload",
3677
- profile: "profile",
3678
- radiogroup: "radioGroup",
3679
4186
  readonly: "readOnly",
3680
4187
  referrerpolicy: "referrerPolicy",
3681
- rel: "rel",
3682
- required: "required",
3683
- reversed: "reversed",
3684
- role: "role",
3685
- rows: "rows",
3686
4188
  rowspan: "rowSpan",
3687
- sandbox: "sandbox",
3688
- scope: "scope",
3689
- scoped: "scoped",
3690
- scrolling: "scrolling",
3691
- seamless: "seamless",
3692
- selected: "selected",
3693
- shape: "shape",
3694
- size: "size",
3695
- sizes: "sizes",
3696
- span: "span",
3697
4189
  spellcheck: "spellCheck",
3698
- src: "src",
3699
4190
  srcdoc: "srcDoc",
3700
4191
  srclang: "srcLang",
3701
4192
  srcset: "srcSet",
3702
- start: "start",
3703
- step: "step",
3704
- style: "style",
3705
- summary: "summary",
3706
4193
  tabindex: "tabIndex",
3707
- target: "target",
3708
- title: "title",
3709
- type: "type",
3710
4194
  usemap: "useMap",
3711
- value: "value",
3712
- width: "width",
3713
- wmode: "wmode",
3714
- wrap: "wrap",
3715
- // SVG
3716
- about: "about",
3717
- accentheight: "accentHeight",
3718
- "accent-height": "accentHeight",
3719
- accumulate: "accumulate",
3720
- additive: "additive",
3721
- alignmentbaseline: "alignmentBaseline",
3722
- "alignment-baseline": "alignmentBaseline",
3723
- allowreorder: "allowReorder",
3724
- alphabetic: "alphabetic",
3725
- amplitude: "amplitude",
3726
- arabicform: "arabicForm",
3727
- "arabic-form": "arabicForm",
3728
- ascent: "ascent",
3729
- attributename: "attributeName",
3730
- attributetype: "attributeType",
3731
- autoreverse: "autoReverse",
3732
- azimuth: "azimuth",
3733
- basefrequency: "baseFrequency",
3734
- baselineshift: "baselineShift",
3735
- "baseline-shift": "baselineShift",
3736
- baseprofile: "baseProfile",
3737
- bbox: "bbox",
3738
- begin: "begin",
3739
- bias: "bias",
3740
- by: "by",
3741
- calcmode: "calcMode",
3742
- capheight: "capHeight",
3743
- "cap-height": "capHeight",
3744
- clip: "clip",
3745
- clippath: "clipPath",
3746
- "clip-path": "clipPath",
3747
- clippathunits: "clipPathUnits",
3748
- cliprule: "clipRule",
3749
- "clip-rule": "clipRule",
3750
- color: "color",
3751
- colorinterpolation: "colorInterpolation",
3752
- "color-interpolation": "colorInterpolation",
3753
- colorinterpolationfilters: "colorInterpolationFilters",
3754
- "color-interpolation-filters": "colorInterpolationFilters",
3755
- colorprofile: "colorProfile",
3756
- "color-profile": "colorProfile",
3757
- colorrendering: "colorRendering",
3758
- "color-rendering": "colorRendering",
3759
- contentscripttype: "contentScriptType",
3760
- contentstyletype: "contentStyleType",
3761
- cursor: "cursor",
3762
- cx: "cx",
3763
- cy: "cy",
3764
- d: "d",
3765
- datatype: "datatype",
3766
- decelerate: "decelerate",
3767
- descent: "descent",
3768
- diffuseconstant: "diffuseConstant",
3769
- direction: "direction",
3770
- display: "display",
3771
- divisor: "divisor",
3772
- dominantbaseline: "dominantBaseline",
3773
- "dominant-baseline": "dominantBaseline",
3774
- dur: "dur",
3775
- dx: "dx",
3776
- dy: "dy",
3777
- edgemode: "edgeMode",
3778
- elevation: "elevation",
3779
- enablebackground: "enableBackground",
3780
- "enable-background": "enableBackground",
3781
- end: "end",
3782
- exponent: "exponent",
3783
- externalresourcesrequired: "externalResourcesRequired",
3784
- fill: "fill",
3785
- fillopacity: "fillOpacity",
3786
- "fill-opacity": "fillOpacity",
3787
- fillrule: "fillRule",
3788
- "fill-rule": "fillRule",
3789
- filter: "filter",
3790
- filterres: "filterRes",
3791
- filterunits: "filterUnits",
3792
- floodopacity: "floodOpacity",
3793
- "flood-opacity": "floodOpacity",
3794
- floodcolor: "floodColor",
3795
- "flood-color": "floodColor",
3796
- focusable: "focusable",
3797
- fontfamily: "fontFamily",
3798
- "font-family": "fontFamily",
3799
- fontsize: "fontSize",
3800
- "font-size": "fontSize",
3801
- fontsizeadjust: "fontSizeAdjust",
3802
- "font-size-adjust": "fontSizeAdjust",
3803
- fontstretch: "fontStretch",
3804
- "font-stretch": "fontStretch",
3805
- fontstyle: "fontStyle",
3806
- "font-style": "fontStyle",
3807
- fontvariant: "fontVariant",
3808
- "font-variant": "fontVariant",
3809
- fontweight: "fontWeight",
3810
- "font-weight": "fontWeight",
3811
- format: "format",
3812
- from: "from",
3813
- fx: "fx",
3814
- fy: "fy",
3815
- g1: "g1",
3816
- g2: "g2",
3817
- glyphname: "glyphName",
3818
- "glyph-name": "glyphName",
3819
- glyphorientationhorizontal: "glyphOrientationHorizontal",
3820
- "glyph-orientation-horizontal": "glyphOrientationHorizontal",
3821
- glyphorientationvertical: "glyphOrientationVertical",
3822
- "glyph-orientation-vertical": "glyphOrientationVertical",
3823
- glyphref: "glyphRef",
3824
- gradienttransform: "gradientTransform",
3825
- gradientunits: "gradientUnits",
3826
- hanging: "hanging",
3827
- horizadvx: "horizAdvX",
3828
- "horiz-adv-x": "horizAdvX",
3829
- horizoriginx: "horizOriginX",
3830
- "horiz-origin-x": "horizOriginX",
3831
- ideographic: "ideographic",
3832
- imagerendering: "imageRendering",
3833
- "image-rendering": "imageRendering",
3834
- in2: "in2",
3835
- in: "in",
3836
- inlist: "inlist",
3837
- intercept: "intercept",
3838
- k1: "k1",
3839
- k2: "k2",
3840
- k3: "k3",
3841
- k4: "k4",
3842
- k: "k",
3843
- kernelmatrix: "kernelMatrix",
3844
- kernelunitlength: "kernelUnitLength",
3845
- kerning: "kerning",
3846
- keypoints: "keyPoints",
3847
- keysplines: "keySplines",
3848
- keytimes: "keyTimes",
3849
- lengthadjust: "lengthAdjust",
3850
- letterspacing: "letterSpacing",
3851
- "letter-spacing": "letterSpacing",
3852
- lightingcolor: "lightingColor",
3853
- "lighting-color": "lightingColor",
3854
- limitingconeangle: "limitingConeAngle",
3855
- local: "local",
3856
- markerend: "markerEnd",
3857
- "marker-end": "markerEnd",
3858
- markerheight: "markerHeight",
3859
- markermid: "markerMid",
3860
- "marker-mid": "markerMid",
3861
- markerstart: "markerStart",
3862
- "marker-start": "markerStart",
3863
- markerunits: "markerUnits",
3864
- markerwidth: "markerWidth",
3865
- mask: "mask",
3866
- maskcontentunits: "maskContentUnits",
3867
- maskunits: "maskUnits",
3868
- mathematical: "mathematical",
3869
- mode: "mode",
3870
- numoctaves: "numOctaves",
3871
- offset: "offset",
3872
- opacity: "opacity",
3873
- operator: "operator",
3874
- order: "order",
3875
- orient: "orient",
3876
- orientation: "orientation",
3877
- origin: "origin",
3878
- overflow: "overflow",
3879
- overlineposition: "overlinePosition",
3880
- "overline-position": "overlinePosition",
3881
- overlinethickness: "overlineThickness",
3882
- "overline-thickness": "overlineThickness",
3883
- paintorder: "paintOrder",
3884
- "paint-order": "paintOrder",
3885
- panose1: "panose1",
3886
- "panose-1": "panose1",
3887
- pathlength: "pathLength",
3888
- patterncontentunits: "patternContentUnits",
3889
- patterntransform: "patternTransform",
3890
- patternunits: "patternUnits",
3891
- pointerevents: "pointerEvents",
3892
- "pointer-events": "pointerEvents",
3893
- points: "points",
3894
- pointsatx: "pointsAtX",
3895
- pointsaty: "pointsAtY",
3896
- pointsatz: "pointsAtZ",
3897
- popover: "popover",
3898
4195
  popovertarget: "popoverTarget",
3899
4196
  popovertargetaction: "popoverTargetAction",
3900
- prefix: "prefix",
3901
- preservealpha: "preserveAlpha",
3902
- preserveaspectratio: "preserveAspectRatio",
3903
- primitiveunits: "primitiveUnits",
3904
- property: "property",
3905
- r: "r",
3906
- radius: "radius",
3907
- refx: "refX",
3908
- refy: "refY",
3909
- renderingintent: "renderingIntent",
3910
- "rendering-intent": "renderingIntent",
3911
- repeatcount: "repeatCount",
3912
- repeatdur: "repeatDur",
3913
- requiredextensions: "requiredExtensions",
3914
- requiredfeatures: "requiredFeatures",
3915
- resource: "resource",
3916
- restart: "restart",
3917
- result: "result",
3918
- results: "results",
3919
- rotate: "rotate",
3920
- rx: "rx",
3921
- ry: "ry",
3922
- scale: "scale",
3923
- security: "security",
3924
- seed: "seed",
3925
- shaperendering: "shapeRendering",
3926
- "shape-rendering": "shapeRendering",
3927
- slope: "slope",
3928
- spacing: "spacing",
3929
- specularconstant: "specularConstant",
3930
- specularexponent: "specularExponent",
3931
- speed: "speed",
3932
- spreadmethod: "spreadMethod",
3933
- startoffset: "startOffset",
3934
- stddeviation: "stdDeviation",
3935
- stemh: "stemh",
3936
- stemv: "stemv",
3937
- stitchtiles: "stitchTiles",
3938
- stopcolor: "stopColor",
3939
- "stop-color": "stopColor",
3940
- stopopacity: "stopOpacity",
3941
- "stop-opacity": "stopOpacity",
3942
- strikethroughposition: "strikethroughPosition",
3943
- "strikethrough-position": "strikethroughPosition",
3944
- strikethroughthickness: "strikethroughThickness",
3945
- "strikethrough-thickness": "strikethroughThickness",
3946
- string: "string",
3947
- stroke: "stroke",
3948
- strokedasharray: "strokeDasharray",
3949
- "stroke-dasharray": "strokeDasharray",
3950
- strokedashoffset: "strokeDashoffset",
3951
- "stroke-dashoffset": "strokeDashoffset",
3952
- strokelinecap: "strokeLinecap",
3953
- "stroke-linecap": "strokeLinecap",
3954
- strokelinejoin: "strokeLinejoin",
3955
- "stroke-linejoin": "strokeLinejoin",
3956
- strokemiterlimit: "strokeMiterlimit",
3957
- "stroke-miterlimit": "strokeMiterlimit",
3958
- strokewidth: "strokeWidth",
3959
- "stroke-width": "strokeWidth",
3960
- strokeopacity: "strokeOpacity",
3961
- "stroke-opacity": "strokeOpacity",
3962
- suppresscontenteditablewarning: "suppressContentEditableWarning",
3963
- suppresshydrationwarning: "suppressHydrationWarning",
3964
- surfacescale: "surfaceScale",
3965
- systemlanguage: "systemLanguage",
3966
- tablevalues: "tableValues",
3967
- targetx: "targetX",
3968
- targety: "targetY",
3969
- textanchor: "textAnchor",
3970
- "text-anchor": "textAnchor",
3971
- textdecoration: "textDecoration",
3972
- "text-decoration": "textDecoration",
3973
- textlength: "textLength",
3974
- textrendering: "textRendering",
3975
- "text-rendering": "textRendering",
3976
- to: "to",
3977
- transform: "transform",
3978
- transformorigin: "transformOrigin",
3979
- "transform-origin": "transformOrigin",
3980
- typeof: "typeof",
3981
- u1: "u1",
3982
- u2: "u2",
3983
- underlineposition: "underlinePosition",
3984
- "underline-position": "underlinePosition",
3985
- underlinethickness: "underlineThickness",
3986
- "underline-thickness": "underlineThickness",
3987
- unicode: "unicode",
3988
- unicodebidi: "unicodeBidi",
3989
- "unicode-bidi": "unicodeBidi",
3990
- unicoderange: "unicodeRange",
3991
- "unicode-range": "unicodeRange",
3992
- unitsperem: "unitsPerEm",
3993
- "units-per-em": "unitsPerEm",
3994
- unselectable: "unselectable",
3995
- valphabetic: "vAlphabetic",
3996
- "v-alphabetic": "vAlphabetic",
3997
- values: "values",
3998
- vectoreffect: "vectorEffect",
3999
- "vector-effect": "vectorEffect",
4000
- version: "version",
4001
- vertadvy: "vertAdvY",
4002
- "vert-adv-y": "vertAdvY",
4003
- vertoriginx: "vertOriginX",
4004
- "vert-origin-x": "vertOriginX",
4005
- vertoriginy: "vertOriginY",
4006
- "vert-origin-y": "vertOriginY",
4007
- vhanging: "vHanging",
4008
- "v-hanging": "vHanging",
4009
- videographic: "vIdeographic",
4010
- "v-ideographic": "vIdeographic",
4011
- viewbox: "viewBox",
4012
- viewtarget: "viewTarget",
4013
- visibility: "visibility",
4014
- vmathematical: "vMathematical",
4015
- "v-mathematical": "vMathematical",
4016
- vocab: "vocab",
4017
- widths: "widths",
4018
- wordspacing: "wordSpacing",
4019
- "word-spacing": "wordSpacing",
4020
- writingmode: "writingMode",
4021
- "writing-mode": "writingMode",
4022
- x1: "x1",
4023
- x2: "x2",
4024
- x: "x",
4025
- xchannelselector: "xChannelSelector",
4026
- xheight: "xHeight",
4027
- "x-height": "xHeight",
4028
- xlinkactuate: "xlinkActuate",
4029
- "xlink:actuate": "xlinkActuate",
4030
- xlinkarcrole: "xlinkArcrole",
4031
- "xlink:arcrole": "xlinkArcrole",
4032
- xlinkhref: "xlinkHref",
4033
- "xlink:href": "xlinkHref",
4034
- xlinkrole: "xlinkRole",
4035
- "xlink:role": "xlinkRole",
4036
- xlinkshow: "xlinkShow",
4037
- "xlink:show": "xlinkShow",
4038
- xlinktitle: "xlinkTitle",
4039
- "xlink:title": "xlinkTitle",
4040
- xlinktype: "xlinkType",
4041
- "xlink:type": "xlinkType",
4042
- xmlbase: "xmlBase",
4043
- "xml:base": "xmlBase",
4044
- xmllang: "xmlLang",
4045
- "xml:lang": "xmlLang",
4046
- xmlns: "xmlns",
4047
- "xml:space": "xmlSpace",
4048
- xmlnsxlink: "xmlnsXlink",
4049
- "xmlns:xlink": "xmlnsXlink",
4050
- xmlspace: "xmlSpace",
4051
- y1: "y1",
4052
- y2: "y2",
4053
- y: "y",
4054
- ychannelselector: "yChannelSelector",
4055
- z: "z",
4056
- zoomandpan: "zoomAndPan",
4057
- // added by us
4058
4197
  dirname: "dirName"
4059
4198
  };
4060
4199
  var generateAction = ({
@@ -4148,6 +4287,7 @@ var generatePropValue = ({
4148
4287
  var generateJsxElement = ({
4149
4288
  context = "jsx",
4150
4289
  scope,
4290
+ metas,
4151
4291
  instance,
4152
4292
  props,
4153
4293
  dataSources,
@@ -4156,9 +4296,11 @@ var generateJsxElement = ({
4156
4296
  children,
4157
4297
  classesMap
4158
4298
  }) => {
4299
+ var _a2;
4159
4300
  if (instance.component === descendantComponent) {
4160
4301
  return "";
4161
4302
  }
4303
+ const hasTags = Object.keys(((_a2 = metas.get(instance.component)) == null ? void 0 : _a2.presetStyle) ?? {}).length > 0;
4162
4304
  let generatedProps = "";
4163
4305
  const index = indexesWithinAncestors.get(instance.id);
4164
4306
  if (index !== void 0) {
@@ -4187,7 +4329,7 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
4187
4329
  continue;
4188
4330
  }
4189
4331
  let name2 = prop.name;
4190
- if (instance.component === elementComponent) {
4332
+ if (instance.component === elementComponent || hasTags) {
4191
4333
  name2 = standardAttributesToReactProps[prop.name] ?? prop.name;
4192
4334
  }
4193
4335
  if (prop.name === showAttribute) {
@@ -4300,6 +4442,7 @@ ${name2}={${propValue}}`;
4300
4442
  };
4301
4443
  var generateJsxChildren = ({
4302
4444
  scope,
4445
+ metas,
4303
4446
  children,
4304
4447
  instances,
4305
4448
  props,
@@ -4340,6 +4483,7 @@ var generateJsxChildren = ({
4340
4483
  generatedChildren += generateJsxElement({
4341
4484
  context: "jsx",
4342
4485
  scope,
4486
+ metas,
4343
4487
  instance,
4344
4488
  props,
4345
4489
  dataSources,
@@ -4349,6 +4493,7 @@ var generateJsxChildren = ({
4349
4493
  children: generateJsxChildren({
4350
4494
  classesMap,
4351
4495
  scope,
4496
+ metas,
4352
4497
  children: instance.children,
4353
4498
  instances,
4354
4499
  props,
@@ -4384,6 +4529,7 @@ var generateWebstudioComponent = ({
4384
4529
  generatedJsx = generateJsxElement({
4385
4530
  context: "expression",
4386
4531
  scope,
4532
+ metas,
4387
4533
  instance,
4388
4534
  props,
4389
4535
  dataSources,
@@ -4392,6 +4538,7 @@ var generateWebstudioComponent = ({
4392
4538
  classesMap,
4393
4539
  children: generateJsxChildren({
4394
4540
  scope,
4541
+ metas,
4395
4542
  children: instance.children,
4396
4543
  instances,
4397
4544
  props,
@@ -4577,9 +4724,7 @@ const o$2 = {
4577
4724
  icon: ""
4578
4725
  };
4579
4726
  const e$2 = {
4580
- className: { required: false, control: "text", type: "string" },
4581
4727
  clientOnly: { required: false, control: "boolean", type: "boolean" },
4582
- code: { required: true, control: "text", type: "string" },
4583
4728
  executeScriptOnCanvas: {
4584
4729
  required: false,
4585
4730
  control: "boolean",
@@ -4611,24 +4756,13 @@ const r$b = {
4611
4756
  };
4612
4757
  ({
4613
4758
  props: {
4614
- ...e$2,
4615
4759
  clientOnly: {
4616
- ...e$2.clientOnly,
4617
- description: "Activate it for any scripts that can mutate the DOM or introduce interactivity. This only affects the published site."
4760
+ ...e$2.clientOnly
4618
4761
  },
4619
4762
  executeScriptOnCanvas: {
4620
- ...e$2.executeScriptOnCanvas,
4621
- label: "Run scripts on canvas",
4622
- description: "Dangerously allow script execution on canvas without switching to preview mode. This only affects build mode, but may result in unwanted side effects inside builder!"
4623
- },
4624
- code: {
4625
- required: true,
4626
- control: "code",
4627
- language: "html",
4628
- type: "string"
4763
+ ...e$2.executeScriptOnCanvas
4629
4764
  }
4630
- },
4631
- initialProps: ["className", "clientOnly", "executeScriptOnCanvas"]
4765
+ }
4632
4766
  });
4633
4767
  const a$a = {
4634
4768
  icon: MarkdownEmbedIcon,
@@ -7300,7 +7434,7 @@ const initFlow = async (options) => {
7300
7434
  await link({ link: shareLink });
7301
7435
  if (!options.template.length) {
7302
7436
  projectTemplate = exitIfCancelled(
7303
- await select$1({
7437
+ await select$2({
7304
7438
  message: "Where would you like to deploy your project?",
7305
7439
  options: PROJECT_TEMPLATES
7306
7440
  })
@@ -7315,7 +7449,7 @@ const initFlow = async (options) => {
7315
7449
  }
7316
7450
  if (!options.template.length && projectTemplate === void 0) {
7317
7451
  projectTemplate = exitIfCancelled(
7318
- await select$1({
7452
+ await select$2({
7319
7453
  message: "Where would you like to deploy your project?",
7320
7454
  options: PROJECT_TEMPLATES
7321
7455
  })
@@ -7360,91 +7494,19 @@ const getDeploymentInstructions = (deployTarget) => {
7360
7494
  }
7361
7495
  };
7362
7496
  const name = "webstudio";
7363
- const version = "0.218.0";
7497
+ const version = "0.219.0";
7364
7498
  const description = "Webstudio CLI";
7365
7499
  const author = "Webstudio <github@webstudio.is>";
7366
7500
  const homepage = "https://webstudio.is";
7367
7501
  const type = "module";
7368
- const bin = {
7369
- "webstudio-cli": "./bin.js",
7370
- webstudio: "./bin.js"
7371
- };
7372
- const imports = {
7373
- "#cli": {
7374
- webstudio: "./src/cli.ts",
7375
- "default": "./lib/cli.js"
7376
- }
7377
- };
7378
- const files = [
7379
- "lib/*",
7380
- "templates/*",
7381
- "bin.js",
7382
- "!*.{test,stories}.*"
7383
- ];
7384
- const scripts = {
7385
- typecheck: "tsc",
7386
- build: "rm -rf lib && vite build",
7387
- test: "vitest run"
7388
- };
7502
+ const bin = { "webstudio-cli": "./bin.js", "webstudio": "./bin.js" };
7503
+ const imports = { "#cli": { "webstudio": "./src/cli.ts", "default": "./lib/cli.js" } };
7504
+ const files = ["lib/*", "templates/*", "bin.js", "!*.{test,stories}.*"];
7505
+ const scripts = { "typecheck": "tsc", "build": "rm -rf lib && vite build", "test": "vitest run" };
7389
7506
  const license = "AGPL-3.0-or-later";
7390
- const engines = {
7391
- node: ">=20.12"
7392
- };
7393
- const dependencies = {
7394
- "@clack/prompts": "^0.10.0",
7395
- "@emotion/hash": "^0.9.2",
7396
- acorn: "^8.14.1",
7397
- "acorn-walk": "^8.3.4",
7398
- "change-case": "^5.4.4",
7399
- deepmerge: "^4.3.1",
7400
- "env-paths": "^3.0.0",
7401
- nanoid: "^5.1.5",
7402
- "p-limit": "^6.2.0",
7403
- parse5: "7.2.1",
7404
- picocolors: "^1.1.1",
7405
- "reserved-identifiers": "^1.0.0",
7406
- tinyexec: "^0.3.2",
7407
- yargs: "^17.7.2",
7408
- zod: "^3.24.2"
7409
- };
7410
- const devDependencies = {
7411
- "@netlify/vite-plugin-react-router": "^1.0.1",
7412
- "@react-router/dev": "^7.5.0",
7413
- "@react-router/fs-routes": "^7.5.0",
7414
- "@remix-run/cloudflare": "^2.16.4",
7415
- "@remix-run/cloudflare-pages": "^2.16.4",
7416
- "@remix-run/dev": "^2.16.4",
7417
- "@remix-run/node": "^2.16.4",
7418
- "@remix-run/react": "^2.16.4",
7419
- "@remix-run/server-runtime": "^2.16.4",
7420
- "@types/react": "^18.2.70",
7421
- "@types/react-dom": "^18.2.25",
7422
- "@types/yargs": "^17.0.33",
7423
- "@vercel/react-router": "^1.1.0",
7424
- "@vitejs/plugin-react": "^4.3.4",
7425
- "@webstudio-is/css-engine": "workspace:*",
7426
- "@webstudio-is/http-client": "workspace:*",
7427
- "@webstudio-is/image": "workspace:*",
7428
- "@webstudio-is/react-sdk": "workspace:*",
7429
- "@webstudio-is/sdk": "workspace:*",
7430
- "@webstudio-is/sdk-components-animation": "workspace:*",
7431
- "@webstudio-is/sdk-components-react": "workspace:*",
7432
- "@webstudio-is/sdk-components-react-radix": "workspace:*",
7433
- "@webstudio-is/sdk-components-react-remix": "workspace:*",
7434
- "@webstudio-is/sdk-components-react-router": "workspace:*",
7435
- "@webstudio-is/tsconfig": "workspace:*",
7436
- h3: "^1.15.1",
7437
- ipx: "^3.0.3",
7438
- prettier: "3.5.3",
7439
- react: "18.3.0-canary-14898b6a9-20240318",
7440
- "react-dom": "18.3.0-canary-14898b6a9-20240318",
7441
- "react-router": "^7.5.0",
7442
- "ts-expect": "^1.3.0",
7443
- vike: "^0.4.228",
7444
- vite: "^5.4.11",
7445
- vitest: "^3.0.8",
7446
- wrangler: "^3.63.2"
7447
- };
7507
+ const engines = { "node": ">=20.12" };
7508
+ const dependencies = { "@clack/prompts": "^0.10.0", "@emotion/hash": "^0.9.2", "acorn": "^8.14.1", "acorn-walk": "^8.3.4", "change-case": "^5.4.4", "deepmerge": "^4.3.1", "env-paths": "^3.0.0", "nanoid": "^5.1.5", "p-limit": "^6.2.0", "parse5": "7.3.0", "picocolors": "^1.1.1", "reserved-identifiers": "^1.0.0", "tinyexec": "^0.3.2", "yargs": "^17.7.2", "zod": "^3.24.2" };
7509
+ const devDependencies = { "@cloudflare/vite-plugin": "^1.1.0", "@netlify/vite-plugin-react-router": "^1.0.1", "@react-router/dev": "^7.5.3", "@react-router/fs-routes": "^7.5.3", "@remix-run/cloudflare": "^2.16.5", "@remix-run/cloudflare-pages": "^2.16.5", "@remix-run/dev": "^2.16.5", "@remix-run/node": "^2.16.5", "@remix-run/react": "^2.16.5", "@remix-run/server-runtime": "^2.16.5", "@types/react": "^18.2.70", "@types/react-dom": "^18.2.25", "@types/yargs": "^17.0.33", "@vercel/react-router": "^1.1.0", "@vitejs/plugin-react": "^4.4.1", "@webstudio-is/css-engine": "workspace:*", "@webstudio-is/http-client": "workspace:*", "@webstudio-is/image": "workspace:*", "@webstudio-is/react-sdk": "workspace:*", "@webstudio-is/sdk": "workspace:*", "@webstudio-is/sdk-components-animation": "workspace:*", "@webstudio-is/sdk-components-react": "workspace:*", "@webstudio-is/sdk-components-react-radix": "workspace:*", "@webstudio-is/sdk-components-react-remix": "workspace:*", "@webstudio-is/sdk-components-react-router": "workspace:*", "@webstudio-is/tsconfig": "workspace:*", "h3": "^1.15.1", "ipx": "^3.0.3", "isbot": "^5.1.25", "prettier": "3.5.3", "react": "18.3.0-canary-14898b6a9-20240318", "react-dom": "18.3.0-canary-14898b6a9-20240318", "react-router": "^7.5.3", "ts-expect": "^1.3.0", "vike": "^0.4.229", "vite": "^6.3.4", "vitest": "^3.1.2", "wrangler": "^3.63.2" };
7448
7510
  const packageJson = {
7449
7511
  name,
7450
7512
  version,