@meistrari/tela-build 1.21.0 → 1.23.0

package/components/tela/card/card.mdx

@@ -0,0 +1,62 @@
+# TelaCard
+
+A surface container component used to group related content with consistent visual boundaries.
+
+## Size Prop
+
+Always use the `size` prop to control card padding — it maps directly to the standardized values. Never apply padding manually to `<TelaCard>` or its inner elements.
+
+| `size` | Applied classes | Use for |
+|--------|------------------|---------|
+| `md` *(default)* | `p-32px sm:p-48px rounded-24px` | Standard and large cards |
+| `sm` | `p-24px rounded-12px` | Small cards, inner containers |
+
+```vue
+<!-- Correct — use size prop -->
+<TelaCard size="md">...</TelaCard>
+<TelaCard size="sm">...</TelaCard>
+<TelaCard>...</TelaCard> <!-- md is the default -->
+
+<!-- Incorrect — never apply padding manually -->
+<TelaCard class="p-20px">...</TelaCard>
+<TelaCard>
+  <div class="p-20px">...</div>
+</TelaCard>
+```
+
+## Examples
+
+### Standard Card (default)
+
+```vue
+<TelaCard>
+  <h2 class="heading-h4-semibold text-contrast">Title</h2>
+  <p class="body-14-regular text-secondary">Supporting description text.</p>
+</TelaCard>
+```
+
+### Minor / Inner Card
+
+```vue
+<TelaCard size="sm">
+  <span class="body-12-medium text-secondary">Compact content</span>
+</TelaCard>
+```
+
+### Card Grid
+
+```vue
+<div class="grid grid-cols-3 gap-4">
+  <TelaCard v-for="item in items" :key="item.id">...</TelaCard>
+</div>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `'sm' \| 'md'` | `'md'` | `md` = `p-32px sm:p-48px rounded-24px`, `sm` = `p-24px rounded-12px` |
+
+## Slots
+
+- `default` — Card body content

package/components/tela/card/card.stories.ts

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Card from './card.vue'
+
+const meta: Meta<typeof Card> = {
+    title: 'Core/Card',
+    component: Card,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A surface container that groups related content with consistent visual boundaries. Use the `size` prop to control padding — `md` for standard cards, `sm` for minor or inner containers.',
+            },
+        },
+    },
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['md', 'sm'],
+            description: '`md` applies standard card padding. `sm` applies minor/inner container padding.',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: args => ({
+        components: { Card },
+        setup() {
+            return { args }
+        },
+        template: `
+            <Card :size="args.size">
+                <div style="display: flex; flex-direction: column; gap: 8px; min-width: 280px;">
+                    <p class="heading-h4-semibold text-contrast">Card Title</p>
+                    <p class="body-14-regular text-secondary">This is supporting content inside the card. It adapts to the selected size.</p>
+                </div>
+            </Card>
+        `,
+    }),
+    args: {
+        size: 'md',
+    },
+}
+
+export const Standard: Story = {
+    render: () => ({
+        components: { Card },
+        template: `
+            <Card size="md">
+                <div style="display: flex; flex-direction: column; gap: 8px; min-width: 280px;">
+                    <p class="heading-h4-semibold text-contrast">Standard Card</p>
+                    <p class="body-14-regular text-secondary">Used for large, standard, and medium cards.</p>
+                </div>
+            </Card>
+        `,
+    }),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Default size (`md`). Use for primary content surfaces.',
+            },
+        },
+    },
+}
+
+export const Minor: Story = {
+    render: () => ({
+        components: { Card },
+        template: `
+            <Card size="sm">
+                <div style="display: flex; flex-direction: column; gap: 8px; min-width: 240px;">
+                    <p class="heading-h5-semibold text-contrast">Minor Card</p>
+                    <p class="body-12-regular text-secondary">Used for small cards and inner containers.</p>
+                </div>
+            </Card>
+        `,
+    }),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Small size (`sm`). Use for compact cards or nested inner containers.',
+            },
+        },
+    },
+}
+
+export const SizeComparison: Story = {
+    render: () => ({
+        components: { Card },
+        template: `
+            <div style="display: flex; gap: 16px; align-items: flex-start;">
+                <Card size="md">
+                    <div style="display: flex; flex-direction: column; gap: 6px; min-width: 200px;">
+                        <p class="body-12-medium text-secondary">size="md"</p>
+                        <p class="heading-h4-semibold text-contrast">Standard</p>
+                        <p class="body-14-regular text-tertiary">p-32px sm:p-48px padding</p>
+                    </div>
+                </Card>
+                <Card size="sm">
+                    <div style="display: flex; flex-direction: column; gap: 6px; min-width: 200px;">
+                        <p class="body-12-medium text-secondary">size="sm"</p>
+                        <p class="heading-h4-semibold text-contrast">Minor</p>
+                        <p class="body-14-regular text-tertiary">p-24px padding</p>
+                    </div>
+                </Card>
+            </div>
+        `,
+    }),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Side-by-side comparison of both size variants.',
+            },
+        },
+    },
+}
+
+export const Grid: Story = {
+    render: () => ({
+        components: { Card },
+        template: `
+            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 640px;">
+                <Card v-for="n in 3" :key="n">
+                    <div style="display: flex; flex-direction: column; gap: 4px;">
+                        <p class="heading-h5-semibold text-contrast">Card {{ n }}</p>
+                        <p class="body-12-regular text-secondary">Grid item</p>
+                    </div>
+                </Card>
+            </div>
+        `,
+    }),
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                story: 'Cards used in a grid layout. No padding override needed — `size="md"` is the default.',
+            },
+        },
+    },
+}

package/components/tela/card/card.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<{
+    size?: 'sm' | 'md'
+    class?: HTMLAttributes['class']
+    /** @deprecated Use `class` instead */
+    contentPadding?: HTMLAttributes['class']
+    /** @deprecated Use `class` instead */
+    borderRadius?: HTMLAttributes['class']
+}>(), {
+    size: 'md',
+})
+
+const sizeStyles = computed(() => (({
+    sm: { padding: 'p-24px', rounded: 'rounded-12px' },
+    md: { padding: 'p-32px sm:p-48px', rounded: 'rounded-24px' },
+}) as Record<string, { padding: string, rounded: string }>)[props.size ?? 'md'] ?? { padding: '', rounded: '' })
+
+const paddingClass = computed(() => props.contentPadding ?? sizeStyles.value.padding)
+const borderRadiusClass = computed(() => props.borderRadius ?? sizeStyles.value.rounded)
+const rootEl = ref<HTMLElement | null>(null)
+
+defineExpose({
+    el: rootEl,
+})
+</script>
+
+<template>
+    <div ref="rootEl" :class="cn('bg border-0.5px border', paddingClass, borderRadiusClass, props.class)">
+        <slot />
+    </div>
+</template>

package/components/tela/preview/preview-content.vue

@@ -16,10 +16,19 @@ const props = withDefaults(
         /** Load PDF document from URL. Required for PDF preview. */
         pdfLoader?: (url: string) => Promise<PdfDocumentHandle | null>
         labels?: PreviewContentLabels
+        /** Text to highlight on the PDF pages. When set, a text layer is rendered with yellow highlights. */
+        highlightText?: string | null
+        /** The page to scroll to and highlight on. When set, scrolls to this page and restricts highlights to it. */
+        highlightPage?: number | null
+        /** When true, uses exact matching instead of fuzzy word-based matching for highlights. */
+        highlightExact?: boolean
     }>(),
     {
         variant: 'default',
         segmentTab: undefined,
+        highlightText: undefined,
+        highlightPage: undefined,
+        highlightExact: false,
     },
 )
 
@@ -80,7 +89,11 @@ const pdfDocHandle = ref<PdfDocumentHandle | null>(null)
 const pdfLoadError = ref<string | null>(null)
 
 const pageRefs = ref<Map<number, HTMLElement>>(new Map())
+const textLayerRefs = ref<Map<number, HTMLDivElement>>(new Map())
 const renderedPages = ref<Set<number>>(new Set())
+let isRendering = false
+let pendingReRender = false
+let pendingScrollPage: number | null = null
 
 function zoomIn() {
     if (scale.value < 3) {
@@ -185,6 +198,15 @@ function setPageRef(pageNum: number, el: HTMLElement | null) {
     }
 }
 
+function setTextLayerRef(pageNum: number, el: HTMLDivElement | null) {
+    if (el) {
+        textLayerRefs.value.set(pageNum, el)
+    }
+    else {
+        textLayerRefs.value.delete(pageNum)
+    }
+}
+
 async function renderPdfPage(pageNum: number) {
     const handle = pdfDocHandle.value
 
@@ -201,10 +223,16 @@ async function renderPdfPage(pageNum: number) {
     if (!canvas)
         return
 
+    const textLayer = textLayerRefs.value.get(pageNum) ?? null
+
     await handle.renderPage({
         pageNum,
         canvas: canvas as HTMLCanvasElement,
         scale: scale.value,
+        textLayer,
+        highlight: props.highlightText,
+        highlightPage: props.highlightPage,
+        highlightExact: props.highlightExact,
     })
 
     renderedPages.value.add(pageNum)
@@ -222,9 +250,32 @@ async function renderAllPdfPages() {
 }
 
 async function reRenderAllPdfPages() {
-    renderedPages.value.clear()
-    await nextTick()
-    await renderAllPdfPages()
+    if (isRendering) {
+        pendingReRender = true
+        return
+    }
+    isRendering = true
+    try {
+        renderedPages.value.clear()
+        await nextTick()
+        await renderAllPdfPages()
+    }
+    finally {
+        isRendering = false
+        if (pendingReRender) {
+            pendingReRender = false
+            void reRenderAllPdfPages().then(() => {
+                if (pendingScrollPage !== null) {
+                    scrollToPage(pendingScrollPage)
+                    pendingScrollPage = null
+                }
+            })
+        }
+        else if (pendingScrollPage !== null) {
+            scrollToPage(pendingScrollPage)
+            pendingScrollPage = null
+        }
+    }
 }
 
 watch(() => props.file, async (newFile) => {
@@ -275,6 +326,15 @@ watch(() => props.file, async (newFile) => {
 
             await nextTick()
             await renderAllPdfPages()
+
+            const scrollTarget = (props.highlightPage && props.highlightPage > 0)
+                ? props.highlightPage
+                : pendingScrollPage
+            if (scrollTarget) {
+                pendingScrollPage = null
+                await nextTick()
+                scrollToPage(scrollTarget)
+            }
         }
         else {
             pdfLoadError.value = labels.value.failedToLoadFile
@@ -392,6 +452,20 @@ function handleHotkey(e: KeyboardEvent) {
 }
 
 useEventListener('keydown', handleHotkey)
+
+watch([() => props.highlightText, () => props.highlightPage, () => props.highlightExact], async () => {
+    if (props.highlightPage && props.highlightPage > 0) {
+        pendingScrollPage = props.highlightPage
+    }
+    else {
+        pendingScrollPage = null
+    }
+    if (pdfDocHandle.value) {
+        await reRenderAllPdfPages()
+    }
+    // When doc isn't loaded yet, keep pendingScrollPage — it will be
+    // consumed by reRenderAllPdfPages().finally once the PDF renders.
+})
 </script>
 
 <template>
@@ -615,6 +689,12 @@ useEventListener('keydown', handleHotkey)
                                     :class="cn(variant === 'minimal' && 'w-256px pdf-page-card--minimal')"
                                 >
                                     <canvas />
+                                    <div
+                                        :ref="(el) => setTextLayerRef(pageNum, el as HTMLDivElement)"
+                                        data-text-layer
+                                        class="absolute top-0 left-0 w-full h-full z-1"
+                                        style="pointer-events: none; mix-blend-mode: multiply; line-height: 1; opacity: 0.4;"
+                                    />
                                     <div
                                         data-pdf-page-badge
                                         absolute z-2 top-8px left-8px

package/components/tela/preview/preview.vue

@@ -29,6 +29,12 @@ const props = withDefaults(
         pdfLoader?: (url: string) => Promise<import('./types').PdfDocumentHandle | null>
         /** Labels for PreviewContent (failedToLoadFile, page, download, etc.) */
         contentLabels?: import('./types').PreviewContentLabels
+        /** Text to highlight on the PDF pages. Passed to PreviewContent. */
+        highlightText?: string | null
+        /** Page to scroll to and highlight on. Passed to PreviewContent. */
+        highlightPage?: number | null
+        /** When true, uses exact matching instead of fuzzy word-based matching. */
+        highlightExact?: boolean
     }>(),
     {
         variant: 'default',
@@ -120,6 +126,9 @@ const fileReaderKey = computed(() => {
                     :pdf-loader="pdfLoader"
                     :labels="contentLabels"
                     :variant="variant"
+                    :highlight-text="highlightText"
+                    :highlight-page="highlightPage"
+                    :highlight-exact="highlightExact"
                     class="h-full"
                     @fullscreen="emit('fullscreen')"
                 />

package/components/tela/preview/types.ts

@@ -60,6 +60,14 @@ export interface PreviewSelectVariableLabels {
 
 export interface PdfDocumentHandle {
     numPages: number
-    renderPage: (opts: { pageNum: number, canvas: HTMLCanvasElement, scale: number }) => Promise<void>
+    renderPage: (opts: {
+        pageNum: number
+        canvas: HTMLCanvasElement
+        scale: number
+        textLayer?: HTMLDivElement | null
+        highlight?: string | null
+        highlightPage?: number | null
+        highlightExact?: boolean
+    }) => Promise<void>
     destroy: () => void
 }

package/components/tela/scroll-area/scroll-area.stories.ts

@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ScrollArea from './scroll-area.vue'
+
+const meta: Meta<typeof ScrollArea> = {
+    title: 'Utility/ScrollArea',
+    component: ScrollArea,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A scroll area component that provides custom-styled scrollbars. Built on reka-ui for consistent scrollbar appearance across browsers. Useful for creating scrollable containers with better visual consistency than native scrollbars.',
+            },
+        },
+    },
+    argTypes: {
+        type: {
+            control: 'select',
+            options: ['auto', 'always', 'scroll', 'hover'],
+            description: 'Scrollbar visibility behavior.',
+        },
+        orientation: {
+            control: 'select',
+            options: ['vertical', 'horizontal', 'both'],
+            description: 'Direction(s) of scrolling.',
+        },
+        scrollHideDelay: {
+            control: 'number',
+            description: 'Delay in ms before scrollbars are hidden (when type is hover or scroll).',
+        },
+    },
+    args: {
+        type: 'hover',
+        orientation: 'vertical',
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: args => ({
+        components: { ScrollArea },
+        setup() {
+            const items = Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`)
+            return { args, items }
+        },
+        template: `
+            <ScrollArea v-bind="args" class="h-200px w-300px border border-gray-200 rounded-md">
+                <div class="p-4 flex flex-col gap-2">
+                    <div v-for="item in items" :key="item" class="text-sm py-1 border-b border-gray-100 last:border-0">
+                        {{ item }}
+                    </div>
+                </div>
+            </ScrollArea>
+        `,
+    }),
+}
+
+export const AlwaysVisible: Story = {
+    args: {
+        type: 'always',
+    },
+    render: args => ({
+        components: { ScrollArea },
+        setup() {
+            const items = Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`)
+            return { args, items }
+        },
+        template: `
+            <ScrollArea v-bind="args" class="h-200px w-300px border border-gray-200 rounded-md">
+                <div class="p-4 flex flex-col gap-2">
+                    <div v-for="item in items" :key="item" class="text-sm py-1 border-b border-gray-100 last:border-0">
+                        {{ item }}
+                    </div>
+                </div>
+            </ScrollArea>
+        `,
+    }),
+}
+
+export const Horizontal: Story = {
+    args: {
+        orientation: 'horizontal',
+        type: 'always',
+    },
+    render: args => ({
+        components: { ScrollArea },
+        setup() {
+            const items = Array.from({ length: 20 }, (_, i) => `Card ${i + 1}`)
+            return { args, items }
+        },
+        template: `
+            <ScrollArea v-bind="args" class="w-400px border border-gray-200 rounded-md">
+                <div class="flex gap-3 p-4" style="width: 1200px">
+                    <div v-for="item in items" :key="item" class="flex-shrink-0 w-120px h-80px bg-gray-100 rounded flex items-center justify-center text-sm text-gray-600">
+                        {{ item }}
+                    </div>
+                </div>
+            </ScrollArea>
+        `,
+    }),
+}
+
+export const Both: Story = {
+    args: {
+        orientation: 'both',
+        type: 'always',
+    },
+    render: args => ({
+        components: { ScrollArea },
+        setup() {
+            const rows = Array.from({ length: 20 }, (_, i) => `Row ${i + 1}`)
+            return { args, rows }
+        },
+        template: `
+            <ScrollArea v-bind="args" class="h-250px w-400px border border-gray-200 rounded-md">
+                <div style="width: 900px">
+                    <div v-for="row in rows" :key="row" class="flex items-center px-4 py-2 border-b border-gray-100 text-sm gap-4">
+                        <span class="w-100px flex-shrink-0 font-medium">{{ row }}</span>
+                        <span class="w-200px flex-shrink-0 text-gray-500">Column B content here</span>
+                        <span class="w-200px flex-shrink-0 text-gray-500">Column C content here</span>
+                        <span class="w-200px flex-shrink-0 text-gray-500">Column D content here</span>
+                    </div>
+                </div>
+            </ScrollArea>
+        `,
+    }),
+}

package/components/tela/segment-toggle/segment-toggle.mdx

@@ -0,0 +1,89 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as SegmentToggleStories from './segment-toggle.stories.ts';
+
+<Meta of={SegmentToggleStories} />
+
+# TelaSegmentToggle
+
+A segment toggle component that displays multiple options as connected segments. Only one option can be selected at a time. Supports v-model binding, different sizes, and disabled states. Useful for mutually exclusive option selection with a modern segmented control interface.
+
+## Examples
+
+### Default
+
+<Canvas of={SegmentToggleStories.Default} />
+
+### Small Size
+
+<Canvas of={SegmentToggleStories.Small} />
+
+### Disabled
+
+<Canvas of={SegmentToggleStories.Disabled} />
+
+### Two Options
+
+<Canvas of={SegmentToggleStories.TwoOptions} />
+
+### Preselected Middle
+
+<Canvas of={SegmentToggleStories.PreselectedMiddle} />
+
+## Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const alignment = ref('left')
+const options = [
+  { label: 'Left', value: 'left' },
+  { label: 'Center', value: 'center' },
+  { label: 'Right', value: 'right' },
+]
+</script>
+
+<template>
+  <TelaSegmentToggle v-model="alignment" :options="options" />
+</template>
+```
+
+### Small Size
+
+```vue
+<TelaSegmentToggle v-model="value" :options="options" size="small" />
+```
+
+### Disabled State
+
+```vue
+<TelaSegmentToggle v-model="value" :options="options" disabled />
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+interface Option {
+  label: string
+  value: string
+}
+
+type SegmentToggleProps = {
+  modelValue: string
+  options: Option[]
+  size?: 'small' | 'medium'
+  disabled?: boolean
+  class?: string
+  buttonsClass?: string
+}
+```
+
+## Features
+
+- **Two-way Binding**: Full v-model support for reactive state
+- **Multiple Sizes**: Small and medium size options
+- **Animated Selection**: Spring-animated indicator for smooth transitions
+- **Disabled State**: Proper disabled styling and interaction prevention
+- **Accessible**: Keyboard navigation support via native button elements

package/components/tela/select-menu/select-menu.vue

@@ -110,7 +110,7 @@ function handleOpenChange(open: boolean) {
                             v-if="currentOption?.icon && !(currentOption.value === '')"
                             shrink-0 rounded-4px flex items-center justify-center
                         >
-                            <Icon v-if="typeof currentOption.icon === 'string'" :name="currentOption.icon" />
+                            <TelaIcon v-if="typeof currentOption.icon === 'string'" :name="currentOption.icon" />
                             <Component :is="currentOption.icon" v-else />
                         </div>
                         <div v-if="!currentOption?.icon && currentOption?.externalIconSrc" mr-4px flex h-20px w-16px shrink-0 items-center justify-center rounded-4px>

package/components/tela/status/status.vue

@@ -336,7 +336,11 @@ watch(
     { immediate: true },
 )
 
-onMounted(measureContentWidth)
+onMounted(() => {
+    requestAnimationFrame(() => {
+        requestAnimationFrame(measureContentWidth)
+    })
+})
 
 const shineClass = computed(() => {
     const baseColor = currentStatus.value.textColor.replace('text-', '')

package/components/tela/tooltip/tooltip-content.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
 import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui'
-import { computed } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import type { HTMLAttributes } from 'vue'
 
 defineOptions({
@@ -16,11 +16,7 @@ const emits = defineEmits<TooltipContentEmits & {
     click: [event: Event]
 }>()
 
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props
-
-    return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>

package/composables/citation-navigation.ts

@@ -0,0 +1,88 @@
+import type { MaybeRefOrGetter, Ref } from 'vue'
+import { nextTick, ref, toValue } from 'vue'
+
+export interface CitationTarget {
+    file: string
+    page: number
+}
+
+export function useCitationNavigation(options: {
+    citations: MaybeRefOrGetter<Record<string, any> | null | undefined>
+}) {
+    const highlightText = ref<string | null>(null)
+    const highlightPage = ref<number | null>(null)
+    const highlightExact = ref(false)
+    const activeFile = ref<string | null>(null)
+
+    function lookupCitation(path: string): CitationTarget | null {
+        const citations = toValue(options.citations)
+        if (!citations)
+            return null
+
+        const parts = path.split('.')
+        let current: any = citations
+
+        for (const part of parts) {
+            if (current == null)
+                return null
+            if (Array.isArray(current)) {
+                const idx = Number.parseInt(part, 10)
+                if (Number.isNaN(idx))
+                    return null
+                current = current[idx]
+            }
+            else {
+                current = current[part]
+            }
+        }
+
+        if (!current || typeof current !== 'object' || !('page' in current))
+            return null
+
+        if ('file' in current && current.file)
+            return { file: current.file, page: current.page }
+
+        return null
+    }
+
+    function navigateToCitation(path: string, value?: any): void {
+        const citation = lookupCitation(path)
+        if (!citation) {
+            clearCitation()
+            return
+        }
+
+        // Reset then set via nextTick to force watchers to re-trigger
+        // even when clicking the same citation field twice
+        highlightText.value = null
+        highlightPage.value = null
+        highlightExact.value = false
+        activeFile.value = null
+
+        nextTick(() => {
+            activeFile.value = citation.file
+            highlightPage.value = citation.page
+            highlightText.value = value != null
+                ? (typeof value === 'string' ? value : String(value))
+                : null
+            highlightExact.value = true
+        })
+    }
+
+    function clearCitation(): void {
+        highlightText.value = null
+        highlightPage.value = null
+        highlightExact.value = false
+        activeFile.value = null
+    }
+
+    return {
+        highlightText: highlightText as Ref<string | null>,
+        highlightPage: highlightPage as Ref<number | null>,
+        highlightExact: highlightExact as Ref<boolean>,
+        activeFile: activeFile as Ref<string | null>,
+        lookupCitation,
+        navigateToCitation,
+        clearCitation,
+    }
+}

package/lib/doc-generator.ts

@@ -1,10 +1,12 @@
 /* eslint-disable no-console */
 import { join, resolve, relative, dirname, basename } from 'pathe'
-import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'node:fs'
+import { existsSync, readFileSync, writeFileSync, mkdirSync, readdirSync } from 'node:fs'
 import { parse as parseVue } from 'vue-docgen-api'
 // Load glob dynamically for compatibility across versions (v8 vs v11)
-import { getTypeResolver, type TypeResolver } from './type-resolver'
-import { createVolarExtractor, type VolarExtractor } from './extractors/volar-extract'
+import { getTypeResolver } from './type-resolver'
+import type { TypeResolver } from './type-resolver'
+import { createVolarExtractor } from './extractors/volar-extract'
+import type { VolarExtractor } from './extractors/volar-extract'
 
 const colors = {
     gray: '\x1B[90m',
@@ -544,20 +546,23 @@ export function generateDocsToDirectory(componentDocs: ComponentDoc[], typeResol
         componentLinks.push(`- [${title}](components/${groupSlug}.md)`)
     }
 
-    // Read design-tokens.md content if it exists
-    let designTokensContent = ''
+    // Read all .md files from docs/ and append them to SKILL.md
+    let docsSection = ''
     if (layerPath) {
-        const designTokensSourcePath = join(layerPath, 'docs', 'design-tokens.md')
-        if (existsSync(designTokensSourcePath)) {
-            designTokensContent = readFileSync(designTokensSourcePath, 'utf-8')
+        const docsDir = join(layerPath, 'docs')
+        if (existsSync(docsDir)) {
+            const docFiles = readdirSync(docsDir)
+                .filter(f => f.endsWith('.md'))
+                .sort()
+            for (const file of docFiles) {
+                const content = readFileSync(join(docsDir, file), 'utf-8')
+                docsSection += `\n\n---\n\n${content}`
+            }
         }
     }
 
     // Create SKILL.md describing Tela Build with links to supporting md
     const skillDescription = buildTelaBuildSkillDescription()
-    const designTokensSection = designTokensContent
-        ? `\n\n---\n\n${designTokensContent}`
-        : ''
     const body = dedent`
 # Tela Build
 
@@ -574,7 +579,7 @@ Use it when building, refactoring, or using Tela components — props, events, s
 
 ## Components Index
 
-${componentLinks.join('\n')}${designTokensSection}
+${componentLinks.join('\n')}${docsSection}
   `
 
     const skillMd = wrapWithSkillFrontmatter({ name: 'tela-build', description: skillDescription }, body)
@@ -675,13 +680,13 @@ function toKebabFromTag(tagName: string): string {
     return tagName
         .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
         .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
-        .replace(/[^a-zA-Z0-9-]/g, '-')
+        .replace(/[^a-z0-9-]/gi, '-')
         .toLowerCase()
-        .replace(/--+/g, '-')
+        .replace(/-{2,}/g, '-')
         .replace(/^-+|-+$/g, '')
 }
 
-function wrapWithSkillFrontmatter(meta: { name: string; description: string; allowedTools?: string[] }, body: string): string {
+function wrapWithSkillFrontmatter(meta: { name: string, description: string, allowedTools?: string[] }, body: string): string {
     const { name, description, allowedTools } = meta
     const lines: string[] = []
     lines.push('---')
@@ -700,7 +705,7 @@ function wrapWithSkillFrontmatter(meta: { name: string; description: string; all
 
 function sanitizeSkillName(name: string): string {
     // Lowercase + hyphens + digits only, max 64 chars
-    return name.toLowerCase().replace(/[^a-z0-9-]/g, '-').slice(0, 64).replace(/--+/g, '-')
+    return name.toLowerCase().replace(/[^a-z0-9-]/g, '-').slice(0, 64).replace(/-{2,}/g, '-')
 }
 
 function sanitizeDescription(desc: string): string {
@@ -804,7 +809,7 @@ function sanitizeInlineComment(value?: string): string {
     if (!value)
         return ''
 
-    const withoutMarkdown = value.replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1')
+    const withoutMarkdown = value.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
     const singleLine = withoutMarkdown.replace(/\s+/g, ' ').trim()
     if (!singleLine)
         return ''

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.21.0",
+  "version": "1.23.0",
   "type": "module",
   "files": [
     "app.config.ts",

package/components/tela/card.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-    contentPadding?: string
-    borderRadius?: string
-}>()
-
-const rootEl = ref<HTMLElement | null>(null)
-
-defineExpose({
-    el: rootEl,
-})
-</script>
-
-<template>
-    <div
-        ref="rootEl"
-        bg-white
-        :class="borderRadius ? `rounded-${borderRadius}` : 'rounded-16px'"
-        b=".5 gray-200"
-    >
-        <div :class="contentPadding ?? 'p-32px'">
-            <slot />
-        </div>
-        <div v-if="$slots.footer" p-19px b="t-1 #EBEBEB">
-            <slot name="footer" />
-        </div>
-    </div>
-</template>