@code-coaching/vuetiful 0.1.4 → 0.2.0

package/dist/vuetiful.es.mjs

@@ -1,540 +1,247 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString, createCommentVNode, renderSlot, ref, readonly, onMounted, createElementVNode, resolveComponent, createVNode, withCtx, renderList, pushScopeId, popScopeId, useAttrs, unref, withDirectives } from "vue";
-var _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const _sfc_main$3 = defineComponent({
+import { defineComponent, useAttrs, openBlock, createBlock, resolveDynamicComponent, normalizeClass, unref, withCtx, createElementBlock, Fragment, createTextVNode, toDisplayString, createCommentVNode, renderSlot, provide, createElementVNode, ref, inject, mergeProps, computed, withDirectives, readonly, onMounted, resolveComponent, createVNode, renderList, pushScopeId, popScopeId } from "vue";
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "VButton",
   props: {
-    bgLight: {
-      type: String,
-      default: "bg-primary-50"
-    },
-    bgDark: {
-      type: String,
-      default: "bg-primary-900"
-    },
-    textOnLight: {
-      type: String,
-      default: "text-primary-900"
-    },
-    textOnDark: {
-      type: String,
-      default: "text-primary-50"
-    },
-    width: {
-      type: String,
-      default: "w-fit"
-    },
-    height: {
+    tag: {
       type: String,
-      default: "h-fit"
-    },
-    ring: {
-      type: String,
-      default: "ring-[1px] ring-primary-500/30"
-    },
-    rounded: {
-      type: String,
-      default: "rounded-token"
+      default: "button"
     },
     msg: {
       type: String
     }
   },
-  setup(props, { attrs }) {
-    const { currentMode: currentMode2, MODE: MODE2 } = useDarkMode();
-    const cTransition = `transition-all duration-[200ms]`;
-    const background = computed(() => {
-      return currentMode2.value === MODE2.LIGHT ? props.bgLight : props.bgDark;
-    });
-    const text = computed(() => {
-      return currentMode2.value === MODE2.LIGHT ? props.textOnLight : props.textOnDark;
-    });
-    const classes = computed(() => {
+  setup(__props) {
+    const attrs = useAttrs();
+    return (_ctx, _cache) => {
       var _a;
-      return `${cTransition} 
-      ${background.value} 
-      ${text.value} 
-      ${props.width} 
-      ${props.height} 
-      ${props.ring} 
-      ${props.rounded} 
-      ${(_a = attrs.class) != null ? _a : ""}`;
-    });
-    return {
-      classes
+      return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
+        class: normalizeClass(`vuetiful-button btn border-token hover:cursor-pointer ${(_a = unref(attrs).class) != null ? _a : ""}`)
+      }, {
+        default: withCtx(() => [
+          __props.msg ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createTextVNode(toDisplayString(__props.msg), 1)
+          ], 64)) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class"]);
     };
   }
 });
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("button", {
-    class: normalizeClass(`cc-button btn ${_ctx.classes}`)
-  }, [
-    _ctx.msg ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-      createTextVNode(toDisplayString(_ctx.msg), 1)
-    ], 64)) : createCommentVNode("", true),
-    renderSlot(_ctx.$slots, "default")
-  ], 2);
-}
-var VButton = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2]]);
-var components = /* @__PURE__ */ Object.freeze({
-  __proto__: null,
-  [Symbol.toStringTag]: "Module",
-  VButton
-});
-var main = "";
-var tailwind = "";
-const MAGIC_NUM = 100;
-var MyConstants = /* @__PURE__ */ Object.freeze({
-  __proto__: null,
-  [Symbol.toStringTag]: "Module",
-  MAGIC_NUM
-});
-const usePlatform = () => {
-  const isBrowser2 = typeof window !== "undefined";
-  return {
-    isBrowser: isBrowser2
-  };
-};
-const { isBrowser: isBrowser$1 } = usePlatform();
-const MODE = {
-  LIGHT: true,
-  DARK: false
-};
-const modeOsPrefers = ref(MODE.DARK);
-const currentMode = ref(MODE.DARK);
-const modeUserPrefers = ref(void 0);
-const useDarkMode = () => {
-  const getModeOsPrefers = () => {
-    const prefersLightMode = window.matchMedia("(prefers-color-scheme: light)").matches;
-    setModeOsPrefers(prefersLightMode);
-    return prefersLightMode;
-  };
-  const getModeUserPrefers = () => {
-    if (isBrowser$1) {
-      const mode = localStorage.getItem("modeUserPrefers");
-      if (mode !== null)
-        modeUserPrefers.value = mode === "true";
-    }
-    return modeUserPrefers.value;
-  };
-  const getModeAutoPrefers = () => {
-    const os = getModeOsPrefers();
-    const user = getModeUserPrefers();
-    const modeValue = user !== void 0 ? user : os;
-    return modeValue;
-  };
-  const setModeOsPrefers = (value) => {
-    modeOsPrefers.value = value;
-    if (isBrowser$1) {
-      localStorage.setItem("modeOsPrefers", value.toString());
-    }
-  };
-  const setModeUserPrefers = (value) => {
-    modeUserPrefers.value = value;
-    if (isBrowser$1) {
-      localStorage.setItem("modeUserPrefers", value.toString());
-    }
-  };
-  const setModeCurrent = (value) => {
-    const elemHtmlClasses = document.documentElement.classList;
-    const classDark = "dark";
-    value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
-    currentMode.value = value;
-  };
-  const initializeMode = () => {
-    const mode = getModeAutoPrefers();
-    setModeCurrent(mode);
-  };
-  const autoModeWatcher = () => {
-    const mql = window.matchMedia("(prefers-color-scheme: light)");
-    const setMode = (value) => {
-      const elemHtmlClasses = document.documentElement.classList;
-      const classDark = `dark`;
-      value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
-      setModeCurrent(value);
-    };
-    setMode(mql.matches);
-    mql.onchange = () => {
-      setMode(mql.matches);
-    };
-  };
-  return {
-    modeOsPrefers: readonly(modeOsPrefers),
-    modeUserPrefers: readonly(modeUserPrefers),
-    currentMode: readonly(currentMode),
-    getModeOsPrefers,
-    getModeUserPrefers,
-    getModeAutoPrefers,
-    setModeUserPrefers,
-    setModeCurrent,
-    autoModeWatcher,
-    initializeMode,
-    MODE
-  };
-};
-const _sfc_main$2 = defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "VRail",
   props: {
-    bgLight: {
-      type: String,
-      default: "bg-surface-50"
-    },
-    bgDark: {
-      type: String,
-      default: "bg-surface-900"
-    },
-    textLight: {
+    active: {
       type: String,
-      default: "text-surface-50"
+      default: "bg-secondary-active-token"
     },
-    textDark: {
+    hover: {
       type: String,
-      default: "text-surface-900"
+      default: "hover:bg-secondary-hover-token"
     },
-    width: {
+    regionLead: {
       type: String,
-      default: "w-12"
-    },
-    height: {
-      type: String,
-      default: "h-6"
+      default: ""
     },
-    ring: {
+    regionDefault: {
       type: String,
-      default: "ring-[1px] ring-surface-500/30"
+      default: ""
     },
-    rounded: {
+    regionTrail: {
       type: String,
-      default: "rounded-token"
+      default: ""
     }
   },
-  setup(props, { attrs }) {
-    const { initializeMode, setModeCurrent, setModeUserPrefers, currentMode: currentMode2, MODE: MODE2 } = useDarkMode();
-    onMounted(() => {
-      initializeMode();
-    });
-    const cTransition = `transition-all duration-[200ms]`;
-    const cTrack = "cursor-pointer";
-    const cThumb = "aspect-square scale-[0.8] flex justify-center items-center";
-    const cIcon = "w-[70%] aspect-square";
-    const svgPath = {
-      sun: "M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z",
-      moon: "M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
-    };
-    const onToggleHandler = () => {
-      const toggle = !currentMode2.value;
-      setModeUserPrefers(toggle);
-      setModeCurrent(toggle);
-    };
-    const onKeyDown = (event) => {
-      if (["Enter", "Space"].includes(event.code)) {
-        event.preventDefault();
-        event.currentTarget.click();
-      }
-    };
-    const trackBg = computed(
-      () => currentMode2.value === MODE2.LIGHT ? props.bgLight : props.bgDark
-    );
-    const thumbBg = computed(
-      () => currentMode2.value === MODE2.LIGHT ? props.bgDark : props.bgLight
-    );
-    const thumbPosition = computed(
-      () => currentMode2.value === MODE2.LIGHT ? "translate-x-[100%]" : ""
-    );
-    const iconFill = computed(() => {
-      return currentMode2.value === MODE2.LIGHT ? props.textLight : props.textDark;
-    });
-    const classesTrack = computed(() => {
-      var _a;
-      return `${cTrack} ${cTransition} ${props.width} ${props.height} ${props.ring} ${props.rounded} ${trackBg.value} ${(_a = attrs.class) != null ? _a : ""}`;
-    });
-    const classesThumb = computed(
-      () => `${cThumb} ${cTransition} ${props.height} ${props.rounded} ${thumbBg.value} ${thumbPosition.value}`
-    );
-    const classesIcon = computed(() => `${cIcon}`);
-    return {
-      classesTrack,
-      classesThumb,
-      classesIcon,
-      svgPath,
-      onToggleHandler,
-      onKeyDown,
-      currentMode: currentMode2,
-      iconFill
+  setup(__props) {
+    const props = __props;
+    const attrs = useAttrs();
+    provide("active", props.active);
+    provide("hover", props.hover);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["v-rail", `grid h-full w-[70px] grid-rows-[auto_1fr_auto] gap-0 overflow-y-auto sm:w-20 ${unref(attrs).class || ""}`])
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(["v-bar-lead", __props.regionLead])
+        }, [
+          renderSlot(_ctx.$slots, "lead")
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(["v-bar-default", __props.regionDefault])
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(["v-bar-trail", __props.regionTrail])
+        }, [
+          renderSlot(_ctx.$slots, "trail")
+        ], 2)
+      ], 2);
     };
   }
 });
