@brickflow/ui 0.0.40 → 0.0.43

package/dist/runtime/pages/ui.vue

@@ -1,348 +1,442 @@
-<script setup>
-import { useHead, useRoute, useRouter } from "nuxt/app";
-import { computed, nextTick, onMounted, ref, watch } from "vue";
-import { uiComponents } from "#brickflow-ui-catalog";
-import { uiThemeEnabled } from "#brickflow-ui-options";
-import { useTheme } from "../composables/useTheme";
-useHead({
-  meta: [
-    {
-      content: "noindex, nofollow, noarchive",
-      name: "robots"
-    }
-  ],
-  title: "UI playground"
-});
-const route = useRoute();
-const router = useRouter();
-const expandedDemoCode = ref(/* @__PURE__ */ new Set());
-const isNavigationOpen = ref(false);
-const mobileNavigation = ref();
-const colorSwatchesReady = ref(false);
-const stylesExpanded = ref(false);
-const theme = uiThemeEnabled ? useTheme() : void 0;
-const isDark = computed(() => theme?.isDark.value ?? false);
-const toggleTheme = () => theme?.toggleTheme();
-const activeComponent = computed(() => {
-  const component = route.query.component;
-  const id = typeof component === "string" ? component : void 0;
-  return uiComponents.find((item) => item.id === id) ?? uiComponents[0];
-});
-const visibleStyles = computed(() => {
-  const styles = activeComponent.value?.styles ?? [];
-  return stylesExpanded.value ? styles : styles.slice(0, 5);
-});
-const getDemoCodeKey = (demoId) => `${activeComponent.value?.id}:${demoId}`;
-const escapeHtml = (value) => value.replace(
-  /[&<>"']/g,
-  (character) => ({
-    '"': "&quot;",
-    "&": "&amp;",
-    "'": "&#39;",
-    "<": "&lt;",
-    ">": "&gt;"
-  })[character] ?? character
-);
-const token = (className, value) => `<span class="${className}">${value}</span>`;
-const highlightTypeScript = (source) => {
-  const pattern = /\/\*[\s\S]*?\*\/|\/\/[^\n]*|`(?:\\[\s\S]|[^`])*`|'(?:\\[\s\S]|[^'])*'|"(?:\\[\s\S]|[^"])*"|\b(?:as|async|await|const|export|from|function|import|interface|let|return|type)\b|\b\d+(?:\.\d+)?\b/g;
-  let html = "";
-  let lastIndex = 0;
-  for (const match of source.matchAll(pattern)) {
-    const index = match.index ?? 0;
-    const value = match[0];
-    html += escapeHtml(source.slice(lastIndex, index));
-    if (value.startsWith("//") || value.startsWith("/*")) {
-      html += token("ui-code-comment", escapeHtml(value));
-    } else if (value.startsWith("'") || value.startsWith('"') || value.startsWith("`")) {
-      html += token("ui-code-string", escapeHtml(value));
-    } else if (/^\d/.test(value)) {
-      html += token("ui-code-number", value);
-    } else {
-      html += token("ui-code-keyword", value);
+<script lang="ts" setup>
+  import { useHead, useRoute, useRouter } from 'nuxt/app'
+  import { computed, nextTick, onMounted, ref, watch } from 'vue'
+
+  import { uiComponents } from '#brickflow-ui-catalog'
+  import { uiThemeEnabled } from '#brickflow-ui-options'
+
+  import { useTheme } from '../composables/useTheme'
+
+  useHead({
+    meta: [
+      {
+        content: 'noindex, nofollow, noarchive',
+        name: 'robots',
+      },
+    ],
+    title: 'UI playground',
+  })
+
+  const route = useRoute()
+  const router = useRouter()
+  const expandedDemoCode = ref(new Set<string>())
+  const isNavigationOpen = ref(false)
+  const mobileNavigation = ref<HTMLElement>()
+  const colorSwatchesReady = ref(false)
+  const stylesExpanded = ref(false)
+  const theme = uiThemeEnabled ? useTheme() : undefined
+  const isDark = computed(() => theme?.isDark.value ?? false)
+  const toggleTheme = (): void => theme?.toggleTheme()
+
+  const activeComponent = computed(() => {
+    const component = route.query.component
+    const id = typeof component === 'string' ? component : undefined
+
+    return uiComponents.find((item) => item.id === id) ?? uiComponents[0]
+  })
+
+  const visibleStyles = computed(() => {
+    const styles = activeComponent.value?.styles ?? []
+
+    return stylesExpanded.value ? styles : styles.slice(0, 5)
+  })
+
+  const getDemoCodeKey = (demoId: string): string => `${activeComponent.value?.id}:${demoId}`
+
+  const escapeHtml = (value: string): string =>
+    value.replace(
+      /[&<>"']/g,
+      (character) =>
+        ({
+          '"': '&quot;',
+          '&': '&amp;',
+          "'": '&#39;',
+          '<': '&lt;',
+          '>': '&gt;',
+        })[character] ?? character,
+    )
+
+  const token = (className: string, value: string): string => `<span class="${className}">${value}</span>`
+
+  const highlightTypeScript = (source: string): string => {
+    const pattern =
+      /\/\*[\s\S]*?\*\/|\/\/[^\n]*|`(?:\\[\s\S]|[^`])*`|'(?:\\[\s\S]|[^'])*'|"(?:\\[\s\S]|[^"])*"|\b(?:as|async|await|const|export|from|function|import|interface|let|return|type)\b|\b\d+(?:\.\d+)?\b/g
+    let html = ''
+    let lastIndex = 0
+
+    for (const match of source.matchAll(pattern)) {
+      const index = match.index ?? 0
+      const value = match[0]
+      html += escapeHtml(source.slice(lastIndex, index))
+
+      if (value.startsWith('//') || value.startsWith('/*')) {
+        html += token('ui-code-comment', escapeHtml(value))
+      } else if (value.startsWith("'") || value.startsWith('"') || value.startsWith('`')) {
+        html += token('ui-code-string', escapeHtml(value))
+      } else if (/^\d/.test(value)) {
+        html += token('ui-code-number', value)
+      } else {
+        html += token('ui-code-keyword', value)
+      }
+
+      lastIndex = index + value.length
     }
