@meistrari/tela-build 1.62.1 → 1.64.0

package/components/tela/modal/switch-workspace/switch-workspace-content.vue

@@ -9,6 +9,7 @@ const props = defineProps<{
     projectLabel: string
     projectsLabel: string
     selectedLabel: string
+    loading?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -24,39 +25,58 @@ function formatStat(count: number | undefined, singular: string, plural: string)
 </script>
 
 <template>
-    <button
-        v-for="workspace of workspaces"
-        :key="workspace.id"
-        h-64px
-        flex w-full items-center px-16px
-        hover:bg-muted
-        first:rounded-t-12px
-        last:rounded-b-12px
-        not-last:border-b="0.5px border"
-        data-testid="tela.switchWorkspace.workspaceButton"
-        @click="emit('select', workspace)"
-    >
-        <div mr-12px :class="activeWorkspaceId === workspace.id && 'ring-1.5px ring-offset-2px ring-gray-400 rounded-10px'">
-            <TelaAvatar size="md" :image="workspace.logo ?? undefined" :alt="workspace.name" class="!rounded-[10px]" />
-        </div>
+    <template v-if="loading">
+        <div
+            v-for="index in 3"
+            :key="index"
+            h-64px
+            flex w-full items-center px-16px
+            not-last:border-b="0.5px border"
+        >
+            <TelaSkeleton mr-12px h-40px w-40px rounded-10px />
 
-        <div flex="~ col" gap-2px>
-            <h5 heading-h5-semibold text-primary text-start>
-                {{ workspace.name }}
-            </h5>
-            <div flex items-center gap-4px>
-                <p body-12-regular text-tertiary>
-                    {{ formatStat(workspace.stats?.memberCount, props.memberLabel, props.membersLabel) }}
-                </p>
-                <div aria-hidden="true" w-3px h-3px rounded-full bg-gray-200 />
-                <p body-12-regular text-tertiary>
-                    {{ formatStat(workspace.stats?.projectCount, props.projectLabel, props.projectsLabel) }}
-                </p>
+            <div flex="~ col" gap-8px>
+                <TelaSkeleton h-14px w-150px rounded-4px />
+                <TelaSkeleton h-12px w-96px rounded-4px />
             </div>
         </div>
+    </template>
+
+    <template v-else>
+        <button
+            v-for="workspace of workspaces"
+            :key="workspace.id"
+            h-64px
+            flex w-full items-center px-16px
+            hover:bg-muted
+            first:rounded-t-12px
+            last:rounded-b-12px
+            not-last:border-b="0.5px border"
+            data-testid="tela.switchWorkspace.workspaceButton"
+            @click="emit('select', workspace)"
+        >
+            <div mr-12px :class="activeWorkspaceId === workspace.id && 'ring-1.5px ring-offset-2px ring-gray-400 rounded-10px'">
+                <TelaAvatar size="md" :image="workspace.logo ?? undefined" :alt="workspace.name" class="!rounded-[10px]" />
+            </div>
+
+            <div flex="~ col" gap-2px>
+                <h5 heading-h5-semibold text-primary text-start>
+                    {{ workspace.name }}
+                </h5>
+                <div flex items-center gap-4px>
+                    <p body-12-regular text-tertiary>
+                        {{ formatStat(workspace.stats?.memberCount, props.memberLabel, props.membersLabel) }}
+                    </p>
+                    <div aria-hidden="true" w-3px h-3px rounded-full bg-gray-200 />
+                    <p body-12-regular text-tertiary>
+                        {{ formatStat(workspace.stats?.projectCount, props.projectLabel, props.projectsLabel) }}
+                    </p>
+                </div>
+            </div>
 
-        <TelaBadge v-if="activeWorkspaceId === workspace.id" ml-auto>
-            {{ props.selectedLabel }}
-        </TelaBadge>
-    </button>
+            <TelaBadge v-if="activeWorkspaceId === workspace.id" ml-auto>
+                {{ props.selectedLabel }}
+            </TelaBadge>
+        </button>
+    </template>
 </template>

package/components/tela/modal/switch-workspace/switch-workspace.vue

@@ -11,6 +11,7 @@ defineProps<{
     projectLabel: string
     projectsLabel: string
     selectedLabel: string
+    loading?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -60,6 +61,7 @@ function onClose() {
                 <div overflow-y-auto no-scrollbar>
                     <TelaModalSwitchWorkspaceContent
                         :workspaces="workspaces"
+                        :loading="loading"
                         :active-workspace-id="activeWorkspaceId"
                         :member-label="memberLabel"
                         :members-label="membersLabel"

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

@@ -34,6 +34,33 @@ describe('generateDocsToDirectory', () => {
         expect(skillMd).toContain('description: "')
     })
 
+    // The pantry block was originally hand-written into the generated SKILL.md and
+    // would have been deleted by the next generation run. It has to come from the
+    // generator, and the values have to survive: Pantry derives shelf slugs from
+    // these strings, so lowercasing one renames a shelf shared across the catalog.
+    it('emits the pantry block for the tela-build skill', () => {
+        const outDir = mkdtempSync(join(tmpdir(), 'tela-build-docs-'))
+        tempDirs.push(outDir)
+
+        generateDocsToDirectory([], new TypeResolver(outDir), outDir)
+
+        const parsed = matter(readFileSync(join(outDir, 'tela-build', 'SKILL.md'), 'utf-8'))
+
+        expect(parsed.data.pantry).toEqual({
+            'owner': ['guhrodrrigues'],
+            'status': 'stable',
+            'shelves': ['Frontend', 'Design Engineering', 'Developer Tools'],
+            'use-cases': [
+                'Look up a Tela Build component\'s props, slots, variants, and usage examples before writing UI code',
+                'Pick the correct design token for a color, text style, border, shadow, or spacing decision',
+                'Polish an existing interface\'s radius, elevation, optical alignment, typography, and animations',
+                'Review frontend changes for component reuse and design-system compliance',
+            ],
+            'bundle': 'tela-build',
+            'artifacts': ['components'],
+        })
+    })
+
     it('appends package docs to the tela-build skill', () => {
         const outDir = mkdtempSync(join(tmpdir(), 'tela-build-docs-'))
         const layerPath = mkdtempSync(join(tmpdir(), 'tela-build-layer-'))

package/lib/doc-generator.ts

@@ -7,7 +7,8 @@ import { getTypeResolver } from './type-resolver'
 import type { TypeResolver } from './type-resolver'
 import { createVolarExtractor } from './extractors/volar-extract'
 import type { VolarExtractor } from './extractors/volar-extract'
-import { telaBuildSkill } from './tela-build-skill'
+import { telaBuildSkill, telaBuildSkillPantry } from './tela-build-skill'
+import type { SkillPantryMetadata } from './tela-build-skill'
 
 const colors = {
     gray: '\x1B[90m',
@@ -783,6 +784,7 @@ ${componentLinks.join('\n')}${docsSection}
     const skillMd = wrapWithSkillFrontmatter({
         name: telaBuildSkill.name,
         description: telaBuildSkill.description,
+        pantry: telaBuildSkillPantry,
     }, body)
     writeFileSync(join(skillDir, 'SKILL.md'), skillMd, 'utf-8')
 }
@@ -887,8 +889,8 @@ function toKebabFromTag(tagName: string): string {
         .replace(/^-+|-+$/g, '')
 }
 
-function wrapWithSkillFrontmatter(meta: { name: string, description: string, allowedTools?: string[] }, body: string): string {
-    const { name, description, allowedTools } = meta
+function wrapWithSkillFrontmatter(meta: { name: string, description: string, allowedTools?: string[], pantry?: SkillPantryMetadata }, body: string): string {
+    const { name, description, allowedTools, pantry } = meta
     const lines: string[] = []
     lines.push('---')
     lines.push(`name: ${sanitizeSkillName(name)}`)
@@ -896,6 +898,9 @@ function wrapWithSkillFrontmatter(meta: { name: string, description: string, all
     if (allowedTools && allowedTools.length > 0) {
         lines.push(`allowed-tools: ${allowedTools.join(', ')}`)
     }
+    if (pantry) {
+        lines.push(...renderPantryFrontmatter(pantry))
+    }
     lines.push('---')
     lines.push('')
     lines.push(body.trimStart())
@@ -918,6 +923,62 @@ function quoteFrontmatterString(value: string): string {
     return JSON.stringify(value)
 }
 
+/**
+ * A YAML plain scalar, unless the value could be read as anything other than the
+ * string it is — then a double-quoted scalar. Quoting only what needs it keeps
+ * the generated frontmatter readable and stable.
+ */
+function formatFrontmatterScalar(value: string): string {
+    return isPlainFrontmatterScalar(value) ? value : quoteFrontmatterString(value)
+}
+
+function isPlainFrontmatterScalar(value: string): boolean {
+    // Surrounding whitespace is not preserved by a plain scalar.
+    if (!value || value !== value.trim())
+        return false
+    // A leading indicator character starts a collection, comment, anchor, tag, or
+    // quoted/block scalar rather than a plain one.
+    if (/^[-?:,[\]{}#&*!|>'"%@`]/.test(value))
+        return false
+    // ": " opens a mapping, " #" opens a comment, and a trailing ":" makes a key.
+    if (value.includes(': ') || value.includes(' #') || value.endsWith(':'))
+        return false
+    if (/[\n\r\t]/.test(value))
+        return false
+    // These would round-trip as a boolean, null, or number instead of a string.
+    if (/^(?:true|false|null|yes|no|on|off|~)$/i.test(value))
+        return false
+    return Number.isNaN(Number(value))
+}
+
+/**
+ * Render the `pantry:` block. The key order is fixed rather than derived from
+ * object iteration so the output is byte-stable across regenerations.
+ */
+function renderPantryFrontmatter(pantry: SkillPantryMetadata): string[] {
+    const lines: string[] = ['pantry:']
+
+    // An empty sequence would emit a bare key that parses as null, so omit it and
+    // let the consumer report a missing field instead of a malformed one.
+    const pushSequence = (key: string, values: readonly string[]): void => {
+        if (values.length === 0)
+            return
+        lines.push(`  ${key}:`)
+        for (const value of values) {
+            lines.push(`    - ${formatFrontmatterScalar(value)}`)
+        }
+    }
+
+    pushSequence('owner', pantry.owner)
+    lines.push(`  status: ${formatFrontmatterScalar(pantry.status)}`)
+    pushSequence('shelves', pantry.shelves)
+    pushSequence('use-cases', pantry.useCases)
+    lines.push(`  bundle: ${formatFrontmatterScalar(pantry.bundle)}`)
+    pushSequence('artifacts', pantry.artifacts)
+
+    return lines
+}
+
 function toGroupSlugFromKebab(kebab: string): string {
     const parts = kebab.split('-').filter(Boolean)
     if (parts.length <= 2)

package/lib/tela-build-skill.ts

@@ -1,4 +1,45 @@
+/**
+ * Pantry metadata for a generated skill, emitted as a nested `pantry:` block in
+ * the SKILL.md frontmatter.
+ *
+ * This is plain data on purpose: nothing here imports from Pantry or talks to it
+ * over the network. Generation stays entirely local, and a generator run that
+ * supplies no metadata produces exactly the frontmatter it always did.
+ */
+export interface SkillPantryMetadata {
+    owner: readonly string[]
+    status: string
+    shelves: readonly string[]
+    useCases: readonly string[]
+    bundle: string
+    artifacts: readonly string[]
+}
+
 export const telaBuildSkill = {
     name: 'tela-build',
     description: 'Use when working on any UI in this repository. Ask for component props, slots, variants, and usage examples. Always consult this Tela Build index BEFORE making any UI changes or creating new UI. Use it for components, layouts, styling, interactions, and design-token decisions.',
 } as const
+
+/**
+ * Pantry catalog entry for the tela-build skill. It lives here rather than in
+ * `.agents/skills/tela-build/SKILL.md` because that file is generated: a block
+ * hand-written into the output is deleted by the next `generate-docs` run (and
+ * by every dev-server start, which regenerates through the Nuxt module).
+ *
+ * Shelf names are Title Case deliberately. Pantry derives shelf slugs from these
+ * strings, so lowercasing them would rename shelves shared with other
+ * ingredients across the whole catalog.
+ */
+export const telaBuildSkillPantry = {
+    owner: ['guhrodrrigues'],
+    status: 'stable',
+    shelves: ['Frontend', 'Design Engineering', 'Developer Tools'],
+    useCases: [
+        'Look up a Tela Build component\'s props, slots, variants, and usage examples before writing UI code',
+        'Pick the correct design token for a color, text style, border, shadow, or spacing decision',
+        'Polish an existing interface\'s radius, elevation, optical alignment, typography, and animations',
+        'Review frontend changes for component reuse and design-system compliance',
+    ],
+    bundle: 'tela-build',
+    artifacts: ['components'],
+} as const satisfies SkillPantryMetadata

package/package.json

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