-const _hoisted_1$2 = ["aria-checked", "title"];
-const _hoisted_2$2 = ["d"];
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(`lightswitch-track ${_ctx.classesTrack}`),
-    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onToggleHandler && _ctx.onToggleHandler(...args)),
-    onKeydown: _cache[1] || (_cache[1] = (...args) => _ctx.onKeyDown && _ctx.onKeyDown(...args)),
-    "on:keyup": "",
-    "on:keypress": "",
-    role: "switch",
-    "aria-label": "Light Switch",
-    "aria-checked": _ctx.currentMode,
-    title: `Toggle ${_ctx.currentMode === false ? "Dark" : "Light"} Mode`,
-    tabindex: "0"
-  }, [
-    createElementVNode("div", {
-      class: normalizeClass(`lightswitch-thumb ${_ctx.classesThumb}`)
-    }, [
-      (openBlock(), createElementBlock("svg", {
-        class: normalizeClass(`lightswitch-icon ${_ctx.classesIcon} ${_ctx.iconFill}`),
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 512 512"
-      }, [
-        createElementVNode("path", {
-          fill: "currentColor",
-          d: _ctx.currentMode ? _ctx.svgPath.sun : _ctx.svgPath.moon
-        }, null, 8, _hoisted_2$2)
-      ], 2))
-    ], 2)
-  ], 42, _hoisted_1$2);
-}
-var DarkModeSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1]]);
-const { isBrowser } = usePlatform();
-const THEMES = {
-  VUETIFUL: "vuetiful",
-  ROCKET: "rocket",
-  SAHARA: "sahara",
-  SEAFOAM: "seafoam",
-  SEASONAL: "seasonal",
-  SKELETON: "skeleton",
-  VINTAGE: "vintage"
-};
-const builtInUrl = (name) => {
-  return `https://code-coaching.dev/vuetiful-themes/theme-${name}.css`;
-};
-const builtInThemes = [
-  { name: THEMES.VUETIFUL, url: builtInUrl(`${THEMES.VUETIFUL}-0.0.1`) },
-  { name: THEMES.ROCKET, url: builtInUrl(`${THEMES.ROCKET}`) },
-  { name: THEMES.SAHARA, url: builtInUrl(`${THEMES.SAHARA}`) },
-  { name: THEMES.SEAFOAM, url: builtInUrl(`${THEMES.SEAFOAM}`) },
-  { name: THEMES.SEASONAL, url: builtInUrl(`${THEMES.SEASONAL}`) },
-  { name: THEMES.SKELETON, url: builtInUrl(`${THEMES.SKELETON}`) },
-  { name: THEMES.VINTAGE, url: builtInUrl(`${THEMES.VINTAGE}`) }
-];
-const themes = ref([...builtInThemes]);
-const defaultTheme = THEMES.VUETIFUL;
-const chosenTheme = ref(defaultTheme);
-const useTheme = () => {
-  const setTheme = (name) => {
-    const theme = themes.value.find((t) => t.name === name);
-    if (!theme)
-      return;
-    if (isBrowser) {
-      localStorage.setItem("vuetiful-theme", theme.name);
-      document.body.setAttribute("data-theme", theme.name);
-    }
-  };
-  const initializeTheme = (callback) => {
-    if (isBrowser) {
-      const storedTheme = localStorage.getItem("vuetiful-theme");
-      if (storedTheme)
-        loadTheme(storedTheme, callback);
-      else
-        loadTheme(defaultTheme, callback);
-    }
-  };
-  const loadTheme = (themeName, callback) => {
-    let themeToLoad = themes.value.find((t) => t.name === themeName);
-    if (!themeToLoad)
-      themeToLoad = themes.value.find((t) => t.name === defaultTheme) || themes.value[0];
-    const theme = themeToLoad;
-    chosenTheme.value = theme.name;
-    const existingStyle = document.getElementById("theme");
-    let themeUrl = theme.url;
-    const link = document.createElement("link");
-    link.id = "theme";
-    link.href = themeUrl;
-    link.type = "text/css";
-    link.rel = "stylesheet";
-    link.onload = () => {
-      if (existingStyle)
-        existingStyle.remove();
-      setTheme(theme.name);
-      if (callback) {
-        callback();
-      }
-    };
-    const head = document.querySelector("head");
-    if (head)
-      head.appendChild(link);
-  };
-  const registerAllBuiltInThemes = () => {
-    return [...builtInThemes];
-  };
-  const registerTheme = (name, url) => {
-    return { url, name };
-  };
-  const overwriteThemes = (newThemes) => {
-    themes.value = [...newThemes];
-  };
+const selectedRailTile = ref("");
+const useRail = () => {
   return {
-    themes: readonly(themes),
-    chosenTheme: readonly(chosenTheme),
-    initializeTheme,
-    loadTheme,
-    THEMES,
-    overwriteThemes,
-    registerAllBuiltInThemes,
-    registerTheme
+    selectedRailTile
   };
 };
-var themeSwitcher_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$1 = defineComponent({
-  components: {
-    DarkModeSwitch,
-    VButton
-  },
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "VRailTile",
   props: {
-    bgLight: {
-      type: String,
-      default: "bg-surface-50"
-    },
-    bgDark: {
-      type: String,
-      default: "bg-surface-900"
-    },
-    textOnLight: {
-      type: String,
-      default: "text-surface-900"
-    },
-    textOnDark: {
+    value: {
       type: String,
-      default: "text-surface-50"
-    },
-    width: {
-      type: String,
-      default: "w-60"
+      default: ""
     },
-    height: {
+    tag: {
       type: String,
-      default: "max-h-64 lg:max-h-[500px]"
+      default: "button"
     },
-    ring: {
+    label: {
       type: String,
-      default: "ring-[1px] ring-surface-500/30"
-    },
-    rounded: {
-      type: String,
-      default: "rounded-token"
+      default: ""
     },
-    roundedContainer: {
+    regionIcon: {
       type: String,
-      default: "rounded-container-token"
+      default: ""
     },
-    buttonClasses: {
+    regionLabel: {
       type: String,
-      default: "w-24"
+      default: ""
     }
   },
-  setup(props, { attrs }) {
-    const { initializeTheme, loadTheme, themes: themes2, chosenTheme: chosenTheme2 } = useTheme();
-    const { currentMode: currentMode2, MODE: MODE2 } = useDarkMode();
-    const showPopup = ref(false);
-    onMounted(() => {
-      initializeTheme();
-    });
-    const cTransition = `transition-all duration-[200ms]`;
-    function onKeyDown(event) {
-      if (["Enter", "Space"].includes(event.code)) {
-        event.preventDefault();
-        event.currentTarget.click();
-      }
-    }
-    const background = computed(() => {
-      return currentMode2.value === MODE2.LIGHT ? props.bgLight : props.bgDark;
-    });
-    const text = computed(() => {
-      return currentMode2.value === MODE2.LIGHT ? props.textOnLight : props.textOnDark;
-    });
-    const classes = computed(() => {
-      var _a;
-      return `${cTransition} 
-      ${background.value} 
-      ${text.value} 
-      ${props.width} 
-      ${props.ring}
-      ${props.roundedContainer}
-      ${(_a = attrs.class) != null ? _a : ""}`;
-    });
-    const listClasses = computed(() => {
-      return `${cTransition} 
-      ${props.height}`;
-    });
-    const listItemClasses = computed(() => {
-      return `${cTransition} 
-      ${props.ring} 
-      ${props.rounded}`;
-    });
-    return {
-      onKeyDown,
-      loadTheme,
-      currentMode: currentMode2,
-      classes,
-      chosenTheme: chosenTheme2,
-      themes: themes2,
-      showPopup,
-      listClasses,
-      listItemClasses
+  emits: ["click"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const { selectedRailTile: selectedRailTile2 } = useRail();
+    const active = inject("active");
+    const hover = inject("hover");
+    const onClickHandler = (event) => {
+      if (!props.value)
+        return;
+      selectedRailTile2.value = props.value;
+      emit("click");
+    };
+    const onKeyHandler = (event) => {
+      if (!props.value)
+        return;
+      if (!["Enter", "Space"].includes(event.key))
+        return;
+      selectedRailTile2.value = props.value;
+      emit("click");
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        onClick: onClickHandler,
+        onKeydown: onKeyHandler
+      }, [
+        (openBlock(), createBlock(resolveDynamicComponent(__props.tag), mergeProps(unref(attrs), {
+          class: `app-rail-tile unstyled grid aspect-square w-full cursor-pointer place-content-center place-items-center space-y-1.5 ${unref(hover)} ${unref(selectedRailTile2) === __props.value ? `${unref(active)}` : ""} ${unref(attrs).class || ""}`
+        }), {
+          default: withCtx(() => [
+            _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(`app-rail-tile-icon ${__props.regionIcon}`)
+            }, [
+              renderSlot(_ctx.$slots, "default")
+            ], 2)) : createCommentVNode("", true),
+            __props.label ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass(`app-rail-tile-label text-center text-xs font-bold ${__props.regionLabel}`)
+            }, toDisplayString(__props.label), 3)) : createCommentVNode("", true)
+          ]),
+          _: 3
+        }, 16, ["class"]))
+      ], 32);
     };
   }
 });
