@payfit/unity-illustrations 2.55.5 → 2.55.6

package/dist/esm/scripts/agent-references/illustration-reference.d.ts

@@ -0,0 +1,17 @@
+export type IllustrationReferenceComponent = {
+    name: string;
+    type: string;
+    animated: boolean;
+    category?: string;
+};
+export declare const getIllustrationReferenceGroups: (components: IllustrationReferenceComponent[]) => {
+    category: string;
+    title: string;
+    components: IllustrationReferenceComponent[];
+}[];
+export declare const generateIllustrationsReference: (components: IllustrationReferenceComponent[]) => string;
+export declare const generateIllustrationsAgentReferencesReadme: () => string;
+export declare const writeIllustrationAgentReferences: ({ components, outputDir, }: {
+    components: IllustrationReferenceComponent[];
+    outputDir: string;
+}) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-illustrations",
-  "version": "2.55.5",
+  "version": "2.55.6",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -36,8 +36,7 @@
   },
   "files": [
     "dist",
-    "src",
-    "skills"
+    "src"
   ],
   "dependencies": {
     "image-size": "1.0.2",
@@ -51,7 +50,6 @@
     "@storybook/addon-mcp": "0.6.0",
     "@storybook/addon-themes": "10.4.6",
     "@storybook/react-vite": "10.4.6",
-    "@tanstack/intent": "0.3.0",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
     "image-size": "1.0.2",
@@ -66,15 +64,12 @@
     "@payfit/hr-app-eslint": "0.0.0-use.local",
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-themes": "2.55.5",
+    "@payfit/unity-themes": "2.55.6",
     "@payfit/vite-configs": "0.0.0-use.local"
   },
   "peerDependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "@payfit/unity-themes": "2.55.5"
-  },
-  "keywords": [
-    "tanstack-intent"
-  ]
+    "@payfit/unity-themes": "2.55.6"
+  }
 }

package/src/agent-references/README.mdx

@@ -0,0 +1,17 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Agent References/Illustrations Overview" />
+
+# Unity Illustrations Agent References
+
+{/* AUTO-GENERATED FILE. DO NOT EDIT.
+Generated by unity-illustrations:pre-build.
+Source: Unity illustration asset metadata.
+*/}
+
+
+This directory contains generated Storybook docs references for Unity illustrations. These files are intended for Storybook MCP, MCP indexers, and AI agents.
+
+Storybook includes these MDX files through the shared `../src/**/*.mdx` stories glob, and `@storybook/addon-mcp` exposes docs content to MCP clients.
+
+- [Illustrations](./illustrations.mdx)

package/src/agent-references/illustrations.mdx

