@elmethis/core 1.0.0-alpha.19 → 1.0.0-alpha.191

package/dist/_virtual/_plugin-vue_export-helper.mjs

@@ -0,0 +1,10 @@
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+export {
+  _export_sfc as default
+};

package/dist/components/{headings/ElmHeading4.stories.d.ts → badge/ElmBadge.stories.d.ts}

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/vue3';
-import { default as ElmHeading4 } from './ElmHeading4.vue';
-declare const meta: Meta<typeof ElmHeading4>;
+import { default as ElmBadge } from './ElmBadge.vue';
+declare const meta: Meta<typeof ElmBadge>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;

package/dist/components/{typography/ElmBulletedList.vue.d.ts → badge/ElmBadge.vue.d.ts}

@@ -1,16 +1,17 @@
-export interface ElmBulletedListProps {
+export interface ElmBadgeProps {
+    color: string;
 }
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        target: HTMLUListElement;
+        left?(_: {}): any;
+        right?(_: {}): any;
     };
-    attrs: Partial<{}>;
+    refs: {};
+    rootEl: HTMLSpanElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<ElmBulletedListProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmBulletedListProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<ElmBadgeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmBadgeProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/badge/ElmBadge.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmBadge.vue2.mjs";
+import style0 from "./ElmBadge.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmBadge = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmBadge as default
+};

package/dist/components/badge/ElmBadge.vue2.mjs

@@ -0,0 +1,33 @@
+import { defineComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, unref, renderSlot } from "vue";
+import { getLuminance } from "polished";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmBadge",
+  props: {
+    color: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(_ctx.$style.badge),
+        style: normalizeStyle({ "--bg-color": _ctx.color })
+      }, [
+        createElementVNode("span", {
+          class: normalizeClass(_ctx.$style.left),
+          style: normalizeStyle({
+            color: unref(getLuminance)(_ctx.color) > 0.5 ? "rgba(0,0,0,0.7)" : "rgba(255,255,255,0.7)"
+          })
+        }, [
+          renderSlot(_ctx.$slots, "left")
+        ], 6),
+        createElementVNode("span", {
+          class: normalizeClass(_ctx.$style.right)
+        }, [
+          renderSlot(_ctx.$slots, "right")
+        ], 2)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/badge/ElmBadge.vue3.mjs

@@ -0,0 +1,26 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._badge_gc88x_1{border:1px solid var(--bg-color);border-radius:.25rem}._badge_gc88x_1 ._left_gc88x_5{background-color:var(--bg-color);padding-inline:.5rem}._badge_gc88x_1 ._right_gc88x_9{padding-inline:.5rem}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const badge = "_badge_gc88x_1";
+const left = "_left_gc88x_5";
+const right = "_right_gc88x_9";
+const style0 = {
+  badge,
+  left,
+  right
+};
+export {
+  badge,
+  style0 as default,
+  left,
+  right
+};

package/dist/components/badge/ElmTag.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as ElmTag } from './ElmTag.vue';
+declare const meta: Meta<typeof ElmTag>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Multiple: Story;

package/dist/components/badge/ElmTag.vue.d.ts

@@ -0,0 +1,14 @@
+export interface ElmTagProps {
+    /**
+     * The text to display in the tag.
+     */
+    text: string;
+    /**
+     * The color of the tag.
+     */
+    color?: string;
+}
+declare const _default: import('vue').DefineComponent<ElmTagProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmTagProps> & Readonly<{}>, {
+    color: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/badge/ElmTag.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmTag.vue2.mjs";
+import style0 from "./ElmTag.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmTag = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmTag as default
+};

package/dist/components/badge/ElmTag.vue2.mjs

