@meistrari/tela-build 1.30.0 → 1.30.2

package/components/tela/modal/modal.vue

@@ -31,11 +31,13 @@ const props = withDefaults(defineProps<{
     isCloseIconAbsolute?: boolean
     smallTitle?: boolean
     titleClass?: string
+    hideEnterAnimation?: boolean
 }>(), {
     modalWidth: 'md',
     isCloseIcon: true,
     isCloseIconAbsolute: false,
     smallTitle: false,
+    hideEnterAnimation: false,
 })
 const emit = defineEmits<{
     close: []
@@ -85,6 +87,7 @@ function handlePointerDownOutside(event: any) {
         <DialogPortal>
             <DialogOverlay :class="`DialogOverlay ${overlayClass ?? ''}`" bg="#000/35" z-600 overflow-y-auto flex items-center justify-center :p-16px="!fullscreen">
                 <DialogContent
+                    :data-animation="hideEnterAnimation"
                     :class="cn('DialogContent shadow-xl', modalMaxWidth, dialogContentClass)"
                     z-101
                     rounded-16px
@@ -199,12 +202,12 @@ function handlePointerDownOutside(event: any) {
   width: 400px;
   padding: 24px;
 
-  &[data-state="open"] {
+  [data-animation="false"]&[data-state="open"] {
      animation: contentShow 0.12s ease-out forwards;
      overflow: visible;
   }
 
-  &[data-state="closed"] {
+  [data-animation="false"]&[data-state="closed"] {
      animation: contentHide 0.12s ease-out forwards;
      animation-delay: 0s;
   }

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

@@ -930,8 +930,8 @@ watch([() => props.highlightText, () => props.highlightPage, () => props.highlig
                     v-for="pageNum in 2" :key="pageNum"
                     relative bg-white rounded-12px overflow-hidden mx-auto
                     :class="cn({
-                        'w-446px min-h-631px': variant === 'default',
-                        'w-256px min-h-363px': variant === 'minimal',
+                        'w-full max-w-446px min-h-631px': variant === 'default',
+                        'w-full max-w-256px min-h-363px': variant === 'minimal',
                     })"
                 >
                     <!-- Page badge -->
@@ -970,7 +970,7 @@ watch([() => props.highlightText, () => props.highlightPage, () => props.highlig
             <div
                 v-else
                 :class="cn({
-                    'px-46px': variant === 'default',
+                    'px-36px': variant === 'default',
                     'px-32px': variant === 'minimal',
                 })"
             >
@@ -978,8 +978,8 @@ watch([() => props.highlightText, () => props.highlightPage, () => props.highlig
                     bg-white rounded-12px
                     flex="~ col" justify-between mx-auto relative
                     :class="cn({
-                        'w-446px min-h-631px px-32px py-28px': variant === 'default',
-                        'w-256px min-h-363px px-16px py-14px': variant === 'minimal',
+                        'w-full max-w-446px min-h-631px px-32px py-28px': variant === 'default',
+                        'w-full max-w-256px min-h-363px px-16px py-14px': variant === 'minimal',
                     })"
                 >
                     <div flex="~ col" gap-16px>
@@ -1041,7 +1041,7 @@ watch([() => props.highlightText, () => props.highlightPage, () => props.highlig
                     data-markdown
                     :data-variant="variant"
                     :class="cn({
-                        'px-46px': variant === 'default',
+                        'px-36px': variant === 'default',
                         'px-32px': variant === 'minimal',
                         'pt-88px': variant === 'default' && props.segmentTab && props.file.fileType === 'application/pdf',
                         'pt-42px': variant === 'minimal' && props.segmentTab && props.file.fileType === 'application/pdf',
@@ -1058,8 +1058,8 @@ watch([() => props.highlightText, () => props.highlightPage, () => props.highlig
                         <div
                             bg-white rounded-12px
                             :class="cn({
-                                'w-446px min-h-631px px-32px py-28px': variant === 'default',
-                                'w-256px min-h-363px px-16px py-14px': variant === 'minimal',
+                                'w-full max-w-446px min-h-631px px-32px py-28px': variant === 'default',
+                                'w-full max-w-256px min-h-363px px-16px py-14px': variant === 'minimal',
                                 'h-full overflow-y-auto no-scrollbar': variant === 'default' && props.segmentTab !== 'processed',
                             })"
                             mx-auto relative
@@ -1172,7 +1172,7 @@ watch([() => props.highlightText, () => props.highlightPage, () => props.highlig
                                     data-pdf-page-card
                                     :data-page-num="pageNum"
                                     relative bg-white rounded-12px overflow-hidden mx-auto
-                                    :class="cn(variant === 'minimal' && 'w-256px pdf-page-card--minimal')"
+                                    :class="cn(variant === 'minimal' && 'w-full max-w-256px pdf-page-card--minimal')"
                                     :style="getPagePlaceholderStyle(pageNum)"
                                 >
                                     <canvas />
@@ -1229,7 +1229,7 @@ watch([() => props.highlightText, () => props.highlightPage, () => props.highlig
             <template v-else>
                 <div
                     :class="cn({
-                        'px-46px w-446px': variant === 'default',
+                        'px-36px w-446px': variant === 'default',
                         'w-256px': variant === 'minimal',
                     })"
                     flex items-center justify-center mx-auto

package/components/tela/preview/preview-select-variable.vue

@@ -80,10 +80,6 @@ function handleDeleteSearchValue() {
     search.value = ''
 }
 
-const totalOptions = computed(() => {
-    return groupedOptions.value.map(group => group.children.length).reduce((a, b) => a + b, 0)
-})
-
 const firstColumnWidth = computed(() => {
     const allVariableNames = [...new Set(props.options.map(opt => opt.variable))]
     const allTexts = [
@@ -155,7 +151,7 @@ function iconSrc(option: PreviewVariableOption): string {
             <TelaComboboxTrigger
                 as="button"
                 tabindex="0"
-                class="w-full bg border-0.5px border-strong rounded-10px px-12px py-7px flex items-center justify-between"
+                class="w-full bg border-0.5px border-strong rounded-10px px-12px py-7px flex items-center justify-between gap-10px"
             >
                 <div class="grid items-center gap-22px w-full min-w-0 grid-cols-[var(--first-col-width,minmax(82px,auto))_1fr]">
                     <p body-14-semibold text-start text-primary min-w-0>
@@ -163,8 +159,9 @@ function iconSrc(option: PreviewVariableOption): string {
                     </p>
                     <div v-if="selectedOption?.file" flex items-center gap-6px min-w-0>
                         <img :src="iconSrc(selectedOption)" class="h-16px! w-16px!" alt="">
-                        <p truncate body-14-medium text-primary flex-shrink-0>
-                            {{ selectedOption.file }}
+                        <p flex min-w-0 body-14-medium text-primary>
+                            <span truncate>{{ selectedOption.file.includes('.') ? `${selectedOption.file.replace(/\.[^.]+$/, '')}.` : selectedOption.file }}</span>
+                            <span flex-shrink-0>{{ selectedOption.file.includes('.') ? (selectedOption.file.match(/[^.]+$/)?.[0] ?? '') : '' }}</span>
                         </p>
                     </div>
                 </div>
@@ -178,7 +175,7 @@ function iconSrc(option: PreviewVariableOption): string {
                 </div>
             </TelaComboboxTrigger>
         </TelaComboboxAnchor>
-        <TelaComboboxList :class="cn('z-999 w-full', popoverClass)" :disable-portal="true" align="center">
+        <TelaComboboxList :class="cn('z-999 w-full max-w-[var(--reka-combobox-trigger-width)]', popoverClass)" :disable-portal="true" align="center">
             <div class="relative">
                 <div class="absolute inset-y-0 flex items-center justify-center px-2.5">
                     <TelaIcon name="i-ph-magnifying-glass-bold" size="13px" color="neutral-300" />
@@ -229,14 +226,6 @@ function iconSrc(option: PreviewVariableOption): string {
                         {{ labels.clear }}
                     </TelaButton>
                 </TelaComboboxEmpty>
-                <div v-if="totalOptions > 0" class="grid items-center gap-22px h-28px px-12px border-b-0.5px border grid-cols-[var(--first-col-width,minmax(82px,auto))_1fr]">
-                    <span body-12-medium text-secondary lowercase min-w-0>
-                        {{ labels.variablesLabel }}
-                    </span>
-                    <span body-12-medium text-secondary lowercase min-w-0>
-                        {{ totalOptions }} {{ labels.filesLabel }}
-                    </span>
-                </div>
                 <div class="divide-y-0.5px divide-border">
                     <div v-for="group in groupedOptions" :key="group.heading" mx-12px>
                         <TelaComboboxGroup
@@ -247,14 +236,17 @@ function iconSrc(option: PreviewVariableOption): string {
                                 v-for="(item, index) in group.children"
                                 :key="item.value"
                                 :value="item.value"
-                                class="grid items-center gap-22px grid-cols-[var(--first-col-width,minmax(82px,auto))_1fr] h-32px w-full"
+                                class="grid items-center gap-22px grid-cols-[var(--first-col-width,minmax(82px,auto))_minmax(0,1fr)] h-32px w-full"
                             >
                                 <span v-if="index === 0" body-14-semibold text-primary min-w-0>{{ group.heading }}</span>
                                 <span v-else />
-                                <div flex items-center justify-between w-full min-w-0>
-                                    <div v-if="item.file" flex items-center gap-6px min-w-0>
+                                <div flex items-center justify-between w-full min-w-0 overflow-hidden>
+                                    <div v-if="item.file" flex items-center gap-6px min-w-0 overflow-hidden pr-12px>
                                         <img :src="iconSrc(item)" class="h-16px! w-16px!" alt="">
-                                        <span body-14-medium text-primary truncate>{{ item.file }}</span>
+                                        <p flex min-w-0 body-14-medium text-primary>
+                                            <span truncate>{{ item.file.includes('.') ? `${item.file.replace(/\.[^.]+$/, '')}.` : item.file }}</span>
+                                            <span flex-shrink-0>{{ item.file.includes('.') ? (item.file.match(/[^.]+$/)?.[0] ?? '') : '' }}</span>
+                                        </p>
                                     </div>
                                     <div v-if="props.modelValue === item.value" class="flex gap-2 items-center">
                                         <TelaComboboxItemIndicator>

package/lib/__tests__/doc-generator.test.ts

@@ -0,0 +1,33 @@
+import { mkdtempSync, readFileSync, rmSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'pathe'
+import matter from 'gray-matter'
+import { afterEach, describe, expect, it } from 'vitest'
+import { generateDocsToDirectory } from '../doc-generator'
+import { TypeResolver } from '../type-resolver'
+
+const tempDirs: string[] = []
+
+afterEach(() => {
+    for (const dir of tempDirs.splice(0)) {
+        rmSync(dir, { recursive: true, force: true })
+    }
+})
+
+describe('generateDocsToDirectory', () => {
+    it('writes parseable YAML frontmatter for the tela-build skill', () => {
+        const outDir = mkdtempSync(join(tmpdir(), 'tela-build-docs-'))
+        tempDirs.push(outDir)
+
+        generateDocsToDirectory([], new TypeResolver(outDir), outDir)
+
+        const skillMd = readFileSync(join(outDir, 'tela-build', 'SKILL.md'), 'utf-8')
+        const parsed = matter(skillMd)
+
+        expect(parsed.data).toMatchObject({
+            name: 'tela-build',
+            description: expect.stringContaining('repository: ask for component props'),
+        })
+        expect(skillMd).toContain('description: "')
+    })
+})

package/lib/doc-generator.ts

@@ -691,7 +691,7 @@ function wrapWithSkillFrontmatter(meta: { name: string, description: string, all
     const lines: string[] = []
     lines.push('---')
     lines.push(`name: ${sanitizeSkillName(name)}`)
-    lines.push(`description: ${sanitizeDescription(description)}`)
+    lines.push(`description: ${serializeYamlString(sanitizeDescription(description))}`)
     if (allowedTools && allowedTools.length > 0) {
         lines.push(`allowed-tools: ${allowedTools.join(', ')}`)
     }
@@ -703,6 +703,10 @@ function wrapWithSkillFrontmatter(meta: { name: string, description: string, all
     return lines.join('\n')
 }
 
+function serializeYamlString(value: string): string {
+    return JSON.stringify(value)
+}
+
 function sanitizeSkillName(name: string): string {
     // Lowercase + hyphens + digits only, max 64 chars
     return name.toLowerCase().replace(/[^a-z0-9-]/g, '-').slice(0, 64).replace(/-{2,}/g, '-')

package/package.json

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