-    lastIndex = index + value.length;
+
+    return html + escapeHtml(source.slice(lastIndex))
   }
-  return html + escapeHtml(source.slice(lastIndex));
-};
-const highlightPropType = (source) => {
-  const pattern = /`(?:\\[\s\S]|[^`])*`|'(?:\\[\s\S]|[^'])*'|"(?:\\[\s\S]|[^"])*"|\b(?:any|bigint|boolean|never|null|number|object|string|symbol|undefined|unknown|void)\b|\b[A-Z]\w*\b|\|/g;
-  let html = "";
-  let lastIndex = 0;
-  for (const match of source.matchAll(pattern)) {
-    const index = match.index ?? 0;
-    const value = match[0];
-    html += escapeHtml(source.slice(lastIndex, index));
-    if (value.startsWith("'") || value.startsWith('"') || value.startsWith("`")) {
-      html += token("ui-code-string", escapeHtml(value));
-    } else if (value === "|") {
-      html += token("ui-code-punctuation", value);
-    } else if (/^[A-Z]/.test(value)) {
-      html += token("ui-code-tag", escapeHtml(value));
-    } else {
-      html += token("ui-code-keyword", value);
+
+  const highlightPropType = (source: string): string => {
+    const pattern =
+      /`(?:\\[\s\S]|[^`])*`|'(?:\\[\s\S]|[^'])*'|"(?:\\[\s\S]|[^"])*"|\b(?:any|bigint|boolean|never|null|number|object|string|symbol|undefined|unknown|void)\b|\b[A-Z]\w*\b|\|/g
+    let html = ''
+    let lastIndex = 0
+
+    for (const match of source.matchAll(pattern)) {
+      const index = match.index ?? 0
+      const value = match[0]
+      html += escapeHtml(source.slice(lastIndex, index))
+
+      if (value.startsWith("'") || value.startsWith('"') || value.startsWith('`')) {
+        html += token('ui-code-string', escapeHtml(value))
+      } else if (value === '|') {
+        html += token('ui-code-punctuation', value)
+      } else if (/^[A-Z]/.test(value)) {
+        html += token('ui-code-tag', escapeHtml(value))
+      } else {
+        html += token('ui-code-keyword', value)
+      }
+
+      lastIndex = index + value.length
     }
