@umbra.ui/core 0.1.0

package/src/components/pickers/IconPicker/theme.css

@@ -0,0 +1,28 @@
+@import "../theme.css";
+
+/* Light theme */
+:root {
+  /* Icon Cells */
+  --iconpicker-icon-cell-bg: #f3f4f6;
+  --iconpicker-icon-cell-border: #d1d5db;
+  --iconpicker-icon-cell-hover-bg: #e5e7eb;
+  --iconpicker-icon-cell-selected-bg: #acd8fc;
+  --iconpicker-icon-cell-selected-border: #5eb1ef;
+
+  /* Icon Color */
+  --iconpicker-icon-color: #374151;
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Icon Cells */
+  --iconpicker-icon-cell-bg: #484848;
+  --iconpicker-icon-cell-border: #7b7b7b;
+  --iconpicker-icon-cell-hover-bg: #313131;
+  --iconpicker-icon-cell-selected-bg: #0090ff;
+  --iconpicker-icon-cell-selected-border: #eeeeee;
+
+  /* Icon Color */
+  --iconpicker-icon-color: #eeeeee;
+}

package/src/components/pickers/theme.css

@@ -0,0 +1,82 @@
+/* Common picker theme variables */
+:root {
+  /* Button */
+  --picker-button-bg: transparent;
+  --picker-button-border: 1px solid transparent;
+  --picker-button-hover-bg: #fcfcfc;
+  --picker-button-hover-border: 1px solid #d9d9d9;
+  --picker-button-hover-shadow: none;
+  --picker-button-hover-inset-shadow: none;
+  --picker-button-selected-bg: #fcfcfc;
+  --picker-button-selected-shadow: none;
+  --picker-button-selected-inset-shadow: none;
+
+  /* Picker */
+  --picker-picker-bg: #ffffff;
+  --picker-picker-border: 1px solid rgba(0, 0, 0, 0.1);
+  --picker-picker-shadow: rgba(0, 0, 0, 0.1);
+  --picker-picker-inset-shadow: rgba(255, 255, 255, 0.8);
+
+  /* Selection Bar */
+  --picker-selection-bar-bg: #f9fafb;
+  --picker-selection-bar-text: #1f2937;
+  --picker-selection-bar-border: rgba(0, 0, 0, 0.1);
+
+  /* Overlay */
+  --picker-overlay-bg: rgba(0, 0, 0, 0.5);
+
+  /* Text */
+  --picker-text-primary: #1f2937;
+  --picker-text-secondary: #374151;
+  --picker-text-muted: #9ca3af;
+
+  /* Borders */
+  --picker-border-light: rgba(0, 0, 0, 0.1);
+  --picker-border-medium: rgba(0, 0, 0, 0.15);
+
+  /* Backgrounds */
+  --picker-bg-subtle: rgba(0, 0, 0, 0.05);
+  --picker-bg-hover: rgba(0, 0, 0, 0.05);
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Button */
+  --picker-button-bg: transparent;
+  --picker-button-border: none;
+  --picker-button-hover-bg: #484848;
+  --picker-button-hover-border: none;
+  --picker-button-hover-shadow: rgba(0, 0, 0, 0.21);
+  --picker-button-hover-inset-shadow: rgba(255, 255, 255, 0.1);
+  --picker-button-selected-bg: #484848;
+  --picker-button-selected-shadow: rgba(0, 0, 0, 0.21);
+  --picker-button-selected-inset-shadow: rgba(255, 255, 255, 0.1);
+
+  /* Picker */
+  --picker-picker-bg: #484848;
+  --picker-picker-border: none;
+  --picker-picker-shadow: rgba(0, 0, 0, 0.21);
+  --picker-picker-inset-shadow: rgba(255, 255, 255, 0.1);
+
+  /* Selection Bar */
+  --picker-selection-bar-bg: #5a5a5a;
+  --picker-selection-bar-text: #eeeeee;
+  --picker-selection-bar-border: rgba(0, 0, 0, 0.25);
+
+  /* Overlay */
+  --picker-overlay-bg: rgba(0, 0, 0, 0.25);
+
+  /* Text */
+  --picker-text-primary: #eeeeee;
+  --picker-text-secondary: #b4b4b4;
+  --picker-text-muted: #7b7b7b;
+
+  /* Borders */
+  --picker-border-light: rgba(255, 255, 255, 0.15);
+  --picker-border-medium: rgba(255, 255, 255, 0.25);
+
+  /* Backgrounds */
+  --picker-bg-subtle: rgba(255, 255, 255, 0.1);
+  --picker-bg-hover: rgba(255, 255, 255, 0.1);
+}