@@ -0,0 +1,39 @@
+import { defineComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, createVNode, createElementVNode, unref } from "vue";
+import { Icon } from "@iconify/vue";
+import ElmInlineText from "../typography/ElmInlineText.vue.mjs";
+import { getLuminance } from "polished";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmTag",
+  props: {
+    text: {},
+    color: { default: "transparent" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.tag),
+        style: normalizeStyle({ "--color": _ctx.color })
+      }, [
+        createVNode(unref(Icon), {
+          icon: "tabler:tag",
+          class: normalizeClass(_ctx.$style.icon),
+          style: normalizeStyle({
+            backgroundColor: _ctx.color,
+            "--font-color": unref(getLuminance)(_ctx.color) > 0.5 ? "rgba(0,0,0,0.7)" : "rgba(255,255,255,0.7)"
+          })
+        }, null, 8, ["class", "style"]),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.text)
+        }, [
+          createVNode(ElmInlineText, {
+            style: { color: "unset" },
+            text: _ctx.text
+          }, null, 8, ["text"])
+        ], 2)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/badge/ElmTag.vue3.mjs

@@ -0,0 +1,26 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._tag_xg111_1{display:inline-flex;width:-moz-min-content;width:min-content;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;border-width:1px;border-style:solid;border-radius:.25rem;border-color:var(--color);color:#000000b3}[data-theme=dark] ._tag_xg111_1{color:#ffffffb3}._icon_xg111_18{display:block;line-height:1;margin:0;padding:.25rem;color:var(--font-color);border-radius:.125rem 0 0 .125rem}._text_xg111_27{white-space:nowrap;padding-inline:.5rem}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const tag = "_tag_xg111_1";
+const icon = "_icon_xg111_18";
+const text = "_text_xg111_27";
+const style0 = {
+  tag,
+  icon,
+  text
+};
+export {
+  style0 as default,
+  icon,
+  tag,
+  text
+};

package/dist/components/code/ElmCodeBlock.stories.d.ts

@@ -5,3 +5,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
 export declare const Rust: Story;
+export declare const Caption: Story;
+export declare const CaptionSlot: Story;

package/dist/components/code/ElmCodeBlock.vue.d.ts

@@ -1,3 +1,5 @@
+import { Property } from 'csstype';
+import { VNode } from 'vue';
 export interface ElmCodeBlockProps {
     /**
      * The code to display.
@@ -12,8 +14,35 @@ export interface ElmCodeBlockProps {
      * If not provided, the language will be used.
      */
     caption?: string;
+    /**
+     * The margin of the code block.
+     */
+    margin?: Property.MarginBlock;
 }
-declare const _default: import('vue').DefineComponent<ElmCodeBlockProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmCodeBlockProps> & Readonly<{}>, {
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default?: () => VNode[];
+    }> & {
+        default?: () => VNode[];
+    };
+    refs: {
+        target: HTMLDivElement;
+        tooltipRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ElmCodeBlockProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmCodeBlockProps> & Readonly<{}>, {
     language: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    target: HTMLDivElement;
+    tooltipRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/code/ElmCodeBlock.vue.mjs

@@ -0,0 +1,23 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode(".v-enter-to[data-v-17343ed2],.v-leave-from[data-v-17343ed2]{opacity:1}.v-enter-active[data-v-17343ed2],.v-leave-active[data-v-17343ed2]{transition:opacity .15s}.v-enter-from[data-v-17343ed2],.v-leave-to[data-v-17343ed2]{opacity:0}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+import _sfc_main from "./ElmCodeBlock.vue2.mjs";
+import style0 from "./ElmCodeBlock.vue3.mjs";
+
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmCodeBlock = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules], ["__scopeId", "data-v-17343ed2"]]);
+export {
+  ElmCodeBlock as default
+};

package/dist/components/code/ElmCodeBlock.vue2.mjs

@@ -0,0 +1,127 @@
+import { defineComponent, defineAsyncComponent, ref, useTemplateRef, useSlots, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, createVNode, createBlock, resolveDynamicComponent, unref, Transition, withCtx, createCommentVNode, h } from "vue";
+import { Icon } from "@iconify/vue";
+import ElmLanguageIcon from "../icon/ElmLanguageIcon.vue.mjs";
+import ElmInlineText from "../typography/ElmInlineText.vue.mjs";
+import ElmBlockFallback from "../fallback/ElmBlockFallback.vue.mjs";
+import ElmDotLoadingIcon from "../icon/ElmDotLoadingIcon.vue.mjs";
+import { useClipboard, useIntersectionObserver, useElementHover } from "@vueuse/core";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmCodeBlock",
+  props: {
+    code: {},
+    language: { default: "txt" },
+    caption: {},
+    margin: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const AsyncElmShikiHighlighter = defineAsyncComponent({
+      loader: () => import("./ElmShikiHighlighter.vue.mjs"),
+      loadingComponent: ElmBlockFallback
+    });
+    const isRendered = ref(false);
+    const { copy, copied } = useClipboard({ source: props.code });
+    const target = ref(null);
+    const targetIsVisible = ref(false);
+    useIntersectionObserver(target, ([{ isIntersecting }], _) => {
+      targetIsVisible.value = isIntersecting;
+    });
+    const tooltipElement = useTemplateRef("tooltipRef");
+    const isHovered = useElementHover(tooltipElement);
+    const slots = useSlots();
+    const renderCaption = () => {
+      if (props.caption) {
+        return h(ElmInlineText, { text: props.caption });
+      } else if (slots.default != null) {
+        return slots.default();
+      } else {
+        return h(ElmInlineText, { text: props.language });
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "target",
+        ref: target,
+        class: normalizeClass(_ctx.$style.wrapper),
+        style: normalizeStyle({
+          "--margin-block": _ctx.margin,
+          "--opacity": targetIsVisible.value ? 1 : 0
+        })
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.header)
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style.header__left)
+          }, [
+            createVNode(ElmLanguageIcon, {
+              language: _ctx.language,
+              size: 20
+            }, null, 8, ["language"]),
+            (openBlock(), createBlock(resolveDynamicComponent(() => renderCaption())))
+          ], 2),
+          createElementVNode("div", {
+            ref: "tooltipRef",
+            class: normalizeClass(_ctx.$style.header__right)
+          }, [
+            createVNode(unref(Icon), {
+              class: normalizeClass(_ctx.$style["copy-icon"]),
+              onClick: _cache[0] || (_cache[0] = () => {
+                unref(copy)(_ctx.code);
+              }),
+              icon: unref(copied) ? "mdi:clipboard-check-multiple-outline" : "mdi:clipboard-multiple-outline"
+            }, null, 8, ["class", "icon"]),
+            createVNode(Transition, null, {
+              default: withCtx(() => [
+                unref(copied) ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  class: normalizeClass(_ctx.$style.tooltip)
+                }, [
+                  createVNode(unref(Icon), {
+                    icon: "mdi:clipboard-check-multiple-outline",
+                    class: normalizeClass(_ctx.$style["tooltip-check-icon"])
+                  }, null, 8, ["class"]),
+                  createVNode(ElmInlineText, { text: "Copied to Clipboard!" })
+                ], 2)) : unref(isHovered) && !unref(copied) ? (openBlock(), createElementBlock("div", {
+                  key: 1,
+                  class: normalizeClass(_ctx.$style.tooltip)
+                }, [
+                  createVNode(unref(Icon), {
+                    icon: "mdi:clipboard-multiple-outline",
+                    class: normalizeClass(_ctx.$style["tooltip-copy-icon"])
+                  }, null, 8, ["class"]),
+                  createVNode(ElmInlineText, { text: "Copy to Clipboard" })
+                ], 2)) : createCommentVNode("", true)
+              ]),
+              _: 1
+            })
+          ], 2)
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.code)
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style["code-body"]),
+            style: normalizeStyle({ opacity: isRendered.value ? 1 : 0 })
+          }, [
+            createVNode(unref(AsyncElmShikiHighlighter), {
+              modelValue: isRendered.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRendered.value = $event),
+              code: _ctx.code,
+              language: _ctx.language
+            }, null, 8, ["modelValue", "code", "language"])
+          ], 6),
+          createElementVNode("div", {
+            style: normalizeStyle({ opacity: !isRendered.value ? 1 : 0 }),
+            class: normalizeClass(_ctx.$style.fallback)
+          }, [
+            createVNode(ElmDotLoadingIcon, { size: "48px" })
+          ], 6)
+        ], 2)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/code/ElmCodeBlock.vue3.mjs

