sveltekit-ui 1.1.16 → 1.1.17

package/dist/Components/ContentInput/AttributesInput/index.svelte.js

@@ -1,1436 +0,0 @@
-import { create_popover_manager } from "../../Popover/index.svelte.js"
-import { create_button_manager } from "../../Button/index.svelte.js"
-import { create_dropdown_manager } from "../../Dropdown/index.svelte.js"
-import { create_text_input_manager } from "../../TextInput/index.svelte.js"
-import { create_time_input_manager } from "../../TimeInput/index.svelte.js"
-import { create_color_input_manager } from "../../ColorInput/index.svelte.js"
-import { create_cron_input_manager } from "../../CronInput/index.svelte.js"
-import { create_slider_manager } from "../../Slider/index.svelte.js"
-import { create_checkbox_manager } from "../../Checkbox/index.svelte.js"
-import { create_icon_input_manager } from "../../IconInput/index.svelte.js"
-import { create_location_input_manager } from "../../LocationInput/index.svelte.js"
-import { create_slider_config_manager } from "./CustomConfig/Slider/index.svelte.js"
-import { create_number_config_manager } from "./CustomConfig/Number/index.svelte.js"
-import { create_text_input_config_manager } from "./CustomConfig/TextInput/index.svelte.js"
-import { create_image_config_manager } from "./CustomConfig/Image/index.svelte.js"
-import { create_audio_config_manager } from "./CustomConfig/Audio/index.svelte.js"
-import { create_qr_config_manager } from "./CustomConfig/Qr/index.svelte.js"
-import { create_table_advanced_config_manager } from "./CustomConfig/TableAdvanced/index.svelte.js"
-import { create_dropdown_config_manager } from "./CustomConfig/Dropdown/index.svelte.js"
-import { create_time_input_config_manager } from "./CustomConfig/TimeInput/index.svelte.js"
-import { create_variable_path_input_manager } from "../../VariablePathInput/index.svelte.js"
-import { create_defined_type_input_manager } from "./DefinedTypeInput/index.svelte.js"
-import { node_types } from "../../../client/types/index.js"
-import { create_unique_id, is_deep_equal, set_closurable } from "../../../client/index.js"
-import { time_formats } from "../../TimeInput/index.js"
-
-export function create_attributes_input_manager(config) {
-  const id = create_unique_id(null, 20)
-
-  let popover_manager = $state(null)
-  let content_type = $state(null)
-  let attributes_manager = $state(null)
-  let finish_button_manager = $state(null)
-  let selector_id = $state(null)
-  let val_original = $state(null)
-  let defined_data_type = $state(null)
-
-  let val = $derived(attributes_manager?.val)
-  let has_changed = $derived(!is_deep_equal(val, val_original))
-
-  const align_dropdown_options = [
-    { key: null, name: "Stretch" },
-    { key: "center", name: "Center" },
-    { key: "start", name: "Start" },
-    { key: "end", name: "End" },
-    { key: "space-between", name: "Space Between" },
-    { key: "space-around", name: "Space Around" },
-    { key: "space-evenly", name: "Space Evenly" },
-  ]
-
-  function set_focused_selector_id(input) {
-    if (typeof config?.set_focused_selector_id == "function") {
-      config?.set_focused_selector_id(input)
-    }
-  }
-
-  function init(config) {
-    val_original = set_closurable(config?.val, null)
-    content_type = config?.content_type
-    defined_data_type = config?.defined_data_type
-    popover_manager = create_popover_manager({
-      header: config?.header ?? "Edit Attributes",
-      type: "panel",
-      target_width: 600,
-    })
-    if (content_type && node_types && node_types.hasOwnProperty(content_type)) {
-      if (content_type == "number") {
-        attributes_manager = create_number_config_manager({
-          val: config?.val,
-          get_defined_options: config?.get_defined_options,
-        })
-      } else if (content_type == "qr") {
-        attributes_manager = create_qr_config_manager({
-          val: config?.val,
-          get_defined_options: config?.get_defined_options,
-        })
-      } else if (content_type == "variable_path_input") {
-        attributes_manager = create_variable_path_input_manager({
-          val: config?.val,
-          get_defined_options: config?.get_defined_options,
-          on_finish: () => attributes_manager.close_popover(),
-        })
-      } else if (content_type == "table_advanced") {
-        attributes_manager = create_table_advanced_config_manager({
-          val: config?.val,
-          get_defined_options: config?.get_defined_options,
-        })
-      } else if (content_type == "dropdown") {
-        attributes_manager = create_dropdown_config_manager({
-          val: config?.val,
-          get_defined_options: config?.get_defined_options,
-        })
-      } else if (content_type == "slider") {
-        attributes_manager = create_slider_config_manager({
-          val: config?.val,
-          get_defined_options: config?.get_defined_options,
-        })
-      } else if (content_type == "time_input") {
-        attributes_manager = create_time_input_config_manager({
-          val: config?.val,
-          get_defined_options: config?.get_defined_options,
-        })
-      } else if (content_type == "time") {
-        let val_format_dropdown_manager = $state(null)
-        let val_time_input_manager = $state(
-          create_time_input_manager({
-            format: () => val_format_dropdown_manager?.val,
-            is_popover: true,
-            is_nullable: true,
-            val: config?.val?.val,
-          })
-        )
-        let val_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Val",
-            attribute_root_key: "val",
-            attribute_const_val: () => val_time_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        val_format_dropdown_manager = create_dropdown_manager({
-          label: "Format",
-          is_button_compressed: true,
-          val: config?.val?.format ?? "time_full",
-          options: Object.entries(time_formats).map(([key, val]) => ({ key: key, name: val?.name })),
-        })
-        let display_format_dropdown_manager = $state(
-          create_dropdown_manager({
-            label: "Display Format",
-            is_button_compressed: true,
-            val: config?.val?.display_format ?? "calendar_date",
-            options: [
-              { key: "raw", name: "Raw" },
-              { key: "time_ago", name: "Time Ago" },
-              { key: "calendar_date", name: "Calendar Date" },
-              { key: "default", name: "Default" },
-            ],
-          })
-        )
-        let text_color_color_input_manager = $state(
-          create_color_input_manager({
-            is_nullable: true,
-            val: config?.val?.text_color,
-          })
-        )
-        attributes_manager = {
-          val_time_input_manager: val_time_input_manager,
-          val_defined_type_input_manager: val_defined_type_input_manager,
-          val_format_dropdown_manager: val_format_dropdown_manager,
-          display_format_dropdown_manager: display_format_dropdown_manager,
-          text_color_color_input_manager: text_color_color_input_manager,
-          get val() {
-            return {
-              ...val_defined_type_input_manager?.val,
-              format: val_format_dropdown_manager?.val,
-              display_format: display_format_dropdown_manager?.val,
-              text_color: text_color_color_input_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "section") {
-        let background_color_color_input_manager = $state(
-          create_color_input_manager({
-            is_nullable: true,
-            val: config?.val?.background_color,
-          })
-        )
-        let background_color_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Background Color",
-            attribute_root_key: "background_color",
-            attribute_const_val: () => background_color_color_input_manager?.val,
-            attributes: config?.val?.background_color,
-          })
-        )
-        let border_color_color_input_manager = $state(
-          create_color_input_manager({
-            is_nullable: true,
-            val: config?.val?.border_color,
-          })
-        )
-        let border_color_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Border Color",
-            attribute_root_key: "border_color",
-            attribute_const_val: () => border_color_color_input_manager?.val,
-            attributes: config?.val?.border_color,
-          })
-        )
-        let border_radius_slider_manager = $state(
-          create_slider_manager({
-            min: 0,
-            max: 5,
-            step: 0.1,
-            val: config?.val?.border_radius ?? 0.5,
-          })
-        )
-        let border_radius_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Border Radius",
-            attribute_root_key: "border_radius",
-            attribute_const_val: () => border_radius_slider_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let padding_slider_manager = $state(
-          create_slider_manager({
-            min: 0,
-            max: 5,
-            step: 0.5,
-            val: config?.val?.padding ?? 0,
-          })
-        )
-        let padding_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Padding",
-            attribute_root_key: "padding",
-            attribute_const_val: () => padding_slider_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        attributes_manager = {
-          background_color_color_input_manager: background_color_color_input_manager,
-          background_color_defined_type_input_manager: background_color_defined_type_input_manager,
-          border_color_color_input_manager: border_color_color_input_manager,
-          border_color_defined_type_input_manager: border_color_defined_type_input_manager,
-          border_radius_slider_manager: border_radius_slider_manager,
-          border_radius_defined_type_input_manager: border_radius_defined_type_input_manager,
-          padding_slider_manager: padding_slider_manager,
-          padding_defined_type_input_manager: padding_defined_type_input_manager,
-          get val() {
-            return {
-              ...background_color_defined_type_input_manager?.val,
-              ...border_color_defined_type_input_manager?.val,
-              ...border_radius_defined_type_input_manager?.val,
-              ...padding_defined_type_input_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "figure") {
-        let caption_text_input_manager = $state(
-          create_text_input_manager({
-            is_nullable: true,
-            val: config?.val?.caption,
-            placeholder: "caption",
-          })
-        )
-        let caption_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Caption",
-            attribute_root_key: "caption",
-            attribute_const_val: () => caption_text_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        attributes_manager = {
-          caption_text_input_manager: caption_text_input_manager,
-          caption_defined_type_input_manager: caption_defined_type_input_manager,
-          get val() {
-            return {
-              ...caption_defined_type_input_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "div") {
-        let background_color_color_input_manager = $state(
-          create_color_input_manager({
-            is_nullable: true,
-            val: config?.val?.background_color,
-          })
-        )
-        let background_color_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Background Color",
-            attribute_root_key: "background_color",
-            attribute_const_val: () => background_color_color_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let border_color_color_input_manager = $state(
-          create_color_input_manager({
-            is_nullable: true,
-            val: config?.val?.border_color,
-          })
-        )
-        let border_color_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Border Color",
-            attribute_root_key: "border_color",
-            attribute_const_val: () => border_color_color_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let border_radius_slider_manager = $state(
-          create_slider_manager({
-            min: 0,
-            max: 5,
-            step: 0.1,
-            val: config?.val?.border_radius ?? 0.5,
-          })
-        )
-        let border_radius_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Border Radius",
-            attribute_root_key: "border_radius",
-            attribute_const_val: () => border_radius_slider_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let padding_slider_manager = $state(
-          create_slider_manager({
-            min: 0,
-            max: 5,
-            step: 0.5,
-            val: config?.val?.padding ?? 0,
-          })
-        )
-        let padding_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Padding",
-            attribute_root_key: "padding",
-            attribute_const_val: () => padding_slider_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let align_content_dropdown_manager = $state(
-          create_dropdown_manager({
-            options: align_dropdown_options,
-            is_button_compressed: true,
-            val: config?.val?.align_content ?? null,
-          })
-        )
-        let align_content_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Align Content",
-            attribute_root_key: "align_content",
-            attribute_const_val: () => align_content_dropdown_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let justify_content_dropdown_manager = $state(
-          create_dropdown_manager({
-            options: align_dropdown_options,
-            is_button_compressed: true,
-            val: config?.val?.justify_content ?? null,
-          })
-        )
-        let justify_content_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Justify Content",
-            attribute_root_key: "justify_content",
-            attribute_const_val: () => justify_content_dropdown_manager?.val,
-            attributes: config?.val,
-          })
-        )
-
-        let gap_slider_manager = $state(
-          create_slider_manager({
-            min: 0,
-            max: 5,
-            step: 0.1,
-            val: config?.val?.gap ?? 0,
-          })
-        )
-        let gap_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Gap",
-            attribute_root_key: "gap",
-            attribute_const_val: () => gap_slider_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        attributes_manager = {
-          background_color_color_input_manager: background_color_color_input_manager,
-          background_color_defined_type_input_manager: background_color_defined_type_input_manager,
-          border_color_color_input_manager: border_color_color_input_manager,
-          border_color_defined_type_input_manager: border_color_defined_type_input_manager,
-          border_radius_slider_manager: border_radius_slider_manager,
-          border_radius_defined_type_input_manager: border_radius_defined_type_input_manager,
-          padding_slider_manager: padding_slider_manager,
-          padding_defined_type_input_manager: padding_defined_type_input_manager,
-          align_content_dropdown_manager: align_content_dropdown_manager,
-          align_content_defined_type_input_manager: align_content_defined_type_input_manager,
-          justify_content_dropdown_manager: justify_content_dropdown_manager,
-          justify_content_defined_type_input_manager: justify_content_defined_type_input_manager,
-          gap_slider_manager: gap_slider_manager,
-          gap_defined_type_input_manager: gap_defined_type_input_manager,
-          get val() {
-            return {
-              ...background_color_defined_type_input_manager?.val,
-              ...border_color_defined_type_input_manager?.val,
-              ...border_radius_defined_type_input_manager?.val,
-              ...padding_defined_type_input_manager?.val,
-              ...align_content_defined_type_input_manager?.val,
-              ...justify_content_defined_type_input_manager?.val,
-              ...gap_defined_type_input_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "text_input") {
-        attributes_manager = create_text_input_config_manager({
-          get_defined_options: config?.get_defined_options,
-          val: config?.val,
-        })
-      } else if (content_type == "color_input") {
-        // attributes_manager = create_color_input_config_manager({
-        //   val: config?.val,
-        // })
-      } else if (content_type == "color") {
-        let val_color_input_manager = $state(
-          create_color_input_manager({
-            is_nullable: true,
-            val: config?.val,
-          })
-        )
-        let val_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Val",
-            attribute_root_key: "val",
-            attribute_const_val: () => val_color_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let is_show_details_checkbox_manager = $state(
-          create_checkbox_manager({
-            type: "toggle",
-            is_nullable: true,
-            val: config?.val?.is_show_details,
-          })
-        )
-        let is_show_details_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Is Show Details",
-            attribute_root_key: "is_show_details",
-            attribute_const_val: () => is_show_details_checkbox_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let size_slider_manager = $state(
-          create_slider_manager({
-            min: 2,
-            max: 30,
-            step: 0.1,
-            val: config?.val?.size ?? 2,
-          })
-        )
-        let size_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Size",
-            attribute_root_key: "size",
-            attribute_const_val: () => size_slider_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let border_radius_slider_manager = $state(
-          create_slider_manager({
-            min: 0,
-            max: 5,
-            step: 0.1,
-            val: config?.val?.border_radius ?? 0.5,
-          })
-        )
-        let border_radius_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Border Radius",
-            attribute_root_key: "border_radius",
-            attribute_const_val: () => border_radius_slider_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        attributes_manager = {
-          val_color_input_manager: val_color_input_manager,
-          val_defined_type_input_manager: val_defined_type_input_manager,
-          is_show_details_checkbox_manager: is_show_details_checkbox_manager,
-          is_show_details_defined_type_input_manager: is_show_details_defined_type_input_manager,
-          size_slider_manager: size_slider_manager,
-          size_defined_type_input_manager: size_defined_type_input_manager,
-          border_radius_slider_manager: border_radius_slider_manager,
-          border_radius_defined_type_input_manager: border_radius_defined_type_input_manager,
-          get val() {
-            return {
-              ...val_defined_type_input_manager?.val,
-              ...is_show_details_defined_type_input_manager?.val,
-              ...size_defined_type_input_manager?.val,
-              ...border_radius_defined_type_input_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "image") {
-        attributes_manager = create_image_config_manager({
-          storage: config?.storage,
-          storage_default_folder_path: config?.storage_default_folder_path,
-          storage_path: config?.storage_path,
-          val: config?.val,
-          get_defined_options: config?.get_defined_options,
-        })
-      } else if (content_type == "audio") {
-        attributes_manager = create_audio_config_manager({
-          storage: config?.storage,
-          storage_default_folder_path: config?.storage_default_folder_path,
-          storage_path: config?.storage_path,
-          val: config?.val,
-          get_defined_options: config?.get_defined_options,
-        })
-      } else if (
-        ["h1", "h2", "h3", "h4", "h5", "base_text", "em", "strong", "strong_em", "pre"].includes(content_type)
-      ) {
-        let content_text_input_manager = $state(
-          create_text_input_manager({
-            type: "text_area",
-            rows: 5,
-            is_nullable: true,
-            val: config?.val?.content,
-            placeholder: "content",
-          })
-        )
-        let content_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Content",
-            attribute_root_key: "content",
-            attribute_const_val: () => content_text_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let text_color_color_input_manager = $state(
-          create_color_input_manager({
-            is_nullable: true,
-            val: config?.val?.text_color,
-          })
-        )
-        let text_color_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Text Color",
-            attribute_root_key: "text_color",
-            attribute_const_val: () => text_color_color_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        attributes_manager = {
-          content_defined_type_input_manager: content_defined_type_input_manager,
-          content_text_input_manager: content_text_input_manager,
-          text_color_defined_type_input_manager: text_color_defined_type_input_manager,
-          text_color_color_input_manager: text_color_color_input_manager,
-          get val() {
-            return {
-              ...content_defined_type_input_manager?.val,
-              ...text_color_defined_type_input_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "code_inline") {
-        let content_text_input_manager = $state(
-          create_text_input_manager({
-            type: "text_area",
-            rows: 5,
-            is_nullable: true,
-            val: config?.val?.content,
-            placeholder: "content",
-          })
-        )
-        let content_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Content",
-            attribute_root_key: "content",
-            attribute_const_val: () => content_text_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let is_show_copy_button_checkbox_manager = $state(
-          create_checkbox_manager({
-            type: "toggle",
-            is_nullable: true,
-            val: config?.val?.is_show_copy_button,
-          })
-        )
-        let is_show_copy_button_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Is Show Copy Button",
-            attribute_root_key: "is_show_copy_button",
-            attribute_const_val: () => is_show_copy_button_checkbox_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let text_color_color_input_manager = $state(
-          create_color_input_manager({
-            is_nullable: true,
-            val: config?.val?.text_color,
-          })
-        )
-        let text_color_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Text Color",
-            attribute_root_key: "text_color",
-            attribute_const_val: () => text_color_color_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        attributes_manager = {
-          content_defined_type_input_manager: content_defined_type_input_manager,
-          content_text_input_manager: content_text_input_manager,
-          is_show_copy_button_defined_type_input_manager: is_show_copy_button_defined_type_input_manager,
-          is_show_copy_button_checkbox_manager: is_show_copy_button_checkbox_manager,
-          text_color_defined_type_input_manager: text_color_defined_type_input_manager,
-          text_color_color_input_manager: text_color_color_input_manager,
-          get val() {
-            return {
-              ...content_defined_type_input_manager?.val,
-              ...is_show_copy_button_defined_type_input_manager?.val,
-              ...text_color_defined_type_input_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "x_post") {
-        let post_id_text_input_manager = $state(
-          create_text_input_manager({
-            is_nullable: true,
-            val: config?.val?.post_id,
-            placeholder: "post id",
-          })
-        )
-        let post_id_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Post ID",
-            attribute_root_key: "post_id",
-            attribute_const_val: () => post_id_text_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let is_dark_theme_checkbox_manager = $state(
-          create_checkbox_manager({
-            type: "toggle",
-            val: config?.val?.is_dark_theme,
-          })
-        )
-        let is_dark_theme_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Is Dark Theme",
-            attribute_root_key: "is_dark_theme",
-            attribute_const_val: () => is_dark_theme_checkbox_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        attributes_manager = {
-          post_id_text_input_manager: post_id_text_input_manager,
-          post_id_defined_type_input_manager: post_id_defined_type_input_manager,
-          is_dark_theme_checkbox_manager: is_dark_theme_checkbox_manager,
-          is_dark_theme_defined_type_input_manager: is_dark_theme_defined_type_input_manager,
-          get val() {
-            return {
-              ...post_id_defined_type_input_manager?.val,
-              ...is_dark_theme_defined_type_input_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "youtube_video") {
-        let video_id_text_input_manager = $state(
-          create_text_input_manager({
-            is_nullable: true,
-            val: config?.val?.video_id,
-            placeholder: "video id",
-          })
-        )
-        let video_id_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Video ID",
-            attribute_root_key: "video_id",
-            attribute_const_val: () => video_id_text_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let is_dark_theme_checkbox_manager = $state(
-          create_checkbox_manager({
-            type: "toggle",
-            val: config?.val?.is_dark_theme,
-          })
-        )
-        let is_dark_theme_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Is Dark Theme",
-            attribute_root_key: "is_dark_theme",
-            attribute_const_val: () => is_dark_theme_checkbox_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        attributes_manager = {
-          video_id_text_input_manager: video_id_text_input_manager,
-          video_id_defined_type_input_manager: video_id_defined_type_input_manager,
-          is_dark_theme_checkbox_manager: is_dark_theme_checkbox_manager,
-          is_dark_theme_defined_type_input_manager: is_dark_theme_defined_type_input_manager,
-          get val() {
-            return {
-              ...video_id_defined_type_input_manager?.val,
-              ...is_dark_theme_defined_type_input_manager?.val,
-            }
-          },
-        }
-        // } else if (["int_literal", "float_literal", "bigint_literal"].includes(content_type)) {
-        //   let content_text_input_manager = $state(
-        //     create_text_input_manager({
-        //       type: "number",
-        //       val: typeof val?.content == "undefined" ? att_val?.default : val?.content,
-        //       placeholder: "content",
-        //     })
-        //   )
-        //   attributes_manager = {
-        //     content_text_input_manager: content_text_input_manager,
-        //     val: () => val,
-        //   }
-      } else if (content_type == "show_conditions") {
-        let is_run_serverside_checkbox_manager = $state(
-          create_checkbox_manager({
-            type: "toggle",
-            is_nullable: true,
-            val: config?.val?.is_run_serverside,
-          })
-        )
-        let is_run_serverside_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Is Run Serverside",
-            attribute_root_key: "is_run_serverside",
-            attribute_const_val: () => is_run_serverside_checkbox_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        attributes_manager = {
-          is_run_serverside_defined_type_input_manager: is_run_serverside_defined_type_input_manager,
-          is_run_serverside_checkbox_manager: is_run_serverside_checkbox_manager,
-          get val() {
-            return {
-              ...is_run_serverside_defined_type_input_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "show_conditions_item") {
-        let is_show_checkbox_manager = $state(
-          create_checkbox_manager({
-            type: "toggle",
-            is_nullable: true,
-            val: config?.val?.is_show,
-          })
-        )
-        let is_show_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Is Show",
-            attribute_root_key: "is_show",
-            attribute_const_val: () => is_show_checkbox_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        attributes_manager = {
-          is_show_defined_type_input_manager: is_show_defined_type_input_manager,
-          is_show_checkbox_manager: is_show_checkbox_manager,
-          get val() {
-            return {
-              ...is_show_defined_type_input_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "checkbox") {
-        // name, on_val, off_val, is_read_only
-        let val_checkbox_manager = $state(
-          create_checkbox_manager({
-            type: "toggle",
-            is_nullable: true,
-            val: config?.val,
-          })
-        )
-        let val_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Val",
-            attribute_root_key: "val",
-            attribute_const_val: () => val_checkbox_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let type_dropdown_manager = $state(
-          create_dropdown_manager({
-            is_nullable: true,
-            val: config?.val?.type,
-            is_button_compressed: true,
-            options: [
-              { key: "checkbox", name: "Checkbox" },
-              { key: "toggle", name: "Toggle" },
-            ],
-          })
-        )
-        let type_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Type",
-            attribute_root_key: "type",
-            attribute_const_val: () => type_dropdown_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let size_slider_manager = $state(
-          create_slider_manager({
-            is_nullable: true,
-            val: config?.val?.size,
-            min: 0.5,
-            max: 10,
-            step: 0.1,
-          })
-        )
-        let size_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Size",
-            attribute_root_key: "size",
-            attribute_const_val: () => size_slider_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let color_input_manager = $state(
-          create_color_input_manager({
-            is_nullable: true,
-            val: config?.val?.color,
-          })
-        )
-        let color_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Color",
-            attribute_root_key: "color",
-            attribute_const_val: () => color_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        attributes_manager = {
-          val_defined_type_input_manager: val_defined_type_input_manager,
-          val_checkbox_manager: val_checkbox_manager,
-          type_dropdown_manager: type_dropdown_manager,
-          type_defined_type_input_manager: type_defined_type_input_manager,
-          size_slider_manager: size_slider_manager,
-          size_defined_type_input_manager: size_defined_type_input_manager,
-          color_defined_type_input_manager: color_defined_type_input_manager,
-          color_input_manager: color_input_manager,
-          get val() {
-            return {
-              ...val_defined_type_input_manager?.val,
-              ...type_defined_type_input_manager?.val,
-              ...size_defined_type_input_manager?.val,
-              ...color_defined_type_input_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "code") {
-        let content_text_input_manager = $state(
-          create_text_input_manager({
-            type: "text_area",
-            rows: 5,
-            is_nullable: true,
-            val: config?.val?.content,
-            placeholder: "content",
-          })
-        )
-        let content_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Content",
-            attribute_root_key: "content",
-            attribute_const_val: () => content_text_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let language_text_input_manager = $state(
-          create_text_input_manager({
-            is_nullable: true,
-            val: config?.val?.language,
-            placeholder: "e.g. JSON",
-          })
-        )
-        let language_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Language",
-            attribute_root_key: "language",
-            attribute_const_val: () => language_text_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        attributes_manager = {
-          content_text_input_manager: content_text_input_manager,
-          content_defined_type_input_manager: content_defined_type_input_manager,
-          language_text_input_manager: language_text_input_manager,
-          language_defined_type_input_manager: language_defined_type_input_manager,
-          get val() {
-            return {
-              ...content_defined_type_input_manager?.val,
-              ...language_defined_type_input_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "json") {
-        let val_text_input_manager = $state(
-          create_text_input_manager({
-            type: "text_area",
-            rows: 5,
-            is_nullable: true,
-            val: config?.val?.val,
-            placeholder: "val",
-          })
-        )
-        let val_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Val",
-            attribute_root_key: "val",
-            attribute_const_val: () => val_text_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let is_show_buttons_checkbox_manager = $state(
-          create_checkbox_manager({
-            type: "toggle",
-            label: "Is Show Buttons",
-            val: config?.val?.is_show_buttons,
-          })
-        )
-        let is_edit_mode_buttons_checkbox_manager = $state(
-          create_checkbox_manager({
-            type: "toggle",
-            label: "Is Edit Mode",
-            val: config?.val?.is_edit_mode,
-          })
-        )
-        let is_popover_checkbox_manager = $state(
-          create_checkbox_manager({
-            type: "toggle",
-            label: "Is Popover",
-            val: config?.val?.is_popover,
-          })
-        )
-        let is_inline_checkbox_manager = $state(
-          create_checkbox_manager({
-            type: "toggle",
-            label: "Is Inline",
-            val: config?.val?.is_inline,
-          })
-        )
-        attributes_manager = {
-          val_text_input_manager: val_text_input_manager,
-          val_defined_type_input_manager: val_defined_type_input_manager,
-          is_show_buttons_checkbox_manager: is_show_buttons_checkbox_manager,
-          is_edit_mode_buttons_checkbox_manager: is_edit_mode_buttons_checkbox_manager,
-          is_popover_checkbox_manager: is_popover_checkbox_manager,
-          is_inline_checkbox_manager: is_inline_checkbox_manager,
-          get val() {
-            return {
-              ...val_defined_type_input_manager?.val,
-              is_show_buttons: is_show_buttons_checkbox_manager?.val,
-              is_edit_mode: is_edit_mode_buttons_checkbox_manager?.val,
-              is_popover: is_popover_checkbox_manager?.val,
-              is_inline: is_inline_checkbox_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "location") {
-        let val_location_input_manager = $state(
-          create_location_input_manager({
-            val: config?.val?.val,
-            is_popover: false,
-          })
-        )
-        let val_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Val",
-            attribute_root_key: "val",
-            attribute_const_val: () => val_location_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let is_popover_checkbox_manager = $state(
-          create_checkbox_manager({
-            type: "toggle",
-            label: "Is Popover",
-            val: config?.val?.is_popover,
-          })
-        )
-        let is_inline_checkbox_manager = $state(
-          create_checkbox_manager({
-            type: "toggle",
-            label: "Is Inline",
-            val: config?.val?.is_inline,
-          })
-        )
-        attributes_manager = {
-          val_location_input_manager: val_location_input_manager,
-          val_defined_type_input_manager: val_defined_type_input_manager,
-          is_popover_checkbox_manager: is_popover_checkbox_manager,
-          is_inline_checkbox_manager: is_inline_checkbox_manager,
-          get val() {
-            return {
-              ...val_defined_type_input_manager?.val,
-              is_popover: is_popover_checkbox_manager?.val,
-              is_inline: is_inline_checkbox_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "link") {
-        let href_text_input_manager = $state(
-          create_text_input_manager({
-            is_nullable: true,
-            val: config?.val?.href,
-            placeholder: "href",
-          })
-        )
-        let href_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "href",
-            attribute_root_key: "href",
-            attribute_const_val: () => href_text_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let display_text_text_input_manager = $state(
-          create_text_input_manager({
-            is_nullable: true,
-            val: config?.val?.display_text,
-            placeholder: "Some Link Text",
-          })
-        )
-        let display_text_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Dispaly Text",
-            attribute_root_key: "display_text",
-            attribute_const_val: () => display_text_text_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let text_color_color_input_manager = $state(
-          create_color_input_manager({
-            is_nullable: true,
-            val: config?.val?.text_color,
-          })
-        )
-        let text_color_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Text Color",
-            attribute_root_key: "text_color",
-            attribute_const_val: () => text_color_color_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let is_show_preview_checkbox_manager = $state(
-          create_checkbox_manager({
-            type: "toggle",
-            is_nullable: true,
-            val: config?.val?.is_show_preview,
-          })
-        )
-        let is_show_preview_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Is Show Preview",
-            attribute_root_key: "is_show_preview",
-            attribute_const_val: () => display_text_text_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        attributes_manager = {
-          href_text_input_manager: href_text_input_manager,
-          href_defined_type_input_manager: href_defined_type_input_manager,
-          display_text_text_input_manager: display_text_text_input_manager,
-          display_text_defined_type_input_manager: display_text_defined_type_input_manager,
-          text_color_color_input_manager: text_color_color_input_manager,
-          text_color_defined_type_input_manager: text_color_defined_type_input_manager,
-          is_show_preview_checkbox_manager: is_show_preview_checkbox_manager,
-          is_show_preview_defined_type_input_manager: is_show_preview_defined_type_input_manager,
-          get val() {
-            return {
-              ...href_defined_type_input_manager?.val,
-              ...display_text_defined_type_input_manager?.val,
-              ...text_color_defined_type_input_manager?.val,
-              ...is_show_preview_defined_type_input_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "icon_input") {
-        let val_icon_input_manager = $state(null)
-        let is_icon_only_checkbox_manager = $state(
-          create_checkbox_manager({
-            type: "toggle",
-            is_nullable: true,
-            val: config?.val?.is_icon_only,
-            on_change: (input) => val_icon_input_manager.set_is_icon_only(input),
-          })
-        )
-        let is_icon_only_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Is Icon Only",
-            attribute_root_key: "is_icon_only",
-            attribute_const_val: () => is_icon_only_checkbox_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        val_icon_input_manager = create_icon_input_manager({
-          is_icon_only: is_icon_only_checkbox_manager?.val,
-          is_nullable: true,
-          val: config?.val?.val,
-        })
-        let val_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Val",
-            attribute_root_key: "val",
-            attribute_const_val: () => val_icon_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        attributes_manager = {
-          is_icon_only_checkbox_manager: is_icon_only_checkbox_manager,
-          is_icon_only_defined_type_input_manager: is_icon_only_defined_type_input_manager,
-          val_icon_input_manager: val_icon_input_manager,
-          val_defined_type_input_manager: val_defined_type_input_manager,
-          get val() {
-            return {
-              ...is_icon_only_defined_type_input_manager?.val,
-              ...val_defined_type_input_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "icon") {
-        let icon_id_icon_input_manager = $state(
-          create_icon_input_manager({
-            is_icon_only: true,
-            val: config?.val?.icon_id,
-          })
-        )
-        let icon_id_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Icon ID",
-            attribute_root_key: "icon_id",
-            attribute_const_val: () => icon_id_icon_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let icon_size_slider_manager = $state(
-          create_slider_manager({
-            is_nullable: true,
-            min: 1,
-            max: 30,
-            step: 1,
-            val: config?.val?.size,
-          })
-        )
-        let icon_size_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Size",
-            attribute_root_key: "size",
-            attribute_const_val: () => icon_size_slider_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let icon_sw_slider_manager = $state(
-          create_slider_manager({
-            is_nullable: true,
-            min: 1,
-            max: 100,
-            step: 1,
-            val: config?.val?.sw,
-          })
-        )
-        let icon_sw_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Stroke Width",
-            attribute_root_key: "sw",
-            attribute_const_val: () => icon_sw_slider_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let icon_deg_slider_manager = $state(
-          create_slider_manager({
-            is_nullable: true,
-            min: 0,
-            max: 360,
-            step: 1,
-            val: config?.val?.deg,
-          })
-        )
-        let icon_deg_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Degrees Turned",
-            attribute_root_key: "deg",
-            attribute_const_val: () => icon_deg_slider_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        let icon_color_color_input_manager = $state(
-          create_color_input_manager({
-            is_nullable: true,
-            val: config?.val?.color,
-          })
-        )
-        let icon_color_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Icon Color",
-            attribute_root_key: "color",
-            attribute_const_val: () => icon_color_color_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        // color_alt,fill
-        attributes_manager = {
-          icon_id_icon_input_manager: icon_id_icon_input_manager,
-          icon_id_defined_type_input_manager: icon_id_defined_type_input_manager,
-          icon_size_slider_manager: icon_size_slider_manager,
-          icon_size_defined_type_input_manager: icon_size_defined_type_input_manager,
-          icon_sw_slider_manager: icon_sw_slider_manager,
-          icon_sw_defined_type_input_manager: icon_sw_defined_type_input_manager,
-          icon_deg_slider_manager: icon_deg_slider_manager,
-          icon_deg_defined_type_input_manager: icon_deg_defined_type_input_manager,
-          icon_color_color_input_manager: icon_color_color_input_manager,
-          icon_color_defined_type_input_manager: icon_color_defined_type_input_manager,
-          get val() {
-            return {
-              ...icon_id_defined_type_input_manager?.val,
-              ...icon_size_defined_type_input_manager?.val,
-              ...icon_sw_defined_type_input_manager?.val,
-              ...icon_deg_defined_type_input_manager?.val,
-              ...icon_color_defined_type_input_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "cron_input") {
-        let val_cron_input_manager = $state(
-          create_cron_input_manager({
-            is_nullable: true,
-            val: config?.val?.val,
-          })
-        )
-        let val_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Val",
-            attribute_root_key: "val",
-            attribute_const_val: () => val_cron_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        attributes_manager = {
-          val_cron_input_manager: val_cron_input_manager,
-          val_defined_type_input_manager: val_defined_type_input_manager,
-          get val() {
-            return {
-              ...val_defined_type_input_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "cron") {
-        let val_cron_input_manager = $state(
-          create_cron_input_manager({
-            is_nullable: true,
-            val: config?.val?.val,
-          })
-        )
-        let val_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Val",
-            attribute_root_key: "val",
-            attribute_const_val: () => val_cron_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        attributes_manager = {
-          val_cron_input_manager: val_cron_input_manager,
-          val_defined_type_input_manager: val_defined_type_input_manager,
-          get val() {
-            return {
-              ...val_defined_type_input_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "loop") {
-        let iter_identifier_text_input_manager = $state(
-          create_text_input_manager({
-            label: "Iter Identifier",
-            val: config?.val?.iter_identifier,
-            placeholder: "some_key",
-          })
-        )
-        let val_input_manager = $state(
-          create_variable_path_input_manager({
-            val: config?.val?.val_from_variable_path,
-            get_defined_options: config?.get_defined_options,
-            on_finish: () => val_input_manager.close_popover(),
-          })
-        )
-        let join_text_text_input_manager = $state(
-          create_text_input_manager({
-            is_nullable: true,
-            val: config?.val?.join_text,
-            placeholder: "Join Text",
-          })
-        )
-        let join_text_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            defined_data_type: {
-              ...defined_data_type,
-              properties: {
-                ...defined_data_type?.properties,
-                [iter_identifier_text_input_manager?.val]: { type: "int_literal" },
-              },
-            },
-            label: "Join Text",
-            attribute_root_key: "join_text",
-            attribute_const_val: () => join_text_text_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        attributes_manager = {
-          val_input_manager: val_input_manager,
-          iter_identifier_text_input_manager: iter_identifier_text_input_manager,
-          join_text_text_input_manager: join_text_text_input_manager,
-          join_text_defined_type_input_manager: join_text_defined_type_input_manager,
-          get val() {
-            return {
-              iter_identifier: iter_identifier_text_input_manager?.val,
-              val_from_variable_path: val_input_manager?.val,
-              ...join_text_defined_type_input_manager?.val,
-            }
-          },
-        }
-      } else if (content_type == "slot") {
-        let val_text_input_manager = $state(
-          create_text_input_manager({
-            val: config?.val?.val,
-          })
-        )
-        let val_defined_type_input_manager = $state(
-          create_defined_type_input_manager({
-            get_defined_options: config?.get_defined_options,
-            label: "Val",
-            attribute_root_key: "val",
-            attribute_const_val: () => val_text_input_manager?.val,
-            attributes: config?.val,
-          })
-        )
-        attributes_manager = {
-          val_text_input_manager: val_text_input_manager,
-          val_defined_type_input_manager: val_defined_type_input_manager,
-          get val() {
-            return {
-              ...val_defined_type_input_manager?.val,
-            }
-          },
-        }
-      }
-    }
-    finish_button_manager = create_button_manager({
-      text: "Finish",
-      c: 1,
-      l: 2,
-      mt: 1,
-      // is_disabled: () => !has_changed, idk not updating on a change tbd
-      on_click: () => {
-        if (typeof config?.on_finish == "function") {
-          config?.on_finish(attributes_manager?.val)
-        }
-      },
-    })
-    selector_id = config?.selector_id ?? null
-  }
-
-  init(config)
-
-  return {
-    id,
-    get val() {
-      return val
-    },
-    get val_original() {
-      return val_original
-    },
-    get selector_id() {
-      return selector_id
-    },
-    get content_type() {
-      return content_type
-    },
-    get has_changed() {
-      return has_changed
-    },
-    get popover_manager() {
-      return popover_manager
-    },
-    get attributes_manager() {
-      return attributes_manager
-    },
-    get finish_button_manager() {
-      return finish_button_manager
-    },
-    init,
-    set_focused_selector_id,
-  }
-}