@@ -0,0 +1,74 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Agent References/Illustrations" />
+
+# Illustrations
+
+{/* AUTO-GENERATED FILE. DO NOT EDIT.
+Generated by unity-illustrations:pre-build.
+Source: Unity illustration asset metadata.
+*/}
+
+
+Agent reference. Exact illustration names are grouped by variant to reduce context.
+
+Lazy: `<LazyIllustration name="ExactName" variant="icon|picture" alt="..." />`.
+
+Eager: `import Asset from "@payfit/unity-illustrations/ExactName"`, then `<Illustration src={Asset} variant="icon|picture" alt="..." />`.
+
+Animations use `variant="picture"`.
+
+## Illustrated icons (icon)
+
+- AdministrativeDocument, AdministrativeDocumentWithBackground, AnnualTaxes, BabyBottle, BabyBottleWithBackground, Bell, BellWithBackground, Bicycle
+- BicycleWithBackground, BlankPayslip, BlankPayslipWithBackground, Box, BoxWithBackground, Buoy, BuoyWithBackground, Calculator
+- CalculatorWithBackground, Card, CardWithBackground, CharacterHeadphone, CharacterHeadphoneWithBackground, Checkbox, CheckboxWithBackground, Clock
+- ClockWithBackground, ClosedLock, ClosedLockWithBackground, ComputerDocumentation, ComputerDocumentationWithBackground, Confettis, ConfettisWithBackground, Contact
+- Conversation, ConversationWithBackground, Data, DataWithBackground, Discount, DiscountWithBackground, Document, DocumentError
+- DocumentFiling, DocumentWithBackground, EmailNotification, EmailNotificationWithBackground, EmergencyContact, EmploymentContract, EmploymentContractWithBackground, EmptyDocument
+- EmptyDocumentWithBackground, EmptyState, EmptyStateWithBackground, ESignature, ExceedingThreshold, ExceptionalCompensation, ExceptionalCompensationWithBackground, Expenses
+- FAQ, FAQWithBackground, FieldGlasses, FieldGlassesWithBackground, FreeShare, FreeShareWithBackground, FullCalendar, FullCalendarWithBackground
+- Gear, GearWithBackground, Gift, GiftWithBackground, GoldenRibbon, GoldenRibbonWithBackground, Graph, GraphWithBackground
+- HalfCalendar, HalfCalendarWithBackground, Hammer, HammerWithBackground, HandHello, HandHelloWithBackground, HappyCharacter, HappyCharacterWithBackground
+- Health, HealthInsurance, HolidayVoucher, HolidayVoucherWithBackground, IdentityCard, InformationUpdate, InformationUpdateWithBackground, JEIJEUJEC
+- Kanoon, Kpmg, LegalHelp, LetterBox, LetterBoxWithBackground, LightBulb, LightBulbWithBackground, LittleRocket
+- LittleRocketWithBackground, LunchVoucher, MagnifyingGlass, MagnifyingGlassWithBackground, MealPlate, MealPlateWithBackground, MealVoucher, MealVoucherCard
+- MealVoucherCardWithBackground, MealVoucherWithBackground, Mobility, MoneyLending, MoneyLendingWithBackground, Notes, OfficialLetter, OfficialLetterWithBackground
+- OpenLock, OpenLockWithBackground, OrganismesPayment, PaidLeave, PaymentInformation, Payslip, PayslipCoins, PayslipCoinsWithBackground
+- PayslipWithBackground, Pen, PenWithBackground, People, PeopleWithBackground, Performance, PersonalDetails, PersonHeadphone
+- PersonHeadphoneWithBackground, PiggyBank, PiggyBankCoins, PiggyBankCoinsWithBackground, PiggyBankWithBackground, Plant, PlantWithBackground, ProvidentScheme
+- RemoteWork, Report, ReportWithBackground, Salary, SalaryAdvance, SalaryPayment, SalarySeizure, SalarySeizureWithBackground
+- SandCastle, SandCastleWithBackground, Schedule, ScheduleWithBackground, SettingSlider, SettingSliderWithBackground, SetUpTask, SickLeave
+- SmallPuzzle, SmallPuzzleWithBackground, SmilingCharacter, SmilingCharacterWithBackground, Spreadsheet, SpreadsheetWithBackground, Stethoscope, StethoscopeWithBackground
+- StockOptions, StockOptionsWithBackground, Stopwatch, StopwatchWithBackground, Sunshade, SunshadeWithBackground, TaskToDo, TaskToDoWithBackground
+- Template, TemplateWithBackground, Thumbtack, ThumbtackWithBackground, TimeTracking, TipsJar, TipsJarWithBackground, TokenCoin
+- TokenCoinWithBackground, ValidationWindow, ValidationWindowWithBackground, WorkExpense, WorkExpenseWithBackground, WorkingTime
+
+## Illustrated pictures (picture)
+
+- Accounting, AddEmployee, AlphabetCube, Analysis, AutomationInProgress, BigIdea, Binoculars, Biscuit
+- BiscuitCrumbs, Book, Brainstorming, Calendar, Chat, ChristmasSock, ChristmasSockAndConfettis, Collaboration
+- CollectiveResearch, ComputerMail, ConfettiCannon, ContractSignature, CrossLegged, CupOfCoffee, Dancing, DancingPeople
+- DancingSkier, Dialogue, Discussion, Doctor, DocumentCreation, DocumentScan, DocumentScanning, EmailLogin
+- EmptyStateActivationButton, EmptyStateActivationToggle, EmptyStateDesert, EmptyStateEmptyFolder, EmptyStateIncidentPanel, EmptyStateMaintenance, EmptyStateMoon, EmptyStateResearch
+- EmptyStateToDo, Evaluation, FilingDocuments, Flowchart, Graphic, Hands, HighFive, HighlightBooks
+- Idea, IndicateSomething, JetlangCalculator, Library, Marteler, Mug, Panel, PaperPlane
+- Party, PayfittersWithBadge, PayrollError, Person, PhoneMessage, Planet, PostIt, Progression
+- Promotion, Puzzle, PuzzlePiece, ReadingABook, ReceivingPay, RehireEmployee, Remote, Rocket
+- SafeDepositBox, Sale, SecurityFields, Signature, SittingOnTheSofa, SolveProblem, SpeakerFingertips, SpeakerWelcome
+- SpeakerWithMicrophone, StackOfBook2, StairTreads, TakingNote, Target, TeamBuilding, Telescope, TemplateForm
+- Thumbsup, Timer, ToggleOff, ToggleOn, Trophy, TrophyWon, VisuallyImpaired, VisuallyImpairedWinter
+- WalkingPeople, WinterParty, WorkAtOffice, WorkFromAnywhere, Wrench, WriteBook
+
+## Animations (picture; animated)
+
+- AccountingAnimation, BinocularsAnimation, CardAnimation, ClockAnimation, ConfettisAnimation, DocumentAnimation, HandsAnimation, KpmgAnimation
+- PanelAnimation, PaperPlaneAnimation, PartyAnimation, PayslipFlipAnimation, PeopleAnimation, PiggyBankAnimation, PlantAnimation, ScheduleAnimation
+- ThumbsupAnimation, WinterPartyAnimation
+
+## Other illustrations (picture)
+
+- AccountingWithBackground, AlphabetCubeWithBackground, BinocularsWithBackground, BookWithBackground, CalendarWithBackground, ComputerMailWithBackground, ConfettiCannonWithBackground, DialogueWithBackground
+- DocumentCreationWithBackground, DocumentScanWithBackground, ExpensesWithBackground, FlowchartWithBackground, HighFiveWithBackground, HighlightBooksWithBackground, IncidentPanel, MartelerWithBackground
+- PanelWithBackground, PaperPlaneWithBackground, PayrollErrorWithBackground, PerformanceDiscussion, PerformanceWithBackground, PostItWithBackground, SecurityFieldsWithBackground, SignatureWithBackground
+- StackOfBook2WithBackground, TemplateFormWithBackground, ToggleOffWithBackground, ToggleOnWithBackground, TrophyWithBackground, WriteBookWithBackground