-const _withScopeId = (n) => (pushScopeId("data-v-3283243a"), n = n(), popScopeId(), n);
-const _hoisted_1$1 = { class: "cc-theme-switcher" };
-const _hoisted_2$1 = { class: "space-y-4" };
-const _hoisted_3$1 = { class: "flex items-center justify-between" };
-const _hoisted_4 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("h6", null, "Mode", -1));
-const _hoisted_5 = { class: "flex flex-col gap-4" };
-const _hoisted_6 = ["onClick"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_VButton = resolveComponent("VButton");
-  const _component_DarkModeSwitch = resolveComponent("DarkModeSwitch");
-  return openBlock(), createElementBlock("div", _hoisted_1$1, [
-    createVNode(_component_VButton, {
-      class: normalizeClass(`cc-theme-switcher__button ${_ctx.buttonClasses}`),
-      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.showPopup = !_ctx.showPopup)
-    }, {
-      default: withCtx(() => [
-        createTextVNode(" Theme ")
-      ]),
-      _: 1
-    }, 8, ["class"]),
-    _ctx.showPopup ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      class: normalizeClass(["cc-theme-switcher__popup p-4 shadow-xl", _ctx.classes])
-    }, [
-      createElementVNode("div", _hoisted_2$1, [
-        createElementVNode("section", _hoisted_3$1, [
-          _hoisted_4,
-          createVNode(_component_DarkModeSwitch)
+const _hoisted_1$3 = { class: "vuetiful-shell-content flex h-full w-full flex-auto overflow-hidden" };
+const _sfc_main$3 = defineComponent({
+  __name: "VShell",
+  props: {
+    regionPage: { type: String, default: "" },
+    slotFixedHeader: { type: String, default: "z-10" },
+    slotSidebarLeft: { type: String, default: "w-auto" },
+    slotSidebarRight: { type: String, default: "w-auto" },
+    slotPageHeader: { type: String, default: "" },
+    slotPageContent: { type: String, default: "" },
+    slotPageFooter: { type: String, default: "" },
+    slotFixedFooter: { type: String, default: "" }
+  },
+  setup(__props) {
+    const attrs = useAttrs();
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(`vuetiful-shell flex h-full w-full flex-col overflow-hidden ${(_a = unref(attrs).class) != null ? _a : ""}`)
+      }, [
+        _ctx.$slots.fixedHeader ? (openBlock(), createElementBlock("header", {
+          key: 0,
+          class: normalizeClass(`vuetiful-fixed-header ${__props.slotFixedHeader}`)
+        }, [
+          renderSlot(_ctx.$slots, "fixedHeader")
+        ], 2)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_1$3, [
+          _ctx.$slots.sidebarLeft ? (openBlock(), createElementBlock("aside", {
+            key: 0,
+            class: normalizeClass(`vuetiful-sidebar-left overflow-y-auto overflow-x-hidden ${__props.slotSidebarLeft}`)
+          }, [
+            renderSlot(_ctx.$slots, "sidebarLeft")
+          ], 2)) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass(`vuetiful-page flex flex-1 flex-col overflow-x-hidden ${(_b = __props.regionPage) != null ? _b : ""}`)
+          }, [
+            _ctx.$slots.pageHeader ? (openBlock(), createElementBlock("header", {
+              key: 0,
+              class: normalizeClass(`vuetiful-page-header flex-none ${__props.slotPageHeader}`)
+            }, [
+              renderSlot(_ctx.$slots, "pageHeader", {}, () => [
+                createTextVNode("(slot:header)")
+              ])
+            ], 2)) : createCommentVNode("", true),
+            createElementVNode("main", {
+              class: normalizeClass(`vuetiful-page-content flex-auto ${__props.slotPageContent}`)
+            }, [
+              renderSlot(_ctx.$slots, "default")
+            ], 2),
+            _ctx.$slots.pageFooter ? (openBlock(), createElementBlock("footer", {
+              key: 1,
+              class: normalizeClass(`vuetiful-page-footer flex-none ${__props.slotPageFooter}`)
+            }, [
+              renderSlot(_ctx.$slots, "pageFooter", {}, () => [
+                createTextVNode("(slot:footer)")
+              ])
+            ], 2)) : createCommentVNode("", true)
+          ], 2),
+          _ctx.$slots.sidebarRight ? (openBlock(), createElementBlock("aside", {
+            key: 1,
+            class: normalizeClass(`vuetiful-sidebar-right flex-none overflow-y-auto overflow-x-hidden ${__props.slotSidebarRight}`)
+          }, [
+            renderSlot(_ctx.$slots, "sidebarRight")
+          ], 2)) : createCommentVNode("", true)
         ]),
-        createElementVNode("nav", {
-          class: normalizeClass(["list-nav -m-4 overflow-y-auto p-4", _ctx.listClasses])
+        _ctx.$slots.fixedFooter ? (openBlock(), createElementBlock("footer", {
+          key: 1,
+          class: normalizeClass(`vuetiful-fixed-footer ${__props.slotFixedFooter}`)
         }, [
-          createElementVNode("ul", _hoisted_5, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.themes, (theme, index2) => {
-              return openBlock(), createElementBlock("li", {
-                class: normalizeClass(["h-full w-full p-2 text-center capitalize hover:cursor-pointer hover:bg-primary-100 hover:text-primary-900", `${_ctx.listItemClasses} ${_ctx.chosenTheme === theme.name ? "bg-primary-50 text-primary-900" : "bg-surface-200 text-surface-900"}`]),
-                key: index2,
-                onClick: ($event) => _ctx.loadTheme(theme.name)
-              }, toDisplayString(theme.name), 11, _hoisted_6);
-            }), 128))
-          ])
-        ], 2)
-      ])
-    ], 2)) : createCommentVNode("", true)
-  ]);
-}
-var themeSwitcher = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render], ["__scopeId", "data-v-3283243a"]]);
+          renderSlot(_ctx.$slots, "fixedFooter")
+        ], 2)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+var components = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  [Symbol.toStringTag]: "Module",
+  VButton: _sfc_main$6,
+  VRail: _sfc_main$5,
+  VRailTile: _sfc_main$4,
+  VShell: _sfc_main$3
+});
+var main = "";
+var tailwind = "";
 var githubDark = "";
 var deepFreezeEs6 = { exports: {} };
 function deepFreeze(obj) {
@@ -46875,12 +46582,12 @@ const useHighlight = () => {
     highlight: highlight2
   };
 };