package/src/components/views/MarkdownViewer/MarkdownViewer.vue

@@ -0,0 +1,442 @@
+<script setup lang="ts">
+import {
+  computed,
+  onMounted,
+  nextTick,
+  watch,
+  ref,
+  useCssModule,
+  createApp,
+} from "vue";
+import { marked } from "marked";
+import Prism from "prismjs";
+import { CloneIcon, CheckIcon } from "@umbra-ui/icons";
+import "./theme.css";
+
+interface Props {
+  content: string;
+}
+
+const props = defineProps<Props>();
+
+const containerRef = ref<HTMLElement | null>(null);
+const css = useCssModule();
+
+const htmlContent = computed(() => {
+  const renderer = new marked.Renderer();
+
+  // Custom code renderer to add language classes (marked v5+ token signature)
+  renderer.code = ({ text, lang }: { text: string; lang?: string }): string => {
+    const LANGUAGE_ALIASES: Record<string, string> = {
+      ts: "typescript",
+      js: "javascript",
+      sh: "bash",
+      shell: "bash",
+      html: "markup",
+      xml: "markup",
+      vue: "markup",
+      json5: "json",
+    };
+    const rawLanguage =
+      typeof lang === "string" ? lang.toLowerCase() : undefined;
+    const normalizedLanguage = rawLanguage
+      ? LANGUAGE_ALIASES[rawLanguage] ?? rawLanguage
+      : undefined;
+    const validLanguage =
+      normalizedLanguage && Prism.languages[normalizedLanguage]
+        ? normalizedLanguage
+        : "plaintext";
+    const highlighted =
+      validLanguage === "plaintext"
+        ? text
+        : Prism.highlight(text, Prism.languages[validLanguage], validLanguage);
+    return `<pre><code class="language-${validLanguage}">${highlighted}</code></pre>`;
+  };
+
+  marked.setOptions({
+    renderer: renderer,
+    breaks: true,
+    gfm: true,
+  });
+
+  const rawHtml = marked.parse(props.content) as string;
+  // Wrap tables for styling without relying on renderer signature differences
+  return rawHtml
+    .replace(/<table>/g, '<div class="table-wrapper">\n      <table>')
+    .replace(/<\/table>/g, "      </table>\n    </div>");
+});
+
+const enhanceCodeBlocks = (): void => {
+  const root = containerRef.value;
+  if (!root) return;
+  const pres = Array.from(root.querySelectorAll("pre"));
+  for (const pre of pres) {
+    const el = pre as HTMLElement & {
+      dataset: Record<string, string | undefined>;
+    };
+    if (el.dataset.copyBound === "true") continue;
+    el.dataset.copyBound = "true";
+    el.style.position = el.style.position || "relative";
+
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = css.copy_button;
+    button.setAttribute("aria-label", "Copy code to clipboard");
+    // Mount icons inside the button so it stays consistent with the icon set
+    const cloneMount = document.createElement("span");
+    const checkMount = document.createElement("span");
+    cloneMount.className = css.copy_icon;
+    checkMount.className = css.check_icon;
+    button.appendChild(cloneMount);
+    button.appendChild(checkMount);
+    try {
+      const appClone = createApp(CloneIcon, { size: 16 });
+      appClone.mount(cloneMount);
+      const appCheck = createApp(CheckIcon, { size: 16 });
+      appCheck.mount(checkMount);
+      // Hide the check icon by default
+      checkMount.style.display = "none";
+    } catch {
+      // Fallback emoji if mounting fails for any reason
+      button.textContent = "📋";
+    }
+
+    const handleClick = async (ev: Event) => {
+      ev.stopPropagation();
+      const code = el.querySelector("code");
+      const text = code?.textContent ?? "";
+      try {
+        if (navigator.clipboard?.writeText) {
+          await navigator.clipboard.writeText(text);
+        } else {
+          const ta = document.createElement("textarea");
+          ta.value = text;
+          ta.style.position = "fixed";
+          ta.style.opacity = "0";
+          document.body.appendChild(ta);
+          ta.select();
+          document.execCommand("copy");
+          document.body.removeChild(ta);
+        }
+        button.classList.add(css.copied);
+        // Swap icons to show checkmark briefly
+        if (cloneMount && checkMount) {
+          cloneMount.style.display = "none";
+          checkMount.style.display = "inline-flex";
+        }
+        setTimeout(() => {
+          button.classList.remove(css.copied);
+          if (cloneMount && checkMount) {
+            checkMount.style.display = "none";
+            cloneMount.style.display = "inline-flex";
+          }
+        }, 1200);
+      } catch {
+        // no-op
+      }
+    };
+    button.addEventListener("click", handleClick);
+    el.appendChild(button);
+  }
+};
+
+onMounted(() => {
+  nextTick(() => {
+    // Re-highlight any inline code that might have been missed
+    Prism.highlightAll();
+    enhanceCodeBlocks();
+  });
+});
+
+watch(htmlContent, async () => {
+  await nextTick();
+  Prism.highlightAll();
+  enhanceCodeBlocks();
+});
+</script>
+
+<template>
+  <div :class="$style.container" ref="containerRef" v-html="htmlContent"></div>
+</template>
+
+<style module>
+.container {
+  font-size: var(--body);
+  line-height: var(--line-height-relaxed);
+  color: var(--markdownviewer-container-color);
+  font-family: var(--markdownviewer-container-font-family);
+}
+
+/* Headers */
+.container :global(h1),
+.container :global(h2),
+.container :global(h3),
+.container :global(h4),
+.container :global(h5),
+.container :global(h6) {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  letter-spacing: var(--letter-spacing-tight);
+  color: var(--markdownviewer-header-color);
+}
+
+.container :global(h1) {
+  font-size: var(--large-title);
+  border-bottom: 1px solid var(--markdownviewer-header-border);
+  padding-bottom: 0.3rem;
+}
+
+.container :global(h2) {
+  font-size: var(--title1);
+  border-bottom: 1px solid var(--markdownviewer-header-border);
+  padding-bottom: 0.3rem;
+}
+
+.container :global(h3) {
+  font-size: var(--title2);
+}
+.container :global(h4) {
+  font-size: var(--title3);
+}
+
+/* Paragraphs and lists */
+.container :global(p) {
+  margin-bottom: 1rem;
+  font-size: var(--body);
+  line-height: var(--line-height-relaxed);
+  letter-spacing: var(--letter-spacing-normal);
+  color: var(--markdownviewer-paragraph-color);
+}
+
+.container :global(ul),
+.container :global(ol) {
+  margin-bottom: 1rem;
+  padding-left: 2rem;
+}
+
+.container :global(li) {
+  margin-bottom: 0.25rem;
+}
+
+/* Links */
+.container :global(a) {
+  color: var(--markdownviewer-link-color);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.container :global(a:hover) {
+  color: var(--markdownviewer-link-hover-color);
+  text-decoration: underline;
+}
+
+/* Inline code */
+.container :global(code:not([class*="language-"])) {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: var(--markdownviewer-inline-code-bg);
+  border-radius: 6px;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  color: var(--markdownviewer-inline-code-color);
+}
+
+/* Code blocks */
+.container :global(pre) {
+  margin: 1rem 0;
+  padding: 1rem;
+  /* VS Code Dark Modern editor background */
+  background-color: var(--markdownviewer-code-block-bg);
+  border-radius: 6px;
+  overflow-x: auto;
+  border: 1px solid var(--markdownviewer-code-block-border);
+}
+
+.container :global(pre code) {
+  background-color: transparent;
+  padding: 0;
+  font-size: 14px;
+  line-height: 1.45;
+  /* VS Code default foreground */
+  color: var(--markdownviewer-code-block-color);
+}
+
+.copy_button {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  line-height: 1;
+  color: var(--markdownviewer-copy-button-color);
+  background-color: var(--markdownviewer-copy-button-bg);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease,
+    border-color 0.15s ease, transform 0.05s ease;
+}
+
+.copy_icon,
+.check_icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.copy_button:hover {
+  background-color: var(--markdownviewer-copy-button-hover-bg);
+}
+
+.copy_button:active {
+  transform: translateY(1px);
+}
+
+.copied {
+  color: var(--markdownviewer-copy-button-copied-color);
+  border-color: var(--markdownviewer-copy-button-copied-border);
+}
+
+.container :global(pre:hover) .copy_button {
+  opacity: 1;
+}
+
+/* Tables */
+.container :global(.table-wrapper) {
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+.container :global(table) {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.container :global(th),
+.container :global(td) {
+  padding: 0.75rem;
+  text-align: left;
+  border: 1px solid var(--markdownviewer-table-border);
+}
+
+.container :global(th) {
+  background-color: var(--markdownviewer-table-th-bg);
+  font-weight: 600;
+  color: var(--markdownviewer-table-th-color);
+}
+
+.container :global(tr:nth-child(even)) {
+  background-color: var(--markdownviewer-table-tr-even-bg);
+}
+
+.container :global(tr:hover) {
+  background-color: var(--markdownviewer-table-tr-hover-bg);
+}
+
+/* Horizontal rules */
+.container :global(hr) {
+  height: 0.25em;
+  padding: 0;
+  margin: 2rem 0;
+  background-color: var(--markdownviewer-hr-bg);
+  border: 0;
+}
+
+/* Blockquotes */
+.container :global(blockquote) {
+  padding: 0 1em;
+  color: var(--markdownviewer-blockquote-color);
+  border-left: 0.25em solid var(--markdownviewer-blockquote-border);
+  margin: 1rem 0;
+}
+
+/* Strong and emphasis */
+.container :global(strong) {
+  font-weight: 600;
+  color: var(--markdownviewer-strong-color);
+}
+
+.container :global(em) {
+  font-style: italic;
+}
+
+/* Syntax highlighting */
+.container :global(.token.comment),
+.container :global(.token.prolog),
+.container :global(.token.doctype),
+.container :global(.token.cdata) {
+  /* VS Code comment */
+  color: var(--markdownviewer-token-comment);
+}
+
+.container :global(.token.punctuation) {
+  color: var(--markdownviewer-token-punctuation);
+}
+
+.container :global(.token.tag),
+.container :global(.token.namespace),
+.container :global(.token.deleted),
+.container :global(.token.constant),
+.container :global(.token.symbol) {
+  /* VS Code blue (tags, constants) */
+  color: var(--markdownviewer-token-tag);
+}
+
+.container :global(.token.property),
+.container :global(.token.attr-name),
+.container :global(.token.selector),
+.container :global(.token.builtin) {
+  /* VS Code light blue (property/attr) */
+  color: var(--markdownviewer-token-property);
+}
+
+.container :global(.token.boolean),
+.container :global(.token.number) {
+  /* VS Code number/boolean */
+  color: var(--markdownviewer-token-boolean);
+}
+
+.container :global(.token.string),
+.container :global(.token.char),
+.container :global(.token.inserted) {
+  /* VS Code string */
+  color: var(--markdownviewer-token-string);
+}
+
+.container :global(.token.operator),
+.container :global(.token.entity),
+.container :global(.token.url),
+.container :global(.language-css .token.string),
+.container :global(.style .token.string) {
+  color: var(--markdownviewer-token-operator);
+}
+
+.container :global(.token.keyword),
+.container :global(.token.atrule) {
+  /* VS Code keyword */
+  color: var(--markdownviewer-token-keyword);
+}
+.container :global(.token.attr-value) {
+  color: var(--markdownviewer-token-string);
+}
+
+.container :global(.token.function),
+.container :global(.token.class-name) {
+  /* VS Code function/type */
+  color: var(--markdownviewer-token-function);
+}
+
+.container :global(.token.regex),
+.container :global(.token.important),
+.container :global(.token.variable) {
+  color: var(--markdownviewer-token-regex);
+}
+</style>