@@ -0,0 +1,42 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._wrapper_136yw_1{margin-block:var(--margin-block);opacity:var(--opacity);display:flex;flex-direction:column;border-radius:.25rem;transition:background-color .4s,opacity .8s;background-color:#fff6;box-shadow:0 0 .25rem #0000001a}[data-theme=dark] ._wrapper_136yw_1{background-color:#ffffff0d;box-shadow:0 0 .25rem #0000004d}._header_136yw_16{box-sizing:border-box;padding:.25rem .5rem .5rem;margin:.5rem;display:flex;flex-direction:row;justify-content:space-between;font-family:Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;border-bottom:solid 1px rgba(0,0,0,.2)}[data-theme=dark] ._header_136yw_16{border-color:#fff3}._header__left_136yw_30{display:flex;flex-direction:row;align-items:center;gap:.5rem}._copy-icon_136yw_37{box-sizing:border-box;padding:.125rem;width:26px;height:26px;border-radius:.125rem;cursor:pointer;transition:background-color .2s;color:#000000b3}[data-theme=dark] ._copy-icon_136yw_37{color:#ffffffb3}._copy-icon_136yw_37:hover{background-color:#0000001a}[data-theme=dark] ._copy-icon_136yw_37:hover{background-color:#ffffff1a}._header__right_136yw_57{position:relative;display:flex;flex-direction:row;align-items:center;gap:.5rem}._code_136yw_65{position:relative;padding:.25rem 1rem 1rem;overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(105,135,184,.3) rgba(105,135,184,.15)}._code-body_136yw_73{transition:opacity .2s}._fallback_136yw_77{position:absolute;top:0;left:0;height:100%;width:100%;box-sizing:border-box;padding:auto;display:flex;justify-content:center;align-items:center;transition:opacity .2s;pointer-events:none}._tooltip_136yw_92{position:absolute;bottom:-2.5rem;right:0;display:flex;flex-wrap:none;justify-content:center;align-items:center;gap:.25rem;height:20px;white-space:nowrap}._tooltip-copy-icon_136yw_105{width:20px;height:20px;color:#4c6da2}._tooltip-check-icon_136yw_111{width:20px;height:20px;color:#449763}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const wrapper = "_wrapper_136yw_1";
+const header = "_header_136yw_16";
+const header__left = "_header__left_136yw_30";
+const header__right = "_header__right_136yw_57";
+const code = "_code_136yw_65";
+const fallback = "_fallback_136yw_77";
+const tooltip = "_tooltip_136yw_92";
+const style0 = {
+  wrapper,
+  header,
+  header__left,
+  "copy-icon": "_copy-icon_136yw_37",
+  header__right,
+  code,
+  "code-body": "_code-body_136yw_73",
+  fallback,
+  tooltip,
+  "tooltip-copy-icon": "_tooltip-copy-icon_136yw_105",
+  "tooltip-check-icon": "_tooltip-check-icon_136yw_111"
+};
+export {
+  code,
+  style0 as default,
+  fallback,
+  header,
+  header__left,
+  header__right,
+  tooltip,
+  wrapper
+};

package/dist/components/code/ElmKatex.vue.d.ts

@@ -14,5 +14,7 @@ export interface ElmKatexProps {
 }
 declare const _default: import('vue').DefineComponent<ElmKatexProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmKatexProps> & Readonly<{}>, {
     block: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    targetRef: HTMLSpanElement;
+}, any>;
 export default _default;

package/dist/components/code/ElmKatex.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmKatex.vue2.mjs";
+import style0 from "./ElmKatex.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmKatex = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmKatex as default
+};

