@stina/extension-api 0.53.1 → 0.57.0

package/src/schemas/card.schema.test.ts

@@ -1,4 +1,5 @@
 import { describe, it, expect } from 'vitest'
+import type { ChatCardComponent } from './card.schema.js'
 import { CHAT_CARD_COMPONENTS, describeChatCardProfile, validateChatCard } from './card.schema.js'
 
 describe('validateChatCard', () => {
@@ -72,7 +73,6 @@ describe('validateChatCard', () => {
   it('accepts components nested through children', () => {
     const result = validateChatCard({
       component: 'VerticalStack',
-      gap: 1,
       children: [
         { component: 'Header', level: 3, title: 'I dag' },
         { component: 'Timeline', entries: [{ time: '09:00', title: 'Standup', current: true }] },
@@ -82,6 +82,47 @@ describe('validateChatCard', () => {
     expect(result.ok).toBe(true)
   })
 
+  it('spaces every layout in the card, however deep it sits', () => {
+    const result = validateChatCard({
+      component: 'VerticalStack',
+      children: [
+        {
+          component: 'Grid',
+          columns: 2,
+          children: [
+            { component: 'HorizontalStack', children: [{ component: 'Label', text: 'A' }] },
+          ],
+        },
+      ],
+    })
+
+    expect(result.ok).toBe(true)
+    if (!result.ok) return
+
+    const grid = (result.card['children'] as ChatCardComponent[])[0]!
+    const row = (grid['children'] as ChatCardComponent[])[0]!
+
+    expect(result.card['gap']).toBe(0.75)
+    expect(grid['gap']).toBe(0.75)
+    expect(row['gap']).toBe(0.75)
+  })
+
+  it('refuses a gap the caller set itself', () => {
+    // The rhythm is the profile's. A number here is a model guessing at a unit
+    // it was never told — 14 meaning pixels renders as fourteen rem.
+    const result = validateChatCard({
+      component: 'VerticalStack',
+      gap: 14,
+      children: [{ component: 'Label', text: 'A' }],
+    })
+
+    expect(result.ok).toBe(false)
+  })
+
+  it('leaves gap out of the vocabulary the model is given', () => {
+    expect(describeChatCardProfile()).not.toContain('gap')
+  })
+
   describe('refuses anything the user could act on', () => {
     it.each([
       ['Button', { component: 'Button', text: 'Spara', onClickAction: 'save' }],

package/src/schemas/card.schema.ts

@@ -64,10 +64,24 @@ const children: z.ZodType<ChatCardComponent[]> = z.lazy(() =>
 // Layout
 // -----------------------------------------------------------------------------
 
+/*
+ * None of the three layouts takes a `gap`.
+ *
+ * A panel's author sets one and looks at the result; a model writes a number
+ * into a field described as `gap?: number` and never sees what it did. The unit
+ * is rem, which is not a thing anyone guesses — the first card written against
+ * this profile asked for `gap: 14`, meaning pixels, and the second asked for the
+ * 8 the validator allowed, which is 128 of them. Both were reasonable readings
+ * of a number with no unit on it.
+ *
+ * So the spacing is the profile's, not the caller's: `applyCardSpacing` stamps
+ * the same rhythm onto every stack and grid after validation. One less field to
+ * describe, and every card in the conversation is spaced alike.
+ */
+
 const VerticalStackCardSchema = z
   .object({
     component: z.literal('VerticalStack'),
-    gap: z.number().min(0).max(8).optional(),
     children,
     style,
   })
@@ -76,7 +90,6 @@ const VerticalStackCardSchema = z
 const HorizontalStackCardSchema = z
   .object({
     component: z.literal('HorizontalStack'),
-    gap: z.number().min(0).max(8).optional(),
     children,
     style,
   })
@@ -86,7 +99,6 @@ const GridCardSchema = z
   .object({
     component: z.literal('Grid'),
     columns: z.number().min(1).max(6),
-    gap: z.number().min(0).max(8).optional(),
     children,
     style,
   })
@@ -483,6 +495,37 @@ function findMisalignedChart(value: unknown): string | null {
   return null
 }
 
+/**
+ * The space between a card's components, in rem.
+ *
+ * One value for every stack and every grid: a card is read at a glance, and a
+ * rhythm that changes between two of them reads as a mistake rather than as
+ * emphasis. It matches what the components' own padding already assumes.
+ */
+const CARD_GAP_REM = 0.75
+
+/**
+ * Stamp the profile's spacing onto every layout in a validated card.
+ *
+ * Done here rather than in each client's renderer: the same card object goes to
+ * the web, to Electron and to the phone, so a number written once is a rhythm
+ * they cannot disagree about. The renderers keep their own default of no gap,
+ * which is what an extension panel means by leaving it out.
+ *
+ * Mutates the parsed copy, which zod built for us and nothing else holds.
+ */
+function applyCardSpacing(card: ChatCardComponent): ChatCardComponent {
+  if (card.component === 'VerticalStack' || card.component === 'HorizontalStack' || card.component === 'Grid') {
+    card['gap'] = CARD_GAP_REM
+  }
+
+  if (Array.isArray(card['children'])) {
+    for (const child of card['children'] as ChatCardComponent[]) applyCardSpacing(child)
+  }
+
+  return card
+}
+
 /** What came back from validating a card. */
 export type ChatCardValidation =
   | { ok: true; card: ChatCardComponent }
@@ -527,7 +570,7 @@ export function validateChatCard(card: unknown): ChatCardValidation {
     }
   }
 
-  return { ok: true, card: parsed.data }
+  return { ok: true, card: applyCardSpacing(parsed.data) }
 }
 
 // -----------------------------------------------------------------------------