sveltekit-ui 1.1.74 → 1.1.76

package/src/routes/components/[component]/Showcase/ContentInput/index.svelte

@@ -1,1943 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-  import ContentInput from "$lib/Components/ContentInput/index.svelte"
-  import { create_content_input_manager } from "$lib/Components/ContentInput/index.svelte.js"
-  import Json from "$lib/Components/Json/index.svelte"
-  import { create_json_manager } from "$lib/Components/Json/index.svelte.js"
-  import DataTypeInput from "$lib/Components/DataTypeInput/index.svelte"
-  // import { create_data_type_input_manager } from "$lib/Components/DataTypeInput/index.svelte.js"
-  import { deep_copy, set_definition_stack } from "$lib/client/index.js"
-  import { PUBLIC_APPLE_MAPKIT_JS_API_KEY } from "$env/static/public"
-
-  const content_variables_initial = {
-    aaaa: 5,
-    bbbb: "Hello",
-    cccc: false,
-    dddd: [false, false, false, true],
-    eeee: [
-      { team: "Albuquerque", points: 2378 },
-      { team: "Atlanta", points: 2134 },
-      { team: "Austin", points: 1539 },
-      { team: "Baltimore", points: 423 },
-      { team: "Baton Rouge", points: 453 },
-      { team: "Boise", points: 2700 },
-      { team: "Boston", points: 4105 },
-      { team: "Buffalo", points: 3645 },
-      { team: "Calgary", points: 1619 },
-      { team: "Charleston", points: 1779 },
-      { team: "Charlotte", points: 973 },
-      { team: "Chicago", points: 4003 },
-      { team: "Cincinnati", points: 1347 },
-      { team: "Cleveland", points: 4512 },
-      { team: "Columbus", points: 3895 },
-      { team: "Dallas", points: 2683 },
-      { team: "Denver", points: 4989 },
-      { team: "Detroit", points: 1523 },
-      { team: "El Paso", points: 1634 },
-      { team: "Fargo", points: 4409 },
-      { team: "Fresno", points: 4058 },
-      { team: "Houston", points: 1285 },
-      { team: "Indianapolis", points: 2169 },
-      { team: "Jacksonville", points: 2999 },
-      { team: "Kansas City", points: 435 },
-      { team: "Las Vegas", points: 3943 },
-      { team: "Los Angeles", points: 4822 },
-      { team: "Louisville", points: 2118 },
-      { team: "Memphis", points: 1596 },
-      { team: "Miami", points: 1863 },
-      { team: "Milwaukee", points: 1680 },
-      { team: "Minneapolis", points: 2228 },
-      { team: "Nashville", points: 2135 },
-      { team: "New Orleans", points: 307 },
-      { team: "New York", points: 3106 },
-      { team: "Oakland", points: 1094 },
-      { team: "Oklahoma City", points: 3275 },
-      { team: "Omaha", points: 4650 },
-      { team: "Orlando", points: 2098 },
-      { team: "Philadelphia", points: 1914 },
-      { team: "Phoenix", points: 4224 },
-      { team: "Pittsburgh", points: 4511 },
-      { team: "Portland", points: 4970 },
-      { team: "Raleigh", points: 1271 },
-      { team: "Reno", points: 3504 },
-      { team: "Richmond", points: 4317 },
-      { team: "Sacramento", points: 3603 },
-      { team: "Salt Lake City", points: 1178 },
-      { team: "San Antonio", points: 1477 },
-      { team: "San Diego", points: 2691 },
-      { team: "San Francisco", points: 2836 },
-      { team: "San Jose", points: 2728 },
-      { team: "Santa Fe", points: 3931 },
-      { team: "Seattle", points: 1781 },
-      { team: "St. Louis", points: 3088 },
-      { team: "Tampa", points: 179 },
-      { team: "Toledo", points: 4084 },
-      { team: "Toronto", points: 0 },
-    ],
-  }
-
-  let variables_json_manager = create_json_manager({
-    val: content_variables_initial,
-    is_edit_mode: true,
-    is_show_buttons: true,
-    is_popover: true,
-    on_finish: (input) => console.log("finish_var_change", input),
-  })
-
-  // let data_type_input_manager = create_data_type_input_manager({
-  //   val: {
-  //     type: "object_literal",
-  //     properties: {
-  //       aaaa: {
-  //         type: "float_literal",
-  //         options: {
-  //           min: null,
-  //           max: null,
-  //         },
-  //       },
-  //       bbbb: {
-  //         type: "text_literal",
-  //         options: {},
-  //       },
-  //       cccc: {
-  //         type: "boolean_literal",
-  //         options: {},
-  //       },
-  //       dddd: {
-  //         type: "loop",
-  //         options: {},
-  //         items: {
-  //           type: "boolean_literal",
-  //           options: {},
-  //         },
-  //       },
-  //       eeee: {
-  //         type: "loop",
-  //         options: {},
-  //         items: {
-  //           type: "object_literal",
-  //           properties: {
-  //             team: { type: "text_literal" },
-  //             points: { type: "int_literal" },
-  //           },
-  //         },
-  //       },
-  //     },
-  //   },
-  // })
-
-  // let set_content_input_type = create_button_manager({
-  //   type: "outlined",
-  //   text: "Set Input Data Type",
-  //   is_compressed: true,
-  //   on_click: () => content_input_manager.set_input_data_type(data_type_input_manager?.val),
-  // })
-
-  // const initial_val = {
-  //   type_id: "div",
-  //   selector_id: "opmbc",
-  //   children: [
-  //     {
-  //       type_id: "h3",
-  //       selector_id: "wgxib",
-  //       children: [
-  //         {
-  //           type_id: "base_text",
-  //           selector_id: "nznpx",
-  //           children: [],
-  //           attributes: { content_from_variable_path: null, content: "Let's test this stuff out!" },
-  //         },
-  //       ],
-  //       attributes: {},
-  //     },
-  //     {
-  //       type_id: "p",
-  //       selector_id: "sxrngjxb",
-  //       children: [
-  //         {
-  //           type_id: "base_text",
-  //           selector_id: "xflhhley",
-  //           children: [],
-  //           attributes: {
-  //             content:
-  //               "hey this is a test blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah",
-  //             text_color: null,
-  //           },
-  //         },
-  //         {
-  //           type_id: "code_inline",
-  //           selector_id: "xofaovta",
-  //           children: [],
-  //           attributes: { content: "yo yo yo", is_show_copy_button: null, text_color: null },
-  //         },
-  //         {
-  //           type_id: "base_text",
-  //           selector_id: "czzczuba",
-  //           children: [],
-  //           attributes: {
-  //             content:
-  //               "hey this is a test blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah hey this is a test blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah",
-  //             text_color: null,
-  //           },
-  //         },
-  //       ],
-  //       attributes: {},
-  //     },
-  //     {
-  //       type_id: "ul",
-  //       selector_id: "thawp",
-  //       children: [
-  //         {
-  //           type_id: "li",
-  //           selector_id: "ynxnv",
-  //           children: [
-  //             {
-  //               type_id: "base_text",
-  //               selector_id: "xaahu",
-  //               children: [],
-  //               attributes: { content: "The checkbox, ", text_color: null },
-  //             },
-  //             {
-  //               type_id: "checkbox",
-  //               selector_id: "iynnb",
-  //               children: [],
-  //               attributes: {
-  //                 val_from_variable_path: ["variables", "cccc"],
-  //                 type: "checkbox",
-  //                 size: 5,
-  //                 color: { l: 12, c: 21, h: 24, o: 24, is_dark_theme_invert: true },
-  //               },
-  //             },
-  //             {
-  //               type_id: "base_text",
-  //               selector_id: "loupp",
-  //               children: [],
-  //               attributes: { content: ", is connected to the same var here: ", text_color: null },
-  //             },
-  //             {
-  //               type_id: "base_text",
-  //               selector_id: "ofjlf",
-  //               children: [],
-  //               attributes: {
-  //                 content_from_variable_path: ["variables", "cccc"],
-  //                 text_color: { l: 9, c: 10, h: 11, o: 24, is_dark_theme_invert: true },
-  //               },
-  //             },
-  //           ],
-  //           attributes: {},
-  //         },
-  //         {
-  //           type_id: "li",
-  //           selector_id: "qlqgujep",
-  //           children: [
-  //             {
-  //               type_id: "base_text",
-  //               selector_id: "ftpoicjq",
-  //               children: [],
-  //               attributes: { content_from_variable_path: ["variables", "cccc"], text_color: null },
-  //             },
-  //             {
-  //               type_id: "checkbox",
-  //               selector_id: "kdotcril",
-  //               children: [],
-  //               attributes: {
-  //                 val_from_variable_path: ["variables", "cccc"],
-  //                 type: "checkbox",
-  //                 size: null,
-  //                 color: null,
-  //               },
-  //             },
-  //           ],
-  //           attributes: {},
-  //         },
-  //         {
-  //           type_id: "li",
-  //           selector_id: "istoi",
-  //           children: [
-  //             {
-  //               type_id: "checkbox",
-  //               selector_id: "jfsgb",
-  //               children: [],
-  //               attributes: {
-  //                 val_from_variable_path: ["variables", "dddd", 3],
-  //                 type: "toggle",
-  //                 size: null,
-  //                 color: { l: 8, c: 21, h: 7, o: 24, is_dark_theme_invert: true },
-  //               },
-  //             },
-  //             {
-  //               type_id: "base_text",
-  //               selector_id: "allfb",
-  //               children: [],
-  //               attributes: { content: "this one does the show test", text_color: null },
-  //             },
-  //           ],
-  //           attributes: {},
-  //         },
-  //       ],
-  //       attributes: {},
-  //     },
-  //     {
-  //       type_id: "loop",
-  //       selector_id: "bwrgl",
-  //       children: [
-  //         {
-  //           type_id: "h5",
-  //           selector_id: "clrzp",
-  //           children: [
-  //             {
-  //               type_id: "base_text",
-  //               selector_id: "zsaou",
-  //               children: [],
-  //               attributes: {
-  //                 content_from_variable_path: ["variables", "dddd", ["booly_i"]],
-  //                 text_color: { l: 15, c: 13, h: 6, o: 24, is_dark_theme_invert: true },
-  //               },
-  //             },
-  //           ],
-  //           attributes: {},
-  //         },
-  //         {
-  //           type_id: "checkbox",
-  //           selector_id: "lqvon",
-  //           children: [],
-  //           attributes: {
-  //             val_from_variable_path: ["variables", "dddd", ["booly_i"]],
-  //             type: "checkbox",
-  //             size: 2.4,
-  //             color: null,
-  //           },
-  //         },
-  //       ],
-  //       attributes: { iter_identifier: "booly_i", val_from_variable_path: ["variables", "dddd"], join_text: null },
-  //     },
-  //     {
-  //       type_id: "show_conditions",
-  //       selector_id: "gbhifesv",
-  //       children: [
-  //         {
-  //           type_id: "show_conditions_item",
-  //           selector_id: "pkwuokqz",
-  //           children: [
-  //             {
-  //               type_id: "base_text",
-  //               selector_id: "arshiwlr",
-  //               children: [],
-  //               attributes: {
-  //                 content: "Show this if the condition passes!",
-  //                 text_color: { l: 7, c: 10, h: 20, o: 24, is_dark_theme_invert: true },
-  //               },
-  //             },
-  //           ],
-  //           attributes: { is_show_from_variable_path: ["variables", "dddd", 3] },
-  //         },
-  //         {
-  //           type_id: "show_conditions_item_else",
-  //           selector_id: "jtrkkmtb",
-  //           children: [
-  //             {
-  //               type_id: "base_text",
-  //               selector_id: "hlbbxafx",
-  //               children: [],
-  //               attributes: {
-  //                 content: "Show this if the condition fails!",
-  //                 text_color: { l: 8, c: 10, h: 6, o: 24, is_dark_theme_invert: true },
-  //               },
-  //             },
-  //           ],
-  //           attributes: {},
-  //         },
-  //       ],
-  //       attributes: {},
-  //     },
-  //   ],
-  //   attributes: {},
-  // }
-
-  // const initial_val = {
-  //   type_id: "div",
-  //   selector_id: "cqwzkzxr",
-  //   attributes: {},
-  //   children: [
-  //     {
-  //       type_id: "section",
-  //       selector_id: "jqzyrcue",
-  //       attributes: {},
-  //       children: [
-  //         {
-  //           type_id: "h2",
-  //           selector_id: "wdqlkxsd",
-  //           attributes: {},
-  //           children: [
-  //             {
-  //               type_id: "base_text",
-  //               selector_id: "lpnoxexn",
-  //               attributes: { content: "Make your Logo", text_color: null },
-  //               children: [],
-  //             },
-  //           ],
-  //         },
-  //         {
-  //           type_id: "p",
-  //           selector_id: "ijmczenz",
-  //           attributes: {},
-  //           children: [
-  //             {
-  //               type_id: "base_text",
-  //               selector_id: "xnypkkxl",
-  //               attributes: {
-  //                 content:
-  //                   "Make an icon. Keep it simple. 1-3 colors and a few shapes. Don't include your long brand name text in the icon.",
-  //                 text_color: null,
-  //               },
-  //               children: [],
-  //             },
-  //           ],
-  //         },
-  //         {
-  //           type_id: "p",
-  //           selector_id: "hmfdkfnn",
-  //           attributes: {},
-  //           children: [{ type_id: "base_text", selector_id: "zsjtwlqz", attributes: {}, children: [] }],
-  //         },
-  //         {
-  //           type_id: "p",
-  //           selector_id: "qlzdpbvp",
-  //           attributes: {},
-  //           children: [
-  //             {
-  //               type_id: "base_text",
-  //               selector_id: "wtuayref",
-  //               attributes: {
-  //                 content:
-  //                   "Use an image or, ideally, an SVG for your logo. If you have some design experience, try tools like Adobe Illustrator or ",
-  //                 text_color: null,
-  //               },
-  //               children: [],
-  //             },
-  //             {
-  //               type_id: "link",
-  //               selector_id: "qdftshsx",
-  //               attributes: {
-  //                 href: "https://affinity.serif.com/en-us/designer/",
-  //                 text_color: null,
-  //                 display_text: null,
-  //                 is_show_preview: null,
-  //               },
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "hadhxxms",
-  //                   attributes: { content: "Affinity Designer", text_color: null },
-  //                   children: [],
-  //                 },
-  //               ],
-  //             },
-  //             {
-  //               type_id: "base_text",
-  //               selector_id: "pjzzqlvj",
-  //               attributes: { content: " on Mac. Flatten and export your design as SVG.", text_color: null },
-  //               children: [],
-  //             },
-  //           ],
-  //         },
-  //       ],
-  //     },
-  //     {
-  //       type_id: "section",
-  //       selector_id: "hpuldzpg",
-  //       attributes: {},
-  //       children: [
-  //         {
-  //           type_id: "h3",
-  //           selector_id: "mftcxsue",
-  //           attributes: {},
-  //           children: [
-  //             {
-  //               type_id: "base_text",
-  //               selector_id: "bsifzkyf",
-  //               attributes: { content: "Project Structure & Stack", text_color: null },
-  //               children: [],
-  //             },
-  //           ],
-  //         },
-  //       ],
-  //     },
-  //     {
-  //       type_id: "div",
-  //       selector_id: "almogbfk",
-  //       attributes: {
-  //         padding: null,
-  //         border_color: null,
-  //         align_content: "center",
-  //         border_radius: null,
-  //         justify_content: "center",
-  //         background_color: null,
-  //       },
-  //       children: [
-  //         {
-  //           type_id: "div",
-  //           selector_id: "csanyusd",
-  //           attributes: {
-  //             padding: 1,
-  //             border_color: null,
-  //             align_content: "center",
-  //             border_radius: null,
-  //             justify_content: "center",
-  //             background_color: null,
-  //           },
-  //           children: [
-  //             {
-  //               type_id: "h3",
-  //               selector_id: "ssxdhhef",
-  //               attributes: {},
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "bfxsnwkl",
-  //                   attributes: { content: "Project Structure & Stack", text_color: null },
-  //                   children: [],
-  //                 },
-  //               ],
-  //             },
-  //             {
-  //               type_id: "p",
-  //               selector_id: "qxtnufvi",
-  //               attributes: {},
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "ivuohmze",
-  //                   attributes: { content: "Your site uses ", text_color: null },
-  //                   children: [],
-  //                 },
-  //                 {
-  //                   type_id: "link",
-  //                   selector_id: "rraefsin",
-  //                   attributes: {
-  //                     href: "https://svelte.dev/docs/kit/introduction",
-  //                     text_color: null,
-  //                     display_text: null,
-  //                     is_show_preview: null,
-  //                   },
-  //                   children: [
-  //                     {
-  //                       type_id: "base_text",
-  //                       selector_id: "yrpbnrma",
-  //                       attributes: { content: "SvelteKit", text_color: null },
-  //                       children: [],
-  //                     },
-  //                   ],
-  //                 },
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "foaemrff",
-  //                   attributes: { content: " along with the ", text_color: null },
-  //                   children: [],
-  //                 },
-  //                 {
-  //                   type_id: "link",
-  //                   selector_id: "npiszgcm",
-  //                   attributes: {
-  //                     href: "https://www.sveltekit-ui.com",
-  //                     text_color: null,
-  //                     display_text: null,
-  //                     is_show_preview: null,
-  //                   },
-  //                   children: [
-  //                     {
-  //                       type_id: "base_text",
-  //                       selector_id: "bioefdyh",
-  //                       attributes: { content: "Sveltekit-UI", text_color: null },
-  //                       children: [],
-  //                     },
-  //                   ],
-  //                 },
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "ucykvtai",
-  //                   attributes: { content: " component library.", text_color: null },
-  //                   children: [],
-  //                 },
-  //               ],
-  //             },
-  //             {
-  //               type_id: "p",
-  //               selector_id: "lxlnkejm",
-  //               attributes: {},
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "fssnppmv",
-  //                   attributes: { content: "Set up a ", text_color: null },
-  //                   children: [],
-  //                 },
-  //                 {
-  //                   type_id: "link",
-  //                   selector_id: "ireopdxi",
-  //                   attributes: {
-  //                     href: "https://github.com",
-  //                     text_color: null,
-  //                     display_text: null,
-  //                     is_show_preview: null,
-  //                   },
-  //                   children: [
-  //                     {
-  //                       type_id: "base_text",
-  //                       selector_id: "enmontsk",
-  //                       attributes: { content: "GitHub", text_color: null },
-  //                       children: [],
-  //                     },
-  //                   ],
-  //                 },
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "puivkrcq",
-  //                   attributes: { content: " repository to save your project.", text_color: null },
-  //                   children: [],
-  //                 },
-  //               ],
-  //             },
-  //             {
-  //               type_id: "h3",
-  //               selector_id: "njpogflf",
-  //               attributes: {},
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "quoqvesd",
-  //                   attributes: { content: "Create a Logo", text_color: null },
-  //                   children: [],
-  //                 },
-  //               ],
-  //             },
-  //             {
-  //               type_id: "p",
-  //               selector_id: "euvczkeg",
-  //               attributes: {},
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "ansqoykr",
-  //                   attributes: {
-  //                     content:
-  //                       "Use an image or, ideally, an SVG for your logo. If you have some design experience, try tools like Adobe Illustrator or ",
-  //                     text_color: null,
-  //                   },
-  //                   children: [],
-  //                 },
-  //                 {
-  //                   type_id: "link",
-  //                   selector_id: "dsxacthf",
-  //                   attributes: {
-  //                     href: "https://affinity.serif.com/en-us/designer/",
-  //                     text_color: null,
-  //                     display_text: null,
-  //                     is_show_preview: null,
-  //                   },
-  //                   children: [
-  //                     {
-  //                       type_id: "base_text",
-  //                       selector_id: "xzlupmqi",
-  //                       attributes: { content: "Affinity Designer", text_color: null },
-  //                       children: [],
-  //                     },
-  //                   ],
-  //                 },
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "gxhwvgra",
-  //                   attributes: { content: " on Mac. Flatten and export your design as SVG.", text_color: null },
-  //                   children: [],
-  //                 },
-  //               ],
-  //             },
-  //             {
-  //               type_id: "p",
-  //               selector_id: "goxodvkj",
-  //               attributes: {},
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "aeiwtsky",
-  //                   attributes: { content: "Run the project locally with ", text_color: null },
-  //                   children: [],
-  //                 },
-  //                 {
-  //                   type_id: "code_inline",
-  //                   selector_id: "sryctegd",
-  //                   attributes: { color: null, content: "npm run dev" },
-  //                   children: [],
-  //                 },
-  //               ],
-  //             },
-  //             {
-  //               type_id: "p",
-  //               selector_id: "bakgdaes",
-  //               attributes: {},
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "qvjpmixr",
-  //                   attributes: { content: "You can optimize your SVG using ", text_color: null },
-  //                   children: [],
-  //                 },
-  //                 {
-  //                   type_id: "link",
-  //                   selector_id: "knnuygzg",
-  //                   attributes: {
-  //                     href: "https://jakearchibald.github.io/svgomg/",
-  //                     text_color: null,
-  //                     display_text: null,
-  //                     is_show_preview: null,
-  //                   },
-  //                   children: [
-  //                     {
-  //                       type_id: "base_text",
-  //                       selector_id: "adroimep",
-  //                       attributes: { content: "SVGOMG", text_color: null },
-  //                       children: [],
-  //                     },
-  //                   ],
-  //                 },
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "uzzoygsd",
-  //                   attributes: { content: ", and be sure to set a viewBox if possible.", text_color: null },
-  //                   children: [],
-  //                 },
-  //               ],
-  //             },
-  //             {
-  //               type_id: "p",
-  //               selector_id: "bbqgvvxx",
-  //               attributes: {},
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "dgftwinx",
-  //                   attributes: { content: "Generate your favicons (I recommend ", text_color: null },
-  //                   children: [],
-  //                 },
-  //                 {
-  //                   type_id: "link",
-  //                   selector_id: "xmhovaqt",
-  //                   attributes: {
-  //                     href: "https://realfavicongenerator.net",
-  //                     text_color: null,
-  //                     display_text: null,
-  //                     is_show_preview: null,
-  //                   },
-  //                   children: [
-  //                     {
-  //                       type_id: "base_text",
-  //                       selector_id: "dboscywd",
-  //                       attributes: { content: "Real Favicon Generator", text_color: null },
-  //                       children: [],
-  //                     },
-  //                   ],
-  //                 },
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "zwzmxwuh",
-  //                   attributes: {
-  //                     content: "). Then, delete the default favicon.ico and replace it with your preferred icons.",
-  //                     text_color: null,
-  //                   },
-  //                   children: [],
-  //                 },
-  //               ],
-  //             },
-  //             {
-  //               type_id: "p",
-  //               selector_id: "bpvrzdat",
-  //               attributes: {},
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "qegzopxo",
-  //                   attributes: {
-  //                     content: "Move the logo and favicon files to the static directory.",
-  //                     text_color: null,
-  //                   },
-  //                   children: [],
-  //                 },
-  //               ],
-  //             },
-  //             {
-  //               type_id: "p",
-  //               selector_id: "nimxpsyo",
-  //               attributes: {},
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "uapuzruu",
-  //                   attributes: { content: "Update ", text_color: null },
-  //                   children: [],
-  //                 },
-  //                 {
-  //                   type_id: "code_inline",
-  //                   selector_id: "uocvmlos",
-  //                   attributes: { color: null, content: "src/lib/components/Logo/index.svelte" },
-  //                   children: [],
-  //                 },
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "nbdzymfd",
-  //                   attributes: {
-  //                     content: " to use your new logo (preferably an icon and your brand name).",
-  //                     text_color: null,
-  //                   },
-  //                   children: [],
-  //                 },
-  //               ],
-  //             },
-  //             {
-  //               type_id: "h3",
-  //               selector_id: "dpvjvrxn",
-  //               attributes: {},
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "eqdhlyfx",
-  //                   attributes: { content: "Deployment & Hosting", text_color: null },
-  //                   children: [],
-  //                 },
-  //               ],
-  //             },
-  //             {
-  //               type_id: "p",
-  //               selector_id: "dyfoaybv",
-  //               attributes: {},
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "efoygyds",
-  //                   attributes: { content: "Create a free account on ", text_color: null },
-  //                   children: [],
-  //                 },
-  //                 {
-  //                   type_id: "link",
-  //                   selector_id: "yxehwxzn",
-  //                   attributes: {
-  //                     href: "https://vercel.com",
-  //                     text_color: null,
-  //                     display_text: null,
-  //                     is_show_preview: null,
-  //                   },
-  //                   children: [
-  //                     {
-  //                       type_id: "base_text",
-  //                       selector_id: "daeffxms",
-  //                       attributes: { content: "Vercel", text_color: null },
-  //                       children: [],
-  //                     },
-  //                   ],
-  //                 },
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "ukelhrfu",
-  //                   attributes: { content: " and purchase a custom domain name.", text_color: null },
-  //                   children: [],
-  //                 },
-  //               ],
-  //             },
-  //             {
-  //               type_id: "h3",
-  //               selector_id: "eocebncr",
-  //               attributes: {},
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "rcldvwiv",
-  //                   attributes: { content: "Set Up Email", text_color: null },
-  //                   children: [],
-  //                 },
-  //               ],
-  //             },
-  //             {
-  //               type_id: "p",
-  //               selector_id: "bthyyblz",
-  //               attributes: {},
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "pzkuhqrm",
-  //                   attributes: { content: "Sign up for a free account at ", text_color: null },
-  //                   children: [],
-  //                 },
-  //                 {
-  //                   type_id: "link",
-  //                   selector_id: "lulvgbrw",
-  //                   attributes: {
-  //                     href: "https://www.contibase.com",
-  //                     text_color: null,
-  //                     display_text: null,
-  //                     is_show_preview: null,
-  //                   },
-  //                   children: [
-  //                     {
-  //                       type_id: "base_text",
-  //                       selector_id: "cpveukby",
-  //                       attributes: { content: "Contibase", text_color: null },
-  //                       children: [],
-  //                     },
-  //                   ],
-  //                 },
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "zuxfghio",
-  //                   attributes: { content: ", and configure email services for your domain.", text_color: null },
-  //                   children: [],
-  //                 },
-  //               ],
-  //             },
-  //             {
-  //               type_id: "p",
-  //               selector_id: "tumedlok",
-  //               attributes: {},
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "joaawxxd",
-  //                   attributes: {
-  //                     content:
-  //                       "Contibase can also help you manage user sign-ins and offers tools to create custom data tables for any other data needs.",
-  //                     text_color: null,
-  //                   },
-  //                   children: [],
-  //                 },
-  //               ],
-  //             },
-  //             {
-  //               type_id: "h4",
-  //               selector_id: "orytxlul",
-  //               attributes: {},
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "zimqyrpx",
-  //                   attributes: { content: "Ready to Make Something Great!", text_color: null },
-  //                   children: [],
-  //                 },
-  //               ],
-  //             },
-  //             {
-  //               type_id: "p",
-  //               selector_id: "czmmjsra",
-  //               attributes: {},
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "aoxwhcxf",
-  //                   attributes: {
-  //                     content:
-  //                       "Check the official docs and remember you can always use AI to help speed up your process!",
-  //                     text_color: null,
-  //                   },
-  //                   children: [],
-  //                 },
-  //               ],
-  //             },
-  //           ],
-  //         },
-  //       ],
-  //     },
-  //   ],
-  // }
-
-  // const initial_val = {
-  //   type_id: "div",
-  //   selector_id: "cqwzkzxr",
-  //   attributes: {},
-  //   children: [
-  //     {
-  //       type_id: "h2",
-  //       selector_id: "hbvznufa",
-  //       children: [
-  //         {
-  //           type_id: "base_text",
-  //           selector_id: "kebffosw",
-  //           children: [],
-  //           attributes: { content: "Hello World", text_color: null },
-  //         },
-  //       ],
-  //       attributes: {},
-  //     },
-  //     { type_id: "p", selector_id: "srsxjjgz", children: [], attributes: {} },
-  //     {
-  //       type_id: "p",
-  //       selector_id: "hdoiapwi",
-  //       children: [
-  //         {
-  //           type_id: "base_text",
-  //           selector_id: "qhnsxwxb",
-  //           children: [],
-  //           attributes: { content: "one ", text_color: null },
-  //         },
-  //         {
-  //           type_id: "base_text",
-  //           selector_id: "xwcolfcm",
-  //           children: [],
-  //           attributes: { content: "two ", text_color: null },
-  //         },
-  //         {
-  //           type_id: "base_text",
-  //           selector_id: "zzfoqvdq",
-  //           children: [],
-  //           attributes: { content: "three ", text_color: null },
-  //         },
-  //         {
-  //           type_id: "base_text",
-  //           selector_id: "vagphpgn",
-  //           children: [],
-  //           attributes: { content: "four ", text_color: null },
-  //         },
-  //         {
-  //           type_id: "base_text",
-  //           selector_id: "hhmwoxyu",
-  //           children: [],
-  //           attributes: { content: "five ", text_color: null },
-  //         },
-  //       ],
-  //       attributes: {},
-  //     },
-  //     {
-  //       type_id: "div",
-  //       selector_id: "jkuitipo",
-  //       children: [
-  //         {
-  //           type_id: "ul",
-  //           selector_id: "macskilc",
-  //           children: [
-  //             {
-  //               type_id: "li",
-  //               selector_id: "ymndewjm",
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "kztuchzj",
-  //                   children: [],
-  //                   attributes: { content: "earth", text_color: null },
-  //                 },
-  //               ],
-  //               attributes: {},
-  //             },
-  //             {
-  //               type_id: "li",
-  //               selector_id: "vvwvpsyu",
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "sxdokccz",
-  //                   children: [],
-  //                   attributes: { content: "mars", text_color: null },
-  //                 },
-  //               ],
-  //               attributes: {},
-  //             },
-  //             {
-  //               type_id: "li",
-  //               selector_id: "nwdoctgk",
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "vzbimkqq",
-  //                   children: [],
-  //                   attributes: { content: "venus", text_color: null },
-  //                 },
-  //               ],
-  //               attributes: {},
-  //             },
-  //             {
-  //               type_id: "li",
-  //               selector_id: "trvkcqae",
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "xnrqcktc",
-  //                   children: [],
-  //                   attributes: { content: "neptune", text_color: null },
-  //                 },
-  //               ],
-  //               attributes: {},
-  //             },
-  //             {
-  //               type_id: "li",
-  //               selector_id: "fjmaxkpl",
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "fkxbmaeg",
-  //                   children: [],
-  //                   attributes: { content: "jupiter", text_color: null },
-  //                 },
-  //               ],
-  //               attributes: {},
-  //             },
-  //             {
-  //               type_id: "li",
-  //               selector_id: "eebwakgj",
-  //               children: [
-  //                 {
-  //                   type_id: "base_text",
-  //                   selector_id: "oipsenad",
-  //                   children: [],
-  //                   attributes: { content: "saturn", text_color: null },
-  //                 },
-  //               ],
-  //               attributes: {},
-  //             },
-  //           ],
-  //           attributes: {},
-  //         },
-  //       ],
-  //       attributes: {},
-  //     },
-  //     {
-  //       type_id: "div",
-  //       selector_id: "vagmtdzs",
-  //       children: [
-  //         {
-  //           type_id: "p",
-  //           selector_id: "lqgoglmn",
-  //           children: [
-  //             {
-  //               type_id: "base_text",
-  //               selector_id: "ckgkcqha",
-  //               children: [],
-  //               attributes: { content: "I love the galaxy. ", text_color: null },
-  //             },
-  //             {
-  //               type_id: "base_text",
-  //               selector_id: "qfvkconl",
-  //               children: [],
-  //               attributes: { content: "pluto", text_color: null },
-  //             },
-  //           ],
-  //           attributes: {},
-  //         },
-  //       ],
-  //       attributes: {},
-  //     },
-  //   ],
-  // }
-
-  const initial_val = {
-    type_id: "div",
-    children: [
-      {
-        type_id: "section",
-        children: [
-          {
-            type_id: "h2",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: "YouTube version of this Post", text_color: null },
-                selector_id: "qqglxnco",
-              },
-            ],
-            attributes: {},
-            selector_id: "kxfvkedb",
-          },
-          {
-            type_id: "youtube_video",
-            children: [],
-            attributes: { video_id: "IKuk_JJkIWk", is_dark_theme: null },
-            selector_id: "tjcehxeb",
-          },
-        ],
-        attributes: {},
-        selector_id: "tajkrrsj",
-      },
-      {
-        type_id: "section",
-        children: [
-          {
-            type_id: "h2",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: "Customize Site", text_color: null },
-                selector_id: "vyhslkus",
-              },
-            ],
-            attributes: {},
-            selector_id: "eokuzawt",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: "This guide largely builds off of the ", text_color: null },
-                selector_id: "lvozlxpc",
-              },
-              {
-                type_id: "link",
-                children: [],
-                attributes: {
-                  href: "https://www.contibase.com/blog/quick-start-guide",
-                  text_color: null,
-                  display_text: "Quick Start Guide",
-                  is_show_preview: "Quick Start Guide",
-                },
-                selector_id: "nhihtsqe",
-              },
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content: ". If you haven't seen that, start there and then come back to this part.",
-                  text_color: null,
-                },
-                selector_id: "zyyxwumf",
-              },
-            ],
-            attributes: {},
-            selector_id: "rpetxxbn",
-          },
-        ],
-        attributes: {},
-        selector_id: "ehkvhkwa",
-      },
-      {
-        type_id: "section",
-        children: [
-          {
-            type_id: "h2",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: "Make your Brand Icon", text_color: null },
-                selector_id: "vmykssyg",
-              },
-            ],
-            attributes: {},
-            selector_id: "aycvrubd",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content:
-                    "Keep it simple. Use 1-3 colors and a few shapes. Don't include text in the icon. This will result in better viewing from a distance because it will often be used in small areas such as a browser tab. ",
-                  text_color: null,
-                },
-                selector_id: "ncuqmdzu",
-              },
-            ],
-            attributes: {},
-            selector_id: "qpyzehoj",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: "Use the ", text_color: null },
-                selector_id: "xlxorjvl",
-              },
-              {
-                type_id: "link",
-                children: [],
-                attributes: {
-                  href: "https://www.contibase.com/tools/image-generator",
-                  text_color: null,
-                  display_text: "Contibase Image Generator",
-                  is_show_preview: "Contibase Image Generator",
-                },
-                selector_id: "bdhqknan",
-              },
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content:
-                    ' to generate an icon image. You can try something like "Make a simple, flat SVG icon for my site about ________. Keep it very simple. A flat SVG with 1-3 colors and 1-3 shapes. Use a white background."',
-                  text_color: null,
-                },
-                selector_id: "agoyrhdq",
-              },
-            ],
-            attributes: {},
-            selector_id: "rxajadec",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content: "Crop into a square icon image with slim padding. Download the image. ",
-                  text_color: null,
-                },
-                selector_id: "lrbjyzss",
-              },
-            ],
-            attributes: {},
-            selector_id: "wklukwyf",
-          },
-        ],
-        attributes: {},
-        selector_id: "ediedjta",
-      },
-      {
-        type_id: "section",
-        children: [
-          {
-            type_id: "h2",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: "Turn your Icon Image into an SVG", text_color: null },
-                selector_id: "yeczsxvq",
-              },
-            ],
-            attributes: {},
-            selector_id: "hrynnlcn",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: "Switch to the ", text_color: null },
-                selector_id: "kgupnngr",
-              },
-              {
-                type_id: "link",
-                children: [],
-                attributes: {
-                  href: "https://www.contibase.com/tools/image-to-svg",
-                  text_color: null,
-                  display_text: "Contibase Image to SVG",
-                  is_show_preview: "Contibase Image to SVG",
-                },
-                selector_id: "evdwsopr",
-              },
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content:
-                    " tool and convert to a SVG. Alternatively, if you are graphically skilled you can draw over the image and create the SVG yourself in a tool like ",
-                  text_color: null,
-                },
-                selector_id: "vvktyfjf",
-              },
-              {
-                type_id: "link",
-                children: [],
-                attributes: {
-                  href: "https://affinity.serif.com/en-us/designer/",
-                  text_color: null,
-                  display_text: "Affinity Designer",
-                  is_show_preview: "Affinity Designer",
-                },
-                selector_id: "gzsqfwtr",
-              },
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: ".", text_color: null },
-                selector_id: "fokevalf",
-              },
-            ],
-            attributes: {},
-            selector_id: "hendabql",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content:
-                    'Export your design as an SVG. In the export options select "flatten" if its unchecked. And check viewbox. Optimize your SVG code using ',
-                  text_color: null,
-                },
-                selector_id: "endxliqk",
-              },
-              {
-                type_id: "link",
-                children: [],
-                attributes: {
-                  href: "https://www.contibase.com/tools/svg-optimizer",
-                  text_color: null,
-                  display_text: "SVG Optimizer",
-                  is_show_preview: "SVG Optimizer",
-                },
-                selector_id: "njfzxryi",
-              },
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content: ". Delete any backgrounds and add a new, clean one in the editor.",
-                  text_color: null,
-                },
-                selector_id: "tusmvxzf",
-              },
-            ],
-            attributes: {},
-            selector_id: "uoeivoif",
-          },
-        ],
-        attributes: { padding: 0, border_color: null, border_radius: 0, background_color: null },
-        selector_id: "hbqkjhhy",
-      },
-      {
-        type_id: "section",
-        children: [
-          {
-            type_id: "h2",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: "Generate Favicons", text_color: null },
-                selector_id: "iskvhbcd",
-              },
-            ],
-            attributes: {},
-            selector_id: "utqydrdm",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: "Go to the ", text_color: null },
-                selector_id: "rhlxlevd",
-              },
-              {
-                type_id: "link",
-                children: [],
-                attributes: {
-                  href: "https://www.contibase.com/tools/favicon-generator",
-                  text_color: null,
-                  display_text: "Favicon Generator",
-                  is_show_preview: "Favicon Generator",
-                },
-                selector_id: "thyljaur",
-              },
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content:
-                    '. Paste your <svg>...</svg> code in. (Make sure there is a <rect> background with an id starting with "bg-"). Type your brand name and generate the favicons. This also generates other useful media such as thumbnails and useful icon images.',
-                  text_color: null,
-                },
-                selector_id: "xfitwoqu",
-              },
-            ],
-            attributes: {},
-            selector_id: "pusldsji",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content: "Download your favicons. Drag all files into the /static folder and overwrite the defaults.",
-                  text_color: null,
-                },
-                selector_id: "tgejyjij",
-              },
-            ],
-            attributes: {},
-            selector_id: "bicqwggm",
-          },
-        ],
-        attributes: {},
-        selector_id: "ekkurnwd",
-      },
-      {
-        type_id: "section",
-        children: [
-          {
-            type_id: "h2",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: "Fix app.html and Website Logo", text_color: null },
-                selector_id: "ryhnqolk",
-              },
-            ],
-            attributes: {},
-            selector_id: "bfispmyg",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: "Back in your project in VS Code, update ", text_color: null },
-                selector_id: "euxxfcpo",
-              },
-              {
-                type_id: "code_inline",
-                children: [],
-                attributes: { color: null, content: "src/lib/components/Logo/index.svelte" },
-                selector_id: "yklgwlfi",
-              },
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content: " to use your new logo. Paste the generated component from the favicon generator.",
-                  text_color: null,
-                },
-                selector_id: "ahjxjyfm",
-              },
-            ],
-            attributes: {},
-            selector_id: "xlxjlyom",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content: "Go to your app.html and paste the generated version from the Favicon Generator.",
-                  text_color: null,
-                },
-                selector_id: "fcbwdhkz",
-              },
-            ],
-            attributes: {},
-            selector_id: "irwehmuw",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: "Go to ", text_color: null },
-                selector_id: "afiisndj",
-              },
-              {
-                type_id: "code_inline",
-                children: [],
-                attributes: { content: "src/routes/+layout.svelte" },
-                selector_id: "blvvjzgm",
-              },
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content:
-                    '. Scroll down to the <style> CSS and find   :root {\n    --primary-c: var(--c10);\n    --primary-h: var(--h18);\n  } and change the number in "--primary-h: var(--h18);" to a number 0-24 that matches your brands primary hue.',
-                  text_color: null,
-                },
-                selector_id: "itdiqwxz",
-              },
-            ],
-            attributes: {},
-            selector_id: "psuhvlcm",
-          },
-        ],
-        attributes: {},
-        selector_id: "rpsvmmsm",
-      },
-      {
-        type_id: "section",
-        children: [
-          {
-            type_id: "h2",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: "Add Icon and Full Logo to Contibase", text_color: null },
-                selector_id: "ttrweabn",
-              },
-            ],
-            attributes: {},
-            selector_id: "ltpaxcei",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content:
-                    "Go to contibase.com/settings and click branding. Use the favicon.webp file for the icon. The for the full logo use full_logo.webp. This will be used at the top of emails you send when toggled on in the page.",
-                  text_color: null,
-                },
-                selector_id: "pnhuobtu",
-              },
-            ],
-            attributes: {},
-            selector_id: "qovvxzdm",
-          },
-        ],
-        attributes: {},
-        selector_id: "lffhdqof",
-      },
-      {
-        type_id: "section",
-        children: [
-          {
-            type_id: "h2",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: "Project Structure & Stack", text_color: null },
-                selector_id: "zrxwzrnb",
-              },
-            ],
-            attributes: {},
-            selector_id: "sryywfso",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: "Your site uses ", text_color: null },
-                selector_id: "ybajubdj",
-              },
-              {
-                type_id: "link",
-                children: [],
-                attributes: {
-                  href: "https://svelte.dev/docs/kit/introduction",
-                  text_color: null,
-                  display_text: "SvelteKit",
-                  is_show_preview: "SvelteKit",
-                },
-                selector_id: "nqecfvfe",
-              },
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: " along with the ", text_color: null },
-                selector_id: "hxngmmfu",
-              },
-              {
-                type_id: "link",
-                children: [],
-                attributes: {
-                  href: "https://www.sveltekit-ui.com",
-                  text_color: null,
-                  display_text: "Sveltekit-UI",
-                  is_show_preview: "Sveltekit-UI",
-                },
-                selector_id: "zrbadtzz",
-              },
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content:
-                    " component library. At this point you'll need to get into the coding side of things a bit. Use your resources and chip away a little progress each day. Ask AI for help with any questions. Keep in mind some AI likes to use old svelte, so make sure to use svelte 5 (the latest version as of 2025) if you start using AI.",
-                  text_color: null,
-                },
-                selector_id: "bsoqgbyf",
-              },
-            ],
-            attributes: {},
-            selector_id: "ybzrdskl",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content: "It's kind of experimental at the moment, but for building your components this tool, ",
-                  text_color: null,
-                },
-                selector_id: "rdbjmewj",
-              },
-              {
-                type_id: "link",
-                children: [],
-                attributes: {
-                  href: "https://www.contibase.com/code_generator",
-                  text_color: null,
-                  display_text: "SvelteKit-UI Code Generator",
-                  is_show_preview: "SvelteKit-UI Code Generator",
-                },
-                selector_id: "cpnybkoz",
-              },
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content:
-                    ", may help you get an idea for how I like structuring my code. The concept is inspired from Object-Oriented Programming, talks by Alan Kay, and other things over time. ",
-                  text_color: null,
-                },
-                selector_id: "laawbzfg",
-              },
-            ],
-            attributes: {},
-            selector_id: "tjddadxe",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content:
-                    'Building "managers" for each component with logic encapsulated within, exposing state and methods, leads to a clean code structure where all logic can be assembled into one parent manager at the root of each +page.svelte. The manager is instantiated on page load in the <script> tag and is passed as a manager prop into the HTML. This avoids "prop drilling" and deeply nested bindings. ',
-                  text_color: null,
-                },
-                selector_id: "lkpgxnua",
-              },
-            ],
-            attributes: {},
-            selector_id: "winpozaz",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content:
-                    "You are free to write code in any way you find appealing. You are in charge. I am just sharing the way I've found to make the most sense.",
-                  text_color: null,
-                },
-                selector_id: "hnochyxt",
-              },
-            ],
-            attributes: {},
-            selector_id: "ulfeqmfv",
-          },
-        ],
-        attributes: { padding: 0, border_color: null, border_radius: 0.5, background_color: null },
-        selector_id: "qrkbbsqr",
-      },
-      {
-        type_id: "section",
-        children: [
-          {
-            type_id: "h2",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: "Publish Your Live Website", text_color: null },
-                selector_id: "ddiwhcra",
-              },
-            ],
-            attributes: {},
-            selector_id: "xqnncyby",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: "If you havent already, create an account on ", text_color: null },
-                selector_id: "bhxscmfq",
-              },
-              {
-                type_id: "link",
-                children: [],
-                attributes: {
-                  href: "https://vercel.com",
-                  text_color: null,
-                  display_text: "Vercel",
-                  is_show_preview: "Vercel",
-                },
-                selector_id: "ababkome",
-              },
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content:
-                    ". If you already bought your domain on Vercel, even better. You can also transfer your domain purchased elsewhere to Vercel. I just like things as simple as possible and find keeping everything on Vercel to be best.",
-                  text_color: null,
-                },
-                selector_id: "elgvajqa",
-              },
-            ],
-            attributes: {},
-            selector_id: "xygicvcv",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content:
-                    'In Vercel connect to your Github account and set your "main" branch to be used in production. Connect your domain name to this deployment. Anytime you push to main you will automatically trigger a build and you will see on your live website a couple minutes later pending no errors.',
-                  text_color: null,
-                },
-                selector_id: "myafcruh",
-              },
-            ],
-            attributes: {},
-            selector_id: "txsgrcrz",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content:
-                    "Vercel Analytics is already configured in the code but you'll need to toggle on that feature in your Vercel Dashboard. You'll also want to copy the environment variables we used in the .env file and paste them in the Vercel project settings in the Environment variables page.",
-                  text_color: null,
-                },
-                selector_id: "bnjdfrjn",
-              },
-            ],
-            attributes: {},
-            selector_id: "wpgwzymz",
-          },
-        ],
-        attributes: {},
-        selector_id: "bejqtxts",
-      },
-      {
-        type_id: "section",
-        children: [
-          {
-            type_id: "h2",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: "Check Final Example Tutorial Code", text_color: null },
-                selector_id: "wkhevkrc",
-              },
-            ],
-            attributes: {},
-            selector_id: "ysjyhdtn",
-          },
-          {
-            type_id: "p",
-            children: [
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content: "The live version of the code from this tutorial project can be found at ",
-                  text_color: null,
-                },
-                selector_id: "wxmnsdde",
-              },
-              {
-                type_id: "link",
-                children: [],
-                attributes: {
-                  href: "https://github.com/upppllc/survivorsnuff",
-                  text_color: null,
-                  display_text: "Live Github Code",
-                  is_show_preview: "Live Github Code",
-                },
-                selector_id: "asimpyjl",
-              },
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: {
-                  content: ". It includes changes beyond this stage of the tutorial. The live site is ",
-                  text_color: null,
-                },
-                selector_id: "zlfmfzwr",
-              },
-              {
-                type_id: "link",
-                children: [],
-                attributes: {
-                  href: "https://www.survivorsnuff.com",
-                  text_color: null,
-                  display_text: "survivorsnuff.com",
-                  is_show_preview: "survivorsnuff.com",
-                },
-                selector_id: "xbpnjaoo",
-              },
-              {
-                type_id: "base_text",
-                children: [],
-                attributes: { content: ".", text_color: null },
-                selector_id: "alzekgmb",
-              },
-            ],
-            attributes: {},
-            selector_id: "idfqxmgg",
-          },
-        ],
-        attributes: {},
-        selector_id: "yrbajwld",
-      },
-    ],
-    attributes: {},
-    selector_id: "qtfdezhp",
-  }
-
-  let content_input_manager = $state(null)
-  content_input_manager = create_content_input_manager({
-    val: initial_val,
-    // storage_path: "https://www.contibase.com/api/v1/storage/{storage_id}",
-    // storage: account_storage,
-    storage_default_folder_path: ["pages"],
-    mapkit_js_token: PUBLIC_APPLE_MAPKIT_JS_API_KEY,
-    definition_stack: [{ variables: variables_json_manager?.val }],
-    on_event: (input) => {
-      console.log("on_event00", input)
-      const res = set_definition_stack(
-        input,
-        [{ variables: variables_json_manager?.val }],
-        content_input_manager.pass_event_down
-      )
-      variables_json_manager.set_val(res?.definition_stack)
-      console.log("on_event01", res?.definition_stack)
-      return res
-    },
-  })
-</script>
-
-<div>
-  <!-- <h4>variables data type</h4> -->
-  <!-- <DataTypeInput manager={data_type_input_manager} /> -->
-  <div style="display: flex; gap: 1rem;">
-    <h4>Variables</h4>
-    <Json manager={variables_json_manager} />
-  </div>
-  <h4>Example</h4>
-  <ContentInput manager={content_input_manager} />
-</div>