package/src/scripts/agent-references/illustration-reference.test.ts

@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  generateIllustrationsReference,
+  getIllustrationReferenceGroups,
+} from './illustration-reference.js'
+
+describe('illustration agent references', () => {
+  it('groups illustrations by category with stable name sorting', () => {
+    expect(
+      getIllustrationReferenceGroups([
+        {
+          name: 'WriteBook',
+          type: 'svg',
+          animated: false,
+          category: 'picture',
+        },
+        {
+          name: 'FAQAnimation',
+          type: 'image',
+          animated: true,
+          category: 'animation',
+        },
+        {
+          name: 'Accounting',
+          type: 'svg',
+          animated: false,
+          category: 'picture',
+        },
+        { name: 'Baby', type: 'svg', animated: false, category: 'icon' },
+      ]),
+    ).toEqual([
+      {
+        category: 'icon',
+        title: 'Illustrated icons',
+        components: [
+          { name: 'Baby', type: 'svg', animated: false, category: 'icon' },
+        ],
+      },
+      {
+        category: 'picture',
+        title: 'Illustrated pictures',
+        components: [
+          {
+            name: 'Accounting',
+            type: 'svg',
+            animated: false,
+            category: 'picture',
+          },
+          {
+            name: 'WriteBook',
+            type: 'svg',
+            animated: false,
+            category: 'picture',
+          },
+        ],
+      },
+      {
+        category: 'animation',
+        title: 'Animations',
+        components: [
+          {
+            name: 'FAQAnimation',
+            type: 'image',
+            animated: true,
+            category: 'animation',
+          },
+        ],
+      },
+    ])
+  })
+
+  it('generates a compact Storybook MDX list with lazy and eager usage', () => {
+    const markdown = generateIllustrationsReference([
+      {
+        name: 'FAQAnimation',
+        type: 'image',
+        animated: true,
+        category: 'animation',
+      },
+    ])
+
+    expect(markdown).toContain('{/* AUTO-GENERATED FILE. DO NOT EDIT.')
+    expect(markdown).toContain(
+      '<Meta title="Agent References/Illustrations" />',
+    )
+    expect(markdown).toContain('## Animations (picture; animated)')
+    expect(markdown).not.toContain('| Name | Variant | Type | Animated |')
+    expect(markdown).toContain('- FAQAnimation')
+    expect(markdown).toContain(
+      'Lazy: `<LazyIllustration name="ExactName" variant="icon|picture" alt="..." />`',
+    )
+    expect(markdown).toContain(
+      'Eager: `import Asset from "@payfit/unity-illustrations/ExactName"`',
+    )
+    expect(markdown).not.toContain(
+      '`<LazyIllustration name="FAQAnimation" variant="picture" />`',
+    )
+  })
+})