-const _hoisted_1 = { key: 0 };
-const _hoisted_2 = {
+const _hoisted_1$2 = { key: 0 };
+const _hoisted_2$2 = {
   class: /* @__PURE__ */ normalizeClass(`code-block-language`)
 };
-const _hoisted_3 = ["innerHTML"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _hoisted_3$1 = ["innerHTML"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "code-block",
   props: {
     language: {
@@ -46960,7 +46667,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return __props.language && __props.code ? (openBlock(), createElementBlock("div", _hoisted_1, [
+      return __props.language && __props.code ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
         createElementVNode("div", {
           class: normalizeClass(`code-block ${unref(classesBase)}`),
           "data-testid": "code-block"
@@ -46968,7 +46675,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createElementVNode("header", {
             class: normalizeClass(`code-block-header ${cHeader}`)
           }, [
-            createElementVNode("span", _hoisted_2, toDisplayString(languageFormatter(__props.language)), 1),
+            createElementVNode("span", _hoisted_2$2, toDisplayString(languageFormatter(__props.language)), 1),
             withDirectives((openBlock(), createElementBlock("button", {
               class: normalizeClass(`code-block-btn ${__props.button}`),
               onClick: _cache[0] || (_cache[0] = ($event) => onCopyClick())
@@ -46984,13 +46691,465 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createElementVNode("code", {
               class: normalizeClass(`code-block-code language-${__props.language}`),
               innerHTML: unref(highlight2)(props.code, props.language)
-            }, null, 10, _hoisted_3)
+            }, null, 10, _hoisted_3$1)
           ], 2)
         ], 2)
       ])) : createCommentVNode("", true);
     };
   }
 });
+const usePlatform = () => {
+  const isBrowser2 = typeof window !== "undefined";
+  return {
+    isBrowser: isBrowser2
+  };
+};
+const { isBrowser: isBrowser$1 } = usePlatform();
+const MODE = {
+  LIGHT: true,
+  DARK: false
+};
+const modeOsPrefers = ref(MODE.DARK);
+const currentMode = ref(MODE.DARK);
+const modeUserPrefers = ref(void 0);
+const useDarkMode = () => {
+  const getModeOsPrefers = () => {
+    let prefersLightMode = false;
+    if (isBrowser$1)
+      prefersLightMode = window.matchMedia("(prefers-color-scheme: light)").matches;
+    setModeOsPrefers(prefersLightMode);
+    return prefersLightMode;
+  };
+  const getModeUserPrefers = () => {
+    if (isBrowser$1) {
+      const mode = localStorage.getItem("modeUserPrefers");
+      if (mode !== null)
+        modeUserPrefers.value = mode === "true";
+    }
+    return modeUserPrefers.value;
+  };
+  const getModeAutoPrefers = () => {
+    const os = getModeOsPrefers();
+    const user = getModeUserPrefers();
+    if (user === void 0)
+      return os;
+    return user;
+  };
+  const setModeOsPrefers = (value) => {
+    modeOsPrefers.value = value;
+    if (isBrowser$1) {
+      localStorage.setItem("modeOsPrefers", value.toString());
+    }
+  };
+  const setModeUserPrefers = (value) => {
+    modeUserPrefers.value = value;
+    if (isBrowser$1) {
+      localStorage.setItem("modeUserPrefers", value.toString());
+    }
+  };
+  const setModeCurrent = (value) => {
+    const elemHtmlClasses = document.documentElement.classList;
+    const classDark = "dark";
+    value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
+    currentMode.value = value;
+  };
+  const initializeMode = () => {
+    const mode = getModeAutoPrefers();
+    setModeCurrent(mode);
+  };
+  const autoModeWatcher = () => {
+    const mql = window.matchMedia("(prefers-color-scheme: light)");
+    const setMode = (value) => {
+      const elemHtmlClasses = document.documentElement.classList;
+      const classDark = `dark`;
+      value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
+      setModeCurrent(value);
+    };
+    setMode(mql.matches);
+    mql.onchange = () => {
+      setMode(mql.matches);
+    };
+  };
+  return {
+    modeOsPrefers: readonly(modeOsPrefers),
+    modeUserPrefers: readonly(modeUserPrefers),
+    currentMode: readonly(currentMode),
+    getModeOsPrefers,
+    getModeUserPrefers,
+    getModeAutoPrefers,
+    setModeUserPrefers,
+    setModeCurrent,
+    autoModeWatcher,
+    initializeMode,
+    MODE
+  };
+};
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main$1 = defineComponent({
+  props: {
+    bgLight: {
+      type: String,
+      default: "bg-surface-50"
+    },
+    bgDark: {
+      type: String,
+      default: "bg-surface-900"
+    },
+    textLight: {
+      type: String,
+      default: "text-surface-50"
+    },
+    textDark: {
+      type: String,
+      default: "text-surface-900"
+    },
+    width: {
+      type: String,
+      default: "w-12"
+    },
+    height: {
+      type: String,
+      default: "h-6"
+    },
+    ring: {
+      type: String,
+      default: "ring-[1px] ring-surface-500/30"
+    },
+    rounded: {
+      type: String,
+      default: "rounded-token"
+    }
+  },
+  setup(props, { attrs }) {
+    const { initializeMode, setModeCurrent, setModeUserPrefers, currentMode: currentMode2, MODE: MODE2 } = useDarkMode();
+    onMounted(() => {
+      initializeMode();
+    });
+    const cTransition = `transition-all duration-[200ms]`;
+    const cTrack = "cursor-pointer";
+    const cThumb = "aspect-square scale-[0.8] flex justify-center items-center";
+    const cIcon = "w-[70%] aspect-square";
+    const svgPath = {
+      sun: "M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z",
+      moon: "M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+    };
+    const onToggleHandler = () => {
+      const toggle = !currentMode2.value;
+      setModeUserPrefers(toggle);
+      setModeCurrent(toggle);
+    };
+    const onKeyDown = (event) => {
+      if (["Enter", "Space"].includes(event.code)) {
+        event.preventDefault();
+        event.currentTarget.click();
+      }
+    };
+    const trackBg = computed(
+      () => currentMode2.value === MODE2.LIGHT ? props.bgLight : props.bgDark
+    );
+    const thumbBg = computed(
+      () => currentMode2.value === MODE2.LIGHT ? props.bgDark : props.bgLight
+    );
+    const thumbPosition = computed(
+      () => currentMode2.value === MODE2.LIGHT ? "translate-x-[100%]" : ""
+    );
+    const iconFill = computed(() => {
+      return currentMode2.value === MODE2.LIGHT ? props.textLight : props.textDark;
+    });
+    const classesTrack = computed(() => {
+      var _a;
+      return `${cTrack} ${cTransition} ${props.width} ${props.height} ${props.ring} ${props.rounded} ${trackBg.value} ${(_a = attrs.class) != null ? _a : ""}`;
+    });
+    const classesThumb = computed(
+      () => `${cThumb} ${cTransition} ${props.height} ${props.rounded} ${thumbBg.value} ${thumbPosition.value}`
+    );
+    const classesIcon = computed(() => `${cIcon}`);
+    return {
+      classesTrack,
+      classesThumb,
+      classesIcon,
+      svgPath,
+      onToggleHandler,
+      onKeyDown,
+      currentMode: currentMode2,
+      iconFill
+    };
+  }
+});
+const _hoisted_1$1 = ["aria-checked", "title"];
+const _hoisted_2$1 = ["d"];
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(`lightswitch-track ${_ctx.classesTrack}`),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onToggleHandler && _ctx.onToggleHandler(...args)),
+    onKeydown: _cache[1] || (_cache[1] = (...args) => _ctx.onKeyDown && _ctx.onKeyDown(...args)),
+    "on:keyup": "",
+    "on:keypress": "",
+    role: "switch",
+    "aria-label": "Light Switch",
+    "aria-checked": _ctx.currentMode,
+    title: `Toggle ${_ctx.currentMode === false ? "Dark" : "Light"} Mode`,
+    tabindex: "0"
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass(`lightswitch-thumb ${_ctx.classesThumb}`)
+    }, [
+      (openBlock(), createElementBlock("svg", {
+        class: normalizeClass(`lightswitch-icon ${_ctx.classesIcon} ${_ctx.iconFill}`),
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 512 512"
+      }, [
+        createElementVNode("path", {
+          fill: "currentColor",
+          d: _ctx.currentMode ? _ctx.svgPath.sun : _ctx.svgPath.moon
+        }, null, 8, _hoisted_2$1)
+      ], 2))
+    ], 2)
+  ], 42, _hoisted_1$1);
+}
+var DarkModeSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+var themeSwitcher_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _sfc_main = defineComponent({
+  components: {
+    DarkModeSwitch,
+    VButton: _sfc_main$6
+  },
+  props: {
+    bgLight: {
+      type: String,
+      default: "bg-surface-50"
+    },
+    bgDark: {
+      type: String,
+      default: "bg-surface-900"
+    },
+    textOnLight: {
+      type: String,
+      default: "text-surface-900"
+    },
+    textOnDark: {
+      type: String,
+      default: "text-surface-50"
+    },
+    width: {
+      type: String,
+      default: "w-60"
+    },
+    height: {
+      type: String,
+      default: "max-h-64 lg:max-h-[500px]"
+    },
+    ring: {
+      type: String,
+      default: "ring-[1px] ring-surface-500/30"
+    },
+    rounded: {
+      type: String,
+      default: "rounded-token"
+    },
+    roundedContainer: {
+      type: String,
+      default: "rounded-container-token"
+    },
+    buttonClasses: {
+      type: String,
+      default: "w-24"
+    }
+  },
+  setup(props, { attrs }) {
+    const { initializeTheme, loadTheme, themes: themes2, chosenTheme: chosenTheme2 } = useTheme();
+    const { currentMode: currentMode2, MODE: MODE2 } = useDarkMode();
+    const showPopup = ref(false);
+    onMounted(() => {
+      initializeTheme();
+    });
+    const cTransition = `transition-all duration-[200ms]`;
+    function onKeyDown(event) {
+      if (["Enter", "Space"].includes(event.code)) {
+        event.preventDefault();
+        event.currentTarget.click();
+      }
+    }
+    const background = computed(() => {
+      return currentMode2.value === MODE2.LIGHT ? props.bgLight : props.bgDark;
+    });
+    const text = computed(() => {
+      return currentMode2.value === MODE2.LIGHT ? props.textOnLight : props.textOnDark;
+    });
+    const classes = computed(() => {
+      var _a;
+      return `${cTransition} 
+      ${background.value} 
+      ${text.value} 
+      ${props.width} 
+      ${props.ring}
+      ${props.roundedContainer}
+      ${(_a = attrs.class) != null ? _a : ""}`;
+    });
+    const listClasses = computed(() => {
+      return `${cTransition} 
+      ${props.height}`;
+    });
+    const listItemClasses = computed(() => {
+      return `${cTransition} 
+      ${props.ring} 
+      ${props.rounded}`;
+    });
+    return {
+      onKeyDown,
+      loadTheme,
+      currentMode: currentMode2,
+      classes,
+      chosenTheme: chosenTheme2,
+      themes: themes2,
+      showPopup,
+      listClasses,
+      listItemClasses
+    };
+  }
+});
+const _withScopeId = (n) => (pushScopeId("data-v-3283243a"), n = n(), popScopeId(), n);
+const _hoisted_1 = { class: "cc-theme-switcher" };
+const _hoisted_2 = { class: "space-y-4" };
+const _hoisted_3 = { class: "flex items-center justify-between" };
+const _hoisted_4 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("h6", null, "Mode", -1));
+const _hoisted_5 = { class: "flex flex-col gap-4" };
+const _hoisted_6 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_VButton = resolveComponent("VButton");
+  const _component_DarkModeSwitch = resolveComponent("DarkModeSwitch");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode(_component_VButton, {
+      class: normalizeClass(`cc-theme-switcher__button ${_ctx.buttonClasses}`),
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.showPopup = !_ctx.showPopup)
+    }, {
+      default: withCtx(() => [
+        createTextVNode(" Theme ")
+      ]),
+      _: 1
+    }, 8, ["class"]),
+    _ctx.showPopup ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: normalizeClass(["cc-theme-switcher__popup p-4 shadow-xl", _ctx.classes])
+    }, [
+      createElementVNode("div", _hoisted_2, [
+        createElementVNode("section", _hoisted_3, [
+          _hoisted_4,
+          createVNode(_component_DarkModeSwitch)
+        ]),
+        createElementVNode("nav", {
+          class: normalizeClass(["list-nav -m-4 overflow-y-auto p-4", _ctx.listClasses])
+        }, [
+          createElementVNode("ul", _hoisted_5, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.themes, (theme, index2) => {
+              return openBlock(), createElementBlock("li", {
+                class: normalizeClass(["h-full w-full p-2 text-center capitalize hover:cursor-pointer hover:bg-primary-100 hover:text-primary-900", `${_ctx.listItemClasses} ${_ctx.chosenTheme === theme.name ? "bg-primary-50 text-primary-900" : "bg-surface-200 text-surface-900"}`]),
+                key: index2,
+                onClick: ($event) => _ctx.loadTheme(theme.name)
+              }, toDisplayString(theme.name), 11, _hoisted_6);
+            }), 128))
+          ])
+        ], 2)
+      ])
+    ], 2)) : createCommentVNode("", true)
+  ]);
+}
+var themeSwitcher = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3283243a"]]);
+const { isBrowser } = usePlatform();
+const THEMES = {
+  VUETIFUL: "vuetiful",
+  ROCKET: "rocket",
+  SAHARA: "sahara",
+  SEAFOAM: "seafoam",
+  SEASONAL: "seasonal",
+  SKELETON: "skeleton",
+  VINTAGE: "vintage"
+};
+const builtInUrl = (name) => {
+  return `https://code-coaching.dev/vuetiful-themes/theme-${name}.css`;
+};
+const builtInThemes = [
+  { name: THEMES.VUETIFUL, url: builtInUrl(`${THEMES.VUETIFUL}-0.0.1`) },
+  { name: THEMES.ROCKET, url: builtInUrl(`${THEMES.ROCKET}`) },
+  { name: THEMES.SAHARA, url: builtInUrl(`${THEMES.SAHARA}`) },
+  { name: THEMES.SEAFOAM, url: builtInUrl(`${THEMES.SEAFOAM}`) },
+  { name: THEMES.SEASONAL, url: builtInUrl(`${THEMES.SEASONAL}`) },
+  { name: THEMES.SKELETON, url: builtInUrl(`${THEMES.SKELETON}`) },
+  { name: THEMES.VINTAGE, url: builtInUrl(`${THEMES.VINTAGE}`) }
+];
+const themes = ref([...builtInThemes]);
+const defaultTheme = THEMES.VUETIFUL;
+const chosenTheme = ref(defaultTheme);
+const useTheme = () => {
+  const saveThemeToStorage = (name) => {
+    const theme = themes.value.find((t) => t.name === name);
+    if (!theme)
+      return;
+    if (isBrowser) {
+      localStorage.setItem("vuetiful-theme", theme.name);
+      document.body.setAttribute("data-theme", theme.name);
+    }
+  };
+  const initializeTheme = (callback) => {
+    if (isBrowser) {
+      const storedTheme = localStorage.getItem("vuetiful-theme");
+      if (storedTheme)
+        loadTheme(storedTheme, callback);
+      else
+        loadTheme(defaultTheme, callback);
+    }
+  };
+  const loadTheme = (themeName, callback) => {
+    let themeToLoad = themes.value.find((t) => t.name === themeName);
+    if (!themeToLoad)
+      themeToLoad = themes.value.find((t) => t.name === defaultTheme) || themes.value[0];
+    const theme = themeToLoad;
+    chosenTheme.value = theme.name;
+    const existingStyle = document.getElementById("theme");
+    let themeUrl = theme.url;
+    const link = document.createElement("link");
+    link.id = "theme";
+    link.href = themeUrl;
+    link.type = "text/css";
+    link.rel = "stylesheet";
+    link.onload = () => {
+      if (existingStyle)
+        existingStyle.remove();
+      saveThemeToStorage(theme.name);
+      if (callback)
+        callback();
+    };
+    const head = document.querySelector("head");
+    if (head)
+      head.appendChild(link);
+  };
+  const registerAllBuiltInThemes = () => {
+    return [...builtInThemes];
+  };
+  const registerTheme = (name, url) => {
+    return { url, name };
+  };
+  const overwriteThemes = (newThemes) => {
+    themes.value = [...newThemes];
+  };
+  return {
+    themes: readonly(themes),
+    chosenTheme: readonly(chosenTheme),
+    initializeTheme,
+    loadTheme,
+    saveThemeToStorage,
+    THEMES,
+    overwriteThemes,
+    registerAllBuiltInThemes,
+    registerTheme
+  };
+};
 const clipboard = (el, binding) => {
   el.addEventListener("click", () => {
     navigator.clipboard.writeText(binding.value);
@@ -47002,4 +47161,4 @@ function install(app) {
   }
 }
 var index = { install };
-export { _sfc_main as CodeBlock, DarkModeSwitch, MyConstants, themeSwitcher as ThemeSwitcher, VButton, index as default, useDarkMode, useTheme, clipboard as vClipboard };
+export { _sfc_main$2 as CodeBlock, DarkModeSwitch, themeSwitcher as ThemeSwitcher, _sfc_main$6 as VButton, _sfc_main$5 as VRail, _sfc_main$4 as VRailTile, _sfc_main$3 as VShell, index as default, useDarkMode, useRail, useTheme, clipboard as vClipboard };