-    lastIndex = index + value.length;
-  }
-  return html + escapeHtml(source.slice(lastIndex));
-};
-const highlightTag = (source) => {
-  const opening = source.match(/^<(\/)?([\w.-]+)/);
-  const closing = source.match(/\/?>\s*$/);
-  if (!opening || !closing) {
-    return escapeHtml(source);
-  }
-  const attributes = source.slice(opening[0].length, source.length - closing[0].length);
-  let html = token("ui-code-punctuation", "&lt;");
-  let attributeIndex = 0;
-  if (opening[1]) {
-    html += token("ui-code-punctuation", "/");
+
+    return html + escapeHtml(source.slice(lastIndex))
   }
-  html += token("ui-code-tag", escapeHtml(opening[2] ?? ""));
-  while (attributeIndex < attributes.length) {
-    const character = attributes[attributeIndex] ?? "";
-    if (/\s/.test(character)) {
-      html += escapeHtml(character);
-      attributeIndex += 1;
-      continue;
-    }
-    const nameStart = attributeIndex;
-    while (attributeIndex < attributes.length && !/[\s=]/.test(attributes[attributeIndex] ?? "")) {
-      attributeIndex += 1;
-    }
-    const name = attributes.slice(nameStart, attributeIndex);
-    html += token("ui-code-attribute", escapeHtml(name));
-    const whitespaceStart = attributeIndex;
-    while (/\s/.test(attributes[attributeIndex] ?? "")) {
-      attributeIndex += 1;
-    }
-    html += escapeHtml(attributes.slice(whitespaceStart, attributeIndex));
-    if (attributes[attributeIndex] !== "=") {
-      continue;
+
+  const highlightTag = (source: string): string => {
+    const opening = source.match(/^<(\/)?([\w.-]+)/)
+    const closing = source.match(/\/?>\s*$/)
+
+    if (!opening || !closing) {
+      return escapeHtml(source)
     }
-    html += token("ui-code-punctuation", "=");
-    attributeIndex += 1;
-    const valueWhitespaceStart = attributeIndex;
-    while (/\s/.test(attributes[attributeIndex] ?? "")) {
-      attributeIndex += 1;
+
+    const attributes = source.slice(opening[0].length, source.length - closing[0].length)
+    let html = token('ui-code-punctuation', '&lt;')
+    let attributeIndex = 0
+
+    if (opening[1]) {
+      html += token('ui-code-punctuation', '/')
     }
-    html += escapeHtml(attributes.slice(valueWhitespaceStart, attributeIndex));
-    const quote = attributes[attributeIndex];
-    const valueStart = attributeIndex;
-    if (quote === '"' || quote === "'") {
-      attributeIndex += 1;
-      while (attributeIndex < attributes.length && attributes[attributeIndex] !== quote) {
-        attributeIndex += attributes[attributeIndex] === "\\" ? 2 : 1;
+
+    html += token('ui-code-tag', escapeHtml(opening[2] ?? ''))
+
+    while (attributeIndex < attributes.length) {
+      const character = attributes[attributeIndex] ?? ''
+      if (/\s/.test(character)) {
+        html += escapeHtml(character)
+        attributeIndex += 1
+        continue
       }
-      attributeIndex += 1;
-    } else {
-      while (attributeIndex < attributes.length && !/\s/.test(attributes[attributeIndex] ?? "")) {
-        attributeIndex += 1;
+
+      const nameStart = attributeIndex
+      while (attributeIndex < attributes.length && !/[\s=]/.test(attributes[attributeIndex] ?? '')) {
+        attributeIndex += 1
       }
-    }
-    html += token("ui-code-string", escapeHtml(attributes.slice(valueStart, attributeIndex)));
-  }
-  html += token("ui-code-punctuation", escapeHtml(closing[0]));
-  return html;
-};
-const highlightTemplate = (source) => {
-  let html = "";
-  let index = 0;
-  while (index < source.length) {
-    const commentStart = source.indexOf("<!--", index);
-    const interpolationStart = source.indexOf("{{", index);
-    const tagStart = source.indexOf("<", index);
-    const starts = [commentStart, interpolationStart, tagStart].filter((start2) => start2 !== -1);
-    const start = Math.min(...starts);
-    if (!Number.isFinite(start)) {
-      return html + escapeHtml(source.slice(index));
-    }
-    html += escapeHtml(source.slice(index, start));
-    if (start === commentStart) {
-      const end = source.indexOf("-->", start + 4);
-      if (end === -1) {
-        return html + token("ui-code-comment", escapeHtml(source.slice(start)));
+
+      const name = attributes.slice(nameStart, attributeIndex)
+      html += token('ui-code-attribute', escapeHtml(name))
+
+      const whitespaceStart = attributeIndex
+      while (/\s/.test(attributes[attributeIndex] ?? '')) {
+        attributeIndex += 1
       }
-      html += token("ui-code-comment", escapeHtml(source.slice(start, end + 3)));
-      index = end + 3;
-    } else if (start === interpolationStart) {
-      const end = source.indexOf("}}", start + 2);
-      if (end === -1) {
-        return html + escapeHtml(source.slice(start));
+      html += escapeHtml(attributes.slice(whitespaceStart, attributeIndex))
+
+      if (attributes[attributeIndex] !== '=') {
+        continue
       }
-      html += token("ui-code-punctuation", "{{");
-      html += highlightTypeScript(source.slice(start + 2, end));
-      html += token("ui-code-punctuation", "}}");
-      index = end + 2;
-    } else {
-      let tagEnd = start + 1;
-      let quote = "";
-      while (tagEnd < source.length) {
-        const character = source[tagEnd] ?? "";
-        if (quote) {
-          if (character === "\\") {
-            tagEnd += 2;
-            continue;
-          }
-          if (character === quote) {
-            quote = "";
-          }
-        } else if (character === '"' || character === "'") {
-          quote = character;
-        } else if (character === ">") {
-          break;
-        }
-        tagEnd += 1;
+
+      html += token('ui-code-punctuation', '=')
+      attributeIndex += 1
+
+      const valueWhitespaceStart = attributeIndex
+      while (/\s/.test(attributes[attributeIndex] ?? '')) {
+        attributeIndex += 1
       }
-      const tag = source.slice(start, tagEnd + 1);
-      if (/^<\/?[\w.-]/.test(tag)) {
-        html += highlightTag(tag);
+      html += escapeHtml(attributes.slice(valueWhitespaceStart, attributeIndex))
+
+      const quote = attributes[attributeIndex]
+      const valueStart = attributeIndex
+      if (quote === '"' || quote === "'") {
+        attributeIndex += 1
+        while (attributeIndex < attributes.length && attributes[attributeIndex] !== quote) {
+          attributeIndex += attributes[attributeIndex] === '\\' ? 2 : 1
+        }
+        attributeIndex += 1
       } else {
-        html += escapeHtml(tag);
+        while (attributeIndex < attributes.length && !/\s/.test(attributes[attributeIndex] ?? '')) {
+          attributeIndex += 1
+        }
       }
-      index = tagEnd + 1;
+
+      html += token('ui-code-string', escapeHtml(attributes.slice(valueStart, attributeIndex)))
     }
+
+    html += token('ui-code-punctuation', escapeHtml(closing[0]))
+
+    return html
   }
-  return html;
-};
-const highlightDemoCode = (source) => {
-  const scriptPattern = /(<script\b[^>]*>)([\s\S]*?)(<\/script>)/g;
-  let html = "";
-  let lastIndex = 0;
-  for (const match of source.matchAll(scriptPattern)) {
-    const index = match.index ?? 0;
-    html += highlightTemplate(source.slice(lastIndex, index));
-    html += highlightTag(match[1] ?? "");
-    html += highlightTypeScript(match[2] ?? "");
-    html += highlightTag(match[3] ?? "");
-    lastIndex = index + match[0].length;
-  }
-  return html + highlightTemplate(source.slice(lastIndex));
-};
-const highlightTailwindValue = (value) => {
-  const pattern = /\d+(?:\.\d+)?/g;
-  let html = "";
-  let lastIndex = 0;
-  for (const match of value.matchAll(pattern)) {
-    const index = match.index ?? 0;
-    html += token("ui-code-string", escapeHtml(value.slice(lastIndex, index)));
-    html += token("ui-code-number", match[0]);
-    lastIndex = index + match[0].length;
+
+  const highlightTemplate = (source: string): string => {
+    let html = ''
+    let index = 0
+
+    while (index < source.length) {
+      const commentStart = source.indexOf('<!--', index)
+      const interpolationStart = source.indexOf('{{', index)
+      const tagStart = source.indexOf('<', index)
+      const starts = [commentStart, interpolationStart, tagStart].filter((start) => start !== -1)
+      const start = Math.min(...starts)
+
+      if (!Number.isFinite(start)) {
+        return html + escapeHtml(source.slice(index))
+      }
+
+      html += escapeHtml(source.slice(index, start))
+
+      if (start === commentStart) {
+        const end = source.indexOf('-->', start + 4)
+        if (end === -1) {
+          return html + token('ui-code-comment', escapeHtml(source.slice(start)))
+        }
+
+        html += token('ui-code-comment', escapeHtml(source.slice(start, end + 3)))
+        index = end + 3
+      } else if (start === interpolationStart) {
+        const end = source.indexOf('}}', start + 2)
+        if (end === -1) {
+          return html + escapeHtml(source.slice(start))
+        }
+
+        html += token('ui-code-punctuation', '{{')
+        html += highlightTypeScript(source.slice(start + 2, end))
+        html += token('ui-code-punctuation', '}}')
+        index = end + 2
+      } else {
+        let tagEnd = start + 1
+        let quote = ''
+
+        while (tagEnd < source.length) {
+          const character = source[tagEnd] ?? ''
+          if (quote) {
+            if (character === '\\') {
+              tagEnd += 2
+              continue
+            }
+
+            if (character === quote) {
+              quote = ''
+            }
+          } else if (character === '"' || character === "'") {
+            quote = character
+          } else if (character === '>') {
+            break
+          }
+
+          tagEnd += 1
+        }
+
+        const tag = source.slice(start, tagEnd + 1)
+        if (/^<\/?[\w.-]/.test(tag)) {
+          html += highlightTag(tag)
+        } else {
+          html += escapeHtml(tag)
+        }
+        index = tagEnd + 1
+      }
+    }
+
+    return html
   }
-  return html + token("ui-code-string", escapeHtml(value.slice(lastIndex)));
-};
-const getTailwindColorSwatch = (utility) => {
-  const match = utility.match(
-    /^(?:accent|bg|border|caret|decoration|divide|fill|from|outline|ring|shadow|stroke|text|to|via)-([a-z][a-z0-9-]*)(?:\/(\d{1,3}))?$/
-  );
-  if (!colorSwatchesReady.value || !match || typeof window === "undefined") {
-    return "";
+
+  const highlightDemoCode = (source: string): string => {
+    const scriptPattern = /(<script\b[^>]*>)([\s\S]*?)(<\/script>)/g
+    let html = ''
+    let lastIndex = 0
+
+    for (const match of source.matchAll(scriptPattern)) {
+      const index = match.index ?? 0
+      html += highlightTemplate(source.slice(lastIndex, index))
+      html += highlightTag(match[1] ?? '')
+      html += highlightTypeScript(match[2] ?? '')
+      html += highlightTag(match[3] ?? '')
+      lastIndex = index + match[0].length
+    }
+
+    return html + highlightTemplate(source.slice(lastIndex))
   }
-  const [, name, opacity] = match;
-  const colorVariable = `--color-${name}`;
-  const color = getComputedStyle(document.body).getPropertyValue(colorVariable).trim();
-  if (!color || !CSS.supports("color", color)) {
-    return "";
+
+  const highlightTailwindValue = (value: string): string => {
+    const pattern = /\d+(?:\.\d+)?/g
+    let html = ''
+    let lastIndex = 0
+
+    for (const match of value.matchAll(pattern)) {
+      const index = match.index ?? 0
+      html += token('ui-code-string', escapeHtml(value.slice(lastIndex, index)))
+      html += token('ui-code-number', match[0])
+      lastIndex = index + match[0].length
+    }
+
+    return html + token('ui-code-string', escapeHtml(value.slice(lastIndex)))
   }
-  const opacityValue = opacity && Number(opacity) <= 100 ? Number(opacity) : void 0;
-  const background = opacityValue ? `color-mix(in srgb, var(${colorVariable}) ${opacityValue}%, transparent)` : `var(${colorVariable})`;
-  return `<span aria-hidden="true" class="ui-color-swatch" style="--ui-color-swatch: ${background}"></span>`;
-};
-const highlightTailwindUtility = (utility) => {
-  let source = utility;
-  let html = "";
-  for (const prefix of ["!", "-"]) {
-    if (source.startsWith(prefix)) {
-      html += token("ui-code-punctuation", prefix);
-      source = source.slice(prefix.length);
+
+  const getTailwindColorSwatch = (utility: string): string => {
+    const match = utility.match(
+      /^(?:accent|bg|border|caret|decoration|divide|fill|from|outline|ring|shadow|stroke|text|to|via)-([a-z][a-z0-9-]*)(?:\/(\d{1,3}))?$/,
+    )
+
+    if (!colorSwatchesReady.value || !match || typeof window === 'undefined') {
+      return ''
+    }
+
+    const [, name, opacity] = match
+    const colorVariable = `--color-${name}`
+    const color = getComputedStyle(document.body).getPropertyValue(colorVariable).trim()
+
+    if (!color || !CSS.supports('color', color)) {
+      return ''
     }
+
+    const opacityValue = opacity && Number(opacity) <= 100 ? Number(opacity) : undefined
+    const background = opacityValue
+      ? `color-mix(in srgb, var(${colorVariable}) ${opacityValue}%, transparent)`
+      : `var(${colorVariable})`
+
+    return `<span aria-hidden="true" class="ui-color-swatch" style="--ui-color-swatch: ${background}"></span>`
   }
-  html += getTailwindColorSwatch(source);
-  const separatorIndex = source.indexOf("-");
-  if (separatorIndex === -1) {
-    return html + token("ui-code-attribute", escapeHtml(source));
+
+  const highlightTailwindUtility = (utility: string): string => {
+    let source = utility
+    let html = ''
+
+    for (const prefix of ['!', '-']) {
+      if (source.startsWith(prefix)) {
+        html += token('ui-code-punctuation', prefix)
+        source = source.slice(prefix.length)
+      }
+    }
+
+    html += getTailwindColorSwatch(source)
+
+    const separatorIndex = source.indexOf('-')
+    if (separatorIndex === -1) {
+      return html + token('ui-code-attribute', escapeHtml(source))
+    }
+
+    html += token('ui-code-attribute', escapeHtml(source.slice(0, separatorIndex)))
+    html += token('ui-code-punctuation', '-')
+
+    return html + highlightTailwindValue(source.slice(separatorIndex + 1))
   }
-  html += token("ui-code-attribute", escapeHtml(source.slice(0, separatorIndex)));
-  html += token("ui-code-punctuation", "-");
-  return html + highlightTailwindValue(source.slice(separatorIndex + 1));
-};
-const highlightTailwindClass = (className) => {
-  const segments = [];
-  let start = 0;
-  let bracketDepth = 0;
-  for (let index = 0; index < className.length; index += 1) {
-    const character = className[index];
-    if (character === "[") {
-      bracketDepth += 1;
-    } else if (character === "]") {
-      bracketDepth = Math.max(0, bracketDepth - 1);
-    } else if (character === ":" && bracketDepth === 0) {
-      segments.push(className.slice(start, index));
-      start = index + 1;
+
+  const highlightTailwindClass = (className: string): string => {
+    const segments: string[] = []
+    let start = 0
+    let bracketDepth = 0
+
+    for (let index = 0; index < className.length; index += 1) {
+      const character = className[index]
+
+      if (character === '[') {
+        bracketDepth += 1
+      } else if (character === ']') {
+        bracketDepth = Math.max(0, bracketDepth - 1)
+      } else if (character === ':' && bracketDepth === 0) {
+        segments.push(className.slice(start, index))
+        start = index + 1
+      }
     }
+
+    const utility = className.slice(start)
+    const variants = segments.map(
+      (segment) => `${token('ui-code-keyword', escapeHtml(segment))}${token('ui-code-punctuation', ':')}`,
+    )
+
+    return variants.join('') + highlightTailwindUtility(utility)
   }
-  const utility = className.slice(start);
-  const variants = segments.map(
-    (segment) => `${token("ui-code-keyword", escapeHtml(segment))}${token("ui-code-punctuation", ":")}`
-  );
-  return variants.join("") + highlightTailwindUtility(utility);
-};
-const highlightStyleValue = (value) => {
-  if (value === void 0) {
-    return token("ui-code-comment", "\u2014");
+
+  const highlightStyleValue = (value: string | undefined): string => {
+    if (value === undefined) {
+      return token('ui-code-comment', '—')
+    }
+
+    if (value === '') {
+      return token('ui-code-string', '&quot;&quot;')
+    }
+
+    return value
+      .split(/(\s+)/)
+      .map((part) => (/\s/.test(part) ? escapeHtml(part) : highlightTailwindClass(part)))
+      .join('')
   }
-  if (value === "") {
-    return token("ui-code-string", "&quot;&quot;");
+
+  const isDemoCodeExpanded = (demoId: string): boolean => expandedDemoCode.value.has(getDemoCodeKey(demoId))
+
+  const toggleDemoCode = (demoId: string): void => {
+    const key = getDemoCodeKey(demoId)
+    const next = new Set(expandedDemoCode.value)
+
+    next.has(key) ? next.delete(key) : next.add(key)
+    expandedDemoCode.value = next
   }
-  return value.split(/(\s+)/).map((part) => /\s/.test(part) ? escapeHtml(part) : highlightTailwindClass(part)).join("");
-};
-const isDemoCodeExpanded = (demoId) => expandedDemoCode.value.has(getDemoCodeKey(demoId));
-const toggleDemoCode = (demoId) => {
-  const key = getDemoCodeKey(demoId);
-  const next = new Set(expandedDemoCode.value);
-  next.has(key) ? next.delete(key) : next.add(key);
-  expandedDemoCode.value = next;
-};
-const closeNavigation = () => {
-  isNavigationOpen.value = false;
-};
-onMounted(() => {
-  colorSwatchesReady.value = true;
-});
-watch(isNavigationOpen, async (isOpen) => {
-  if (isOpen) {
-    await nextTick();
-    mobileNavigation.value?.focus();
+
+  const closeNavigation = (): void => {
+    isNavigationOpen.value = false
   }
-});
-watch(
-  () => route.query.component,
-  (component) => {
-    closeNavigation();
-    window.scrollTo({ behavior: "smooth", top: 0 });
-    if (typeof component === "string" && uiComponents.some((item) => item.id === component)) {
-      return;
-    }
-    const firstComponent = uiComponents[0];
-    if (!firstComponent) {
-      return;
+
+  onMounted(() => {
+    colorSwatchesReady.value = true
+  })
+
+  watch(isNavigationOpen, async (isOpen) => {
+    if (isOpen) {
+      await nextTick()
+      mobileNavigation.value?.focus()
     }
-    router.replace({
-      path: "/ui",
-      query: {
-        ...route.query,
-        component: firstComponent.id
+  })
+
+  watch(
+    () => route.query.component,
+    (component) => {
+      closeNavigation()
+      window.scrollTo({ behavior: 'smooth', top: 0 })
+      if (typeof component === 'string' && uiComponents.some((item) => item.id === component)) {
+        return
       }
-    });
-  },
-  { immediate: true }
-);
-watch(
-  () => activeComponent.value?.id,
-  () => {
-    stylesExpanded.value = false;
-  }
-);
+
+      const firstComponent = uiComponents[0]
+      if (!firstComponent) {
+        return
+      }
+
+      router.replace({
+        path: '/ui',
+        query: {
+          ...route.query,
+          component: firstComponent.id,
+        },
+      })
+    },
+    { immediate: true },
+  )
+
+  watch(
+    () => activeComponent.value?.id,
+    () => {
+      stylesExpanded.value = false
+    },
+  )
 </script>
 
 <template>
@@ -423,18 +517,20 @@ watch(
           <NuxtLink
             v-for="component in uiComponents"
             :key="component.id"
-            :aria-current="activeComponent?.id === component.id ? 'page' : void 0"
+            :aria-current="activeComponent?.id === component.id ? 'page' : undefined"
             :class="[
-  'block rounded-lg px-3 py-2.5 text-sm font-semibold tracking-wide transition',
-  activeComponent?.id === component.id ? 'bg-blue-900 text-blue-100' : 'text-zinc-400 hover:bg-zinc-900 hover:text-zinc-100'
-]"
+              'block rounded-lg px-3 py-2.5 text-sm font-semibold tracking-wide transition',
+              activeComponent?.id === component.id
+                ? 'bg-blue-900 text-blue-100'
+                : 'text-zinc-400 hover:bg-zinc-900 hover:text-zinc-100',
+            ]"
             :to="{
-  path: '/ui',
-  query: {
-    ...route.query,
-    component: component.id
-  }
-}"
+              path: '/ui',
+              query: {
+                ...route.query,
+                component: component.id,
+              },
+            }"
             @click="closeNavigation"
           >
             {{ component.name }}
@@ -454,18 +550,20 @@ watch(
           <NuxtLink
             v-for="component in uiComponents"
             :key="component.id"
-            :aria-current="activeComponent?.id === component.id ? 'page' : void 0"
+            :aria-current="activeComponent?.id === component.id ? 'page' : undefined"
             :class="[
-  'block rounded-lg px-3 py-2 text-sm font-semibold tracking-wide transition',
-  activeComponent?.id === component.id ? 'bg-blue-900 text-blue-100' : 'text-zinc-400 hover:bg-zinc-900 hover:text-zinc-100'
-]"
+              'block rounded-lg px-3 py-2 text-sm font-semibold tracking-wide transition',
+              activeComponent?.id === component.id
+                ? 'bg-blue-900 text-blue-100'
+                : 'text-zinc-400 hover:bg-zinc-900 hover:text-zinc-100',
+            ]"
             :to="{
-  path: '/ui',
-  query: {
-    ...route.query,
-    component: component.id
-  }
-}"
+              path: '/ui',
+              query: {
+                ...route.query,
+                component: component.id,
+              },
+            }"
           >
             {{ component.name }}
           </NuxtLink>
@@ -540,9 +638,11 @@ watch(
                 type="button"
                 :aria-label="isDemoCodeExpanded(demo.id) ? 'Hide code' : 'View code'"
                 :class="[
-  'flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md border transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400',
-  isDemoCodeExpanded(demo.id) ? 'border-blue-700 bg-blue-900 text-blue-200' : 'border-zinc-700 text-zinc-400 hover:border-blue-700 hover:text-blue-200'
-]"
+                  'flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md border transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400',
+                  isDemoCodeExpanded(demo.id)
+                    ? 'border-blue-700 bg-blue-900 text-blue-200'
+                    : 'border-zinc-700 text-zinc-400 hover:border-blue-700 hover:text-blue-200',
+                ]"
                 :title="isDemoCodeExpanded(demo.id) ? 'Hide code' : 'View code'"
                 @click="toggleDemoCode(demo.id)"
               >
@@ -562,7 +662,7 @@ watch(
                 </svg>
               </button>
             </header>
-            <div class="p-8 mb:p-4">
+            <div class="overflow-auto p-8 mb:p-4">
               <component :is="demo.component" />
             </div>
             <div
@@ -615,7 +715,7 @@ watch(
                           class="py-3 text-right text-xs"
                           :class="prop.required ? 'text-red-600' : 'text-zinc-500'"
                         >
-                          {{ prop.required ? "*" : "-" }}
+                          {{ prop.required ? '*' : '-' }}
                         </td>
                       </tr>
                       <tr v-if="activeComponent.props.length === 0">
@@ -700,7 +800,7 @@ watch(
                 class="flex w-full cursor-pointer items-center justify-center text-sm font-medium text-cyan-500 transition hover:text-cyan-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-400"
                 @click="stylesExpanded = !stylesExpanded"
               >
-                {{ stylesExpanded ? "Collapse styles" : `Show all ${activeComponent.styles.length} styles` }}
+                {{ stylesExpanded ? 'Collapse styles' : `Show all ${activeComponent.styles.length} styles` }}
               </button>
             </footer>
           </section>
@@ -721,10 +821,77 @@ watch(
   </main>
 </template>
 
-<style src="../ui-page.css">
-
-</style>
+<style src="../ui-page.css"></style>
 
 <style module>
-:global(.ui-code-comment){color:var(--color-zinc-500,#71717a)}:global(.ui-code-string){color:var(--color-emerald-400,#34d399)}:global(.ui-code-keyword){color:var(--color-blue-400,#60a5fa)}:global(.ui-code-number){color:var(--color-amber-300,#fcd34d)}:global(.ui-code-tag){color:var(--color-cyan-500,#22d3ee)}:global(.ui-code-attribute){color:var(--color-violet-300,#c4b5fd)}:global(.ui-code-punctuation){color:var(--color-zinc-400,#a1a1aa)}:global(.ui-color-swatch){background:var(--ui-color-swatch);border:1px solid hsla(0,0%,100%,.1);border-radius:.2rem;display:inline-block;height:.65rem;margin-right:.25rem;opacity:.85;vertical-align:-.1rem;width:.65rem}.mobileNavigation{width:min(18rem,calc(100vw - 3rem))}@media (width >= 40rem){.styleGrid{grid-template-columns:minmax(12rem,.8fr) minmax(0,1.8fr)}}.styleValue :global(.ui-code-keyword){color:var(--color-zinc-500,#71717a)}.styleValue :global(.ui-code-attribute){color:var(--color-zinc-200,#e4e4e7)}.styleValue :global(.ui-code-string){color:var(--color-zinc-300,#d4d4d8)}.styleValue :global(.ui-code-number){color:var(--color-zinc-400,#a1a1aa)}.styleValue :global(.ui-code-punctuation){color:var(--color-zinc-500,#71717a)}
+  :global(.ui-code-comment) {
+    color: var(--color-zinc-500, #71717a);
+  }
+
+  :global(.ui-code-string) {
+    color: var(--color-emerald-400, #34d399);
+  }
+
+  :global(.ui-code-keyword) {
+    color: var(--color-blue-400, #60a5fa);
+  }
+
+  :global(.ui-code-number) {
+    color: var(--color-amber-300, #fcd34d);
+  }
+
+  :global(.ui-code-tag) {
+    color: var(--color-cyan-500, #22d3ee);
+  }
+
+  :global(.ui-code-attribute) {
+    color: var(--color-violet-300, #c4b5fd);
+  }
+
+  :global(.ui-code-punctuation) {
+    color: var(--color-zinc-400, #a1a1aa);
+  }
+
+  :global(.ui-color-swatch) {
+    display: inline-block;
+    width: 0.65rem;
+    height: 0.65rem;
+    margin-right: 0.25rem;
+    vertical-align: -0.1rem;
+    border: 1px solid rgb(255 255 255 / 10%);
+    border-radius: 0.2rem;
+    background: var(--ui-color-swatch);
+    opacity: 0.85;
+    /* box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%); */
+  }
+
+  .mobileNavigation {
+    width: min(18rem, calc(100vw - 3rem));
+  }
+
+  @media (width >= 40rem) {
+    .styleGrid {
+      grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1.8fr);
+    }
+  }
+
+  .styleValue :global(.ui-code-keyword) {
+    color: var(--color-zinc-500, #71717a);
+  }
+
+  .styleValue :global(.ui-code-attribute) {
+    color: var(--color-zinc-200, #e4e4e7);
+  }
+
+  .styleValue :global(.ui-code-string) {
+    color: var(--color-zinc-300, #d4d4d8);
+  }
+
+  .styleValue :global(.ui-code-number) {
+    color: var(--color-zinc-400, #a1a1aa);
+  }
+
+  .styleValue :global(.ui-code-punctuation) {
+    color: var(--color-zinc-500, #71717a);
+  }
 </style>