package/src/scripts/agent-references/illustration-reference.ts

@@ -0,0 +1,140 @@
+import fs from 'fs'
+import path from 'path'
+
+export type IllustrationReferenceComponent = {
+  name: string
+  type: string
+  animated: boolean
+  category?: string
+}
+
+const GENERATED_NOTICE = `{/* AUTO-GENERATED FILE. DO NOT EDIT.
+Generated by unity-illustrations:pre-build.
+Source: Unity illustration asset metadata.
+*/}\n`
+
+const STORYBOOK_META = `import { Meta } from '@storybook/addon-docs/blocks'\n\n<Meta title="Agent References/Illustrations" />\n`
+const README_STORYBOOK_META = `import { Meta } from '@storybook/addon-docs/blocks'\n\n<Meta title="Agent References/Illustrations Overview" />\n`
+
+const CATEGORY_ORDER = ['icon', 'picture', 'animation', 'other']
+
+const CATEGORY_TITLES: Record<string, string> = {
+  icon: 'Illustrated icons',
+  picture: 'Illustrated pictures',
+  animation: 'Animations',
+  other: 'Other illustrations',
+}
+
+const getCategory = (component: IllustrationReferenceComponent) =>
+  component.category ?? 'other'
+
+const chunk = <T>(items: T[], size: number) => {
+  const chunks: T[][] = []
+
+  for (let index = 0; index < items.length; index += size) {
+    chunks.push(items.slice(index, index + size))
+  }
+
+  return chunks
+}
+
+export const getIllustrationReferenceGroups = (
+  components: IllustrationReferenceComponent[],
+) => {
+  const knownCategories = new Set(CATEGORY_ORDER)
+  const categories = [
+    ...CATEGORY_ORDER,
+    ...Array.from(new Set(components.map(getCategory))).filter(
+      category => !knownCategories.has(category),
+    ),
+  ]
+
+  return categories
+    .map(category => ({
+      category,
+      title: CATEGORY_TITLES[category] ?? category,
+      components: components
+        .filter(component => getCategory(component) === category)
+        .slice()
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    }))
+    .filter(group => group.components.length > 0)
+}
+
+export const generateIllustrationsReference = (
+  components: IllustrationReferenceComponent[],
+) => {
+  const lines = [
+    STORYBOOK_META,
+    '# Illustrations',
+    '',
+    GENERATED_NOTICE,
+    '',
+    'Agent reference. Exact illustration names are grouped by variant to reduce context.',
+    '',
+    'Lazy: `<LazyIllustration name="ExactName" variant="icon|picture" alt="..." />`.',
+    '',
+    'Eager: `import Asset from "@payfit/unity-illustrations/ExactName"`, then `<Illustration src={Asset} variant="icon|picture" alt="..." />`.',
+    '',
+    'Animations use `variant="picture"`.',
+    '',
+  ]
+
+  for (const group of getIllustrationReferenceGroups(components)) {
+    const variant = group.category === 'icon' ? 'icon' : 'picture'
+    const animated = group.category === 'animation' ? '; animated' : ''
+
+    lines.push(
+      `## ${group.title} (${variant}${animated})`,
+      '',
+      ...chunk(
+        group.components.map(component => component.name),
+        8,
+      ).map(names => `- ${names.join(', ')}`),
+      '',
+    )
+  }
+
+  return `${lines.join('\n').trimEnd()}\n`
+}
+
+export const generateIllustrationsAgentReferencesReadme =
+  () => `${README_STORYBOOK_META}
+# Unity Illustrations Agent References
+
+${GENERATED_NOTICE}
+
+This directory contains generated Storybook docs references for Unity illustrations. These files are intended for Storybook MCP, MCP indexers, and AI agents.
+
+Storybook includes these MDX files through the shared \`../src/**/*.mdx\` stories glob, and \`@storybook/addon-mcp\` exposes docs content to MCP clients.
+
+- [Illustrations](./illustrations.mdx)
+`
+
+export const writeIllustrationAgentReferences = ({
+  components,
+  outputDir,
+}: {
+  components: IllustrationReferenceComponent[]
+  outputDir: string
+}) => {
+  try {
+    fs.mkdirSync(outputDir, { recursive: true })
+    fs.writeFileSync(
+      path.join(outputDir, 'README.mdx'),
+      generateIllustrationsAgentReferencesReadme(),
+      'utf8',
+    )
+    fs.writeFileSync(
+      path.join(outputDir, 'illustrations.mdx'),
+      generateIllustrationsReference(components),
+      'utf8',
+    )
+  } catch (error) {
+    throw new Error(
+      `Failed to write illustration agent references to ${outputDir}: ${
+        error instanceof Error ? error.message : String(error)
+      }`,
+    )
+  }
+}

package/src/scripts/generate-assets.ts

@@ -20,12 +20,14 @@ import {
 } from './templates/assetTemplate'
 import { generateBaseTypes } from './templates/baseTypes'
 import { generateIndexFile } from './templates/indexTemplate'
+import { writeIllustrationAgentReferences } from './agent-references/illustration-reference'
 
 // Configuration
 const illustrationsSvgDir = path.resolve('./assets/')
 const srcRoot = path.resolve('./src')
 const outputDir = path.join(srcRoot, 'generated')
 const assetsOutputDir = path.join(outputDir, 'assets') // Optimized assets go here
+const agentReferencesOutputDir = path.resolve('./src/agent-references')
 const configPath = path.resolve('./.figma-sync.json')
 
 const verboseFromArg = process.argv.some(
@@ -592,6 +594,10 @@ async function main() {
     indexContent,
     'utf8',
   )
+  writeIllustrationAgentReferences({
+    components,
+    outputDir: agentReferencesOutputDir,
+  })
 
   // Summary
   const totalSizeBefore = components.reduce((sum, c) => sum + c.sizeBefore, 0)