package/dist/components/code/ElmKatex.vue2.mjs

@@ -0,0 +1,67 @@
+import { defineComponent, ref, onMounted, onUpdated, onServerPrefetch, createElementBlock, openBlock, normalizeStyle, normalizeClass, createCommentVNode } from "vue";
+const _hoisted_1 = ["innerHTML"];
+const _hoisted_2 = ["innerHTML"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmKatex",
+  props: {
+    expression: {},
+    block: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const html = ref();
+    let katexRenderToString = null;
+    const loadKatex = async () => {
+      if (!katexRenderToString) {
+        const { renderToString } = await import("katex");
+        katexRenderToString = renderToString;
+      }
+    };
+    const render = async () => {
+      await loadKatex();
+      if (html.value == null && katexRenderToString) {
+        try {
+          html.value = katexRenderToString(props.expression, {
+            displayMode: props.block,
+            output: "mathml"
+          });
+        } catch (err) {
+          console.error("KaTeX rendering error:", err);
+        }
+      }
+    };
+    onMounted(render);
+    onUpdated(render);
+    onServerPrefetch(render);
+    return (_ctx, _cache) => {
+      return props.block ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        ref: "targetRef",
+        class: normalizeClass(_ctx.$style.katex),
+        style: normalizeStyle({
+          "--margin-block": props.block ? "3rem" : void 0
+        })
+      }, [
+        html.value ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          innerHTML: html.value
+        }, null, 8, _hoisted_1)) : createCommentVNode("", true)
+      ], 6)) : (openBlock(), createElementBlock("span", {
+        key: 1,
+        ref: "targetRef",
+        class: normalizeClass(_ctx.$style.katex),
+        style: normalizeStyle({
+          "--margin-block": props.block ? "3rem" : void 0
+        })
+      }, [
+        html.value ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          innerHTML: html.value
+        }, null, 8, _hoisted_2)) : createCommentVNode("", true)
+      ], 6));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/code/ElmKatex.vue3.mjs

@@ -0,0 +1,20 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._katex_vrtkg_1{margin-block:var(--margin-block);color:#000000b3}._katex_vrtkg_1::-moz-selection{color:#ffffffb3;background-color:#000000b3;background-color:var(--color, rgba(0, 0, 0, .7))}._katex_vrtkg_1::selection{color:#ffffffb3;background-color:#000000b3;background-color:var(--color, rgba(0, 0, 0, .7))}[data-theme=dark] ._katex_vrtkg_1{color:#ffffffb3;color:var(--color, rgba(255, 255, 255, .7))}[data-theme=dark] ._katex_vrtkg_1::-moz-selection{color:#000000b3;background-color:#ffffffb3;background-color:var(--color, rgba(255, 255, 255, .7))}[data-theme=dark] ._katex_vrtkg_1::selection{color:#000000b3;background-color:#ffffffb3;background-color:var(--color, rgba(255, 255, 255, .7))}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const katex = "_katex_vrtkg_1";
+const style0 = {
+  katex
+};
+export {
+  style0 as default,
+  katex
+};

package/dist/components/code/ElmShikiHighlighter.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as ElmShikiHighlighter } from './ElmShikiHighlighter.vue';
+declare const meta: Meta<typeof ElmShikiHighlighter>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/code/ElmShikiHighlighter.vue.d.ts

@@ -0,0 +1,22 @@
+export interface ElmShikiHighlighterProps {
+    /**
+     * The code to display.
+     */
+    code: string;
+    /**
+     * The language of the code.
+     */
+    language?: string;
+}
+type __VLS_Props = ElmShikiHighlighterProps;
+type __VLS_PublicProps = {
+    modelValue?: boolean;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    language: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/code/ElmShikiHighlighter.vue.mjs

@@ -0,0 +1,23 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode(".shiki,.shiki span{font-family:Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace!important}.shiki *::-moz-selection,.shiki span *::-moz-selection{background-color:#0000001a}.shiki *::selection,.shiki span *::selection{background-color:#0000001a}[data-theme=dark] .shiki *::-moz-selection,[data-theme=dark] .shiki span *::-moz-selection{background-color:#ffffff26}[data-theme=dark] .shiki *::selection,[data-theme=dark] .shiki span *::selection{background-color:#ffffff26}[data-theme=dark] .shiki,[data-theme=dark] .shiki span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+import _sfc_main from "./ElmShikiHighlighter.vue2.mjs";
+import style0 from "./ElmShikiHighlighter.vue3.mjs";
+
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmShikiHighlighter = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmShikiHighlighter as default
+};