@flitsmeister/design-system 2.2.36 → 3.0.0

package/dist/index.js

@@ -0,0 +1,8 @@
+export { FmButton } from './fm-button/fm-button.js';
+export { FmInput } from './fm-input/fm-input.js';
+export { FmRadioInput } from './fm-radio-input/fm-radio-input.js';
+export { FmDropdown } from './fm-dropdown/fm-dropdown.js';
+export { FmSegmentedController } from './fm-segmented-controller/fm-segmented-controller.js';
+export { FmWizard } from './fm-wizard/fm-wizard.js';
+export { FmIcon } from './fm-icon/fm-icon.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAA;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAA;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sDAAsD,CAAA;AAC5F,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA"}

package/package.json

@@ -1,76 +1,113 @@
 {
-    "name": "@flitsmeister/design-system",
-    "version": "2.2.36",
-    "description": "Flitsmeister design system and demo site",
-    "main": "index.js",
-    "exports": {
-        ".": "./index.js",
-        "./fmxInput": "./web/components/fmxInput.vue",
-        "./fmxButton": "./web/components/fmxButton.vue",
-        "./fmxDropdown": "./web/components/fmxDropdown.vue",
-        "./main.css": "./dist-lib/main.css",
-        "./themes/*": "./tokens/schema_exports/*",
-        "./components/*": "./web/components/*",
-        "./icons/*": "./web/icons/*"
+  "name": "@flitsmeister/design-system",
+  "version": "3.0.0",
+  "description": "Flitsmeister design system — Lit web components (v3+). v2.x on npm was Vue; same package name, major bump.",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flitsmeister/design-system-v2.git",
+    "directory": "package"
+  },
+  "homepage": "https://github.com/flitsmeister/design-system-v2#readme",
+  "bugs": {
+    "url": "https://github.com/flitsmeister/design-system-v2/issues"
+  },
+  "bin": {
+    "design-system-install": "scripts/install-cli.mjs",
+    "fm-ui-install": "scripts/install-cli.mjs"
+  },
+  "files": [
+    "dist",
+    "scripts"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build",
-        "build:docs": "vite build",
-        "build:lib": "vite build --config vite.config.lib.mjs && BUILD_CSS=1 vite build --config vite.config.lib.mjs",
-        "preview": "vite preview",
-        "test": "exit 0;"
+    "./fm-button": {
+      "types": "./dist/fm-button/fm-button.d.ts",
+      "import": "./dist/fm-button/fm-button.js"
     },
-    "author": "Flitsmeister",
-    "license": "ISC",
-    "dependencies": {
-        "@pivanov/vite-plugin-svg-sprite": "^3",
-        "@tailwindcss/postcss": "~4.1.13",
-        "@vitejs/plugin-vue": "^5",
-        "autoprefixer": "^10.4",
-        "axios": "~1.11",
-        "flagpack-core": "^2",
-        "postcss": "^8.4",
-        "sass": "^1.69",
-        "svgo": "~3.3.2",
-        "tailwindcss": "^4",
-        "uuid": "^9",
-        "vite": "^5",
-        "vue": "^3.2.0",
-        "vue-router": "~4.1.6",
-        "vuex": "~4.1"
+    "./fm-input": {
+      "types": "./dist/fm-input/fm-input.d.ts",
+      "import": "./dist/fm-input/fm-input.js"
     },
-    "devDependencies": {
-        "@flitsmeister/eslint": "~1.2.1",
-        "vite-plugin-static-copy": "~3.1.4"
+    "./fm-radio-input": {
+      "types": "./dist/fm-radio-input/fm-radio-input.d.ts",
+      "import": "./dist/fm-radio-input/fm-radio-input.js"
     },
-    "peerDependencies": {
-        "vue": "^3.2.0",
-        "vue-i18n": "~11.1.7"
+    "./fm-segmented-controller": {
+      "types": "./dist/fm-segmented-controller/fm-segmented-controller.d.ts",
+      "import": "./dist/fm-segmented-controller/fm-segmented-controller.js"
     },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/flitsmeister/design-system.git"
+    "./fm-dropdown": {
+      "types": "./dist/fm-dropdown/fm-dropdown.d.ts",
+      "import": "./dist/fm-dropdown/fm-dropdown.js"
     },
-    "keywords": [
-        "flitsmeister",
-        "design",
-        "styling",
-        "colors",
-        "icons"
-    ],
-    "bugs": {
-        "url": "https://github.com/flitsmeister/design-system/issues"
+    "./fm-wizard": {
+      "types": "./dist/fm-wizard/fm-wizard.d.ts",
+      "import": "./dist/fm-wizard/fm-wizard.js"
     },
-    "homepage": "https://github.com/flitsmeister/design-system#readme",
-    "files": [
-        "dist-lib/",
-        "index.js",
-        "web/components/",
-        "web/icons/",
-        "web/styles/",
-        "tokens/schema_exports/",
-        "package.json",
-        "README.md"
-    ]
+    "./fm-wizard-node": {
+      "types": "./dist/fm-wizard/fm-wizard-node.d.ts",
+      "import": "./dist/fm-wizard/fm-wizard-node.js"
+    },
+    "./fm-icon": {
+      "types": "./dist/fm-icon/fm-icon.d.ts",
+      "import": "./dist/fm-icon/fm-icon.js"
+    },
+    "./fm-icon/all": {
+      "types": "./dist/fm-icon/all.d.ts",
+      "import": "./dist/fm-icon/all.js"
+    },
+    "./fm-icon/all.js": {
+      "types": "./dist/fm-icon/all.d.ts",
+      "import": "./dist/fm-icon/all.js"
+    },
+    "./fm-icon/icons/*": {
+      "types": "./dist/fm-icon/icons/*.d.ts",
+      "import": "./dist/fm-icon/icons/*.js"
+    }
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "generate:icons": "node scripts/generate-icon-registry.js",
+    "generate:custom-elements": "custom-elements-manifest analyze --globs \"src/**/*.ts\" --outdir . && node scripts/enrich-custom-elements-manifest.js",
+    "build": "pnpm run generate:icons && tsc && node scripts/build-report.js",
+    "watch": "tsc --watch",
+    "mcp:install": "npm install --prefix ../mcp",
+    "mcp:build": "npm run build --prefix ../mcp",
+    "mcp:dev": "npm run dev --prefix ../mcp",
+    "mcp:start": "npm run start --prefix ../mcp",
+    "mcp:smoke": "npm run smoke --prefix ../mcp",
+    "prepublishOnly": "pnpm run build"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": false
+  },
+  "keywords": [
+    "flitsmeister",
+    "design-system",
+    "web-components",
+    "lit"
+  ],
+  "author": "Flitsmeister",
+  "engines": {
+    "node": ">=24"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.0.0",
+    "chalk": "^5.3.0",
+    "lit": "^3.3.2"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "latest",
+    "typescript": "^5.9.3"
+  },
+  "customElements": "custom-elements.json"
 }

package/scripts/build-report.js

@@ -0,0 +1,92 @@
+import Fs from 'fs'
+import Path from 'path'
+import Crypto from 'crypto'
+import { fileURLToPath } from 'url'
+
+const __dirname = Path.dirname(fileURLToPath(import.meta.url))
+const PACKAGE_ROOT = Path.resolve(__dirname, '..')
+const DIST_DIR = Path.join(PACKAGE_ROOT, 'dist')
+const CACHE_FILE = Path.join(PACKAGE_ROOT, '.build-cache.json')
+
+function hashFile(filePath) {
+  const content = Fs.readFileSync(filePath, 'utf8')
+  return Crypto.createHash('sha256').update(content).digest('hex')
+}
+
+function getComponentDirs(distPath) {
+  if (!Fs.existsSync(distPath)) return []
+  return Fs.readdirSync(distPath, { withFileTypes: true })
+    .filter((d) => d.isDirectory() && d.name.startsWith('fm-'))
+    .map((d) => d.name)
+    .sort()
+}
+
+function getAllFiles(dir, base = dir) {
+  const entries = Fs.readdirSync(dir, { withFileTypes: true })
+  const files = []
+  for (const e of entries) {
+    const full = Path.join(dir, e.name)
+    if (e.isDirectory()) {
+      files.push(...getAllFiles(full, base))
+    } else {
+      files.push(Path.relative(base, full))
+    }
+  }
+  return files
+}
+
+function hashComponent(componentDir) {
+  const dirPath = Path.join(DIST_DIR, componentDir)
+  if (!Fs.existsSync(dirPath)) return null
+  const files = getAllFiles(dirPath)
+  const hasher = Crypto.createHash('sha256')
+  for (const f of files.sort()) {
+    const content = Fs.readFileSync(Path.join(dirPath, f), 'utf8')
+    hasher.update(f).update(content)
+  }
+  return hasher.digest('hex')
+}
+
+function loadCache() {
+  if (!Fs.existsSync(CACHE_FILE)) return {}
+  try {
+    return JSON.parse(Fs.readFileSync(CACHE_FILE, 'utf8'))
+  } catch {
+    return {}
+  }
+}
+
+function saveCache(cache) {
+  Fs.writeFileSync(CACHE_FILE, JSON.stringify(cache, null, 2) + '\n', 'utf8')
+}
+
+function main() {
+  const components = getComponentDirs(DIST_DIR)
+  if (components.length === 0) {
+    console.log('\n  No components in dist/ (build may have failed).\n')
+    return
+  }
+
+  const prev = loadCache()
+  const report = []
+
+  for (const name of components) {
+    const hash = hashComponent(name)
+    if (hash === null) continue
+    const changed = prev[name] !== hash
+    report.push({ name, hash, changed })
+  }
+
+  saveCache(Object.fromEntries(report.map((r) => [r.name, r.hash])))
+
+  console.log('\n  Build report @flitsmeister/design-system')
+  console.log('  ─────────────────────────────')
+  for (const { name, changed } of report) {
+    const status = changed ? 'changed' : 'unchanged'
+    console.log(`    ${name.padEnd(16)} ${status}`)
+  }
+  console.log('  ─────────────────────────────')
+  console.log(`  ${report.length} component(s) built.\n`)
+}
+
+main()

package/scripts/enrich-custom-elements-manifest.js

@@ -0,0 +1,70 @@
+import { existsSync, readFileSync, writeFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+const root = process.cwd()
+const manifestPath = resolve(root, 'custom-elements.json')
+const manifest = JSON.parse(readFileSync(manifestPath, 'utf-8'))
+
+for (const module of manifest.modules ?? []) {
+  if (!module.path || !existsSync(resolve(root, module.path))) continue
+  const source = readFileSync(resolve(root, module.path), 'utf-8')
+
+  for (const declaration of module.declarations ?? []) {
+    if (!declaration.tagName || !declaration.name) continue
+
+    const decoratedProperties = extractDecoratedProperties(source, declaration.name)
+    const membersByName = new Map((declaration.members ?? []).map((member) => [member.name, member]))
+    const attributesByName = new Map((declaration.attributes ?? []).map((attribute) => [attribute.name, attribute]))
+
+    for (const property of decoratedProperties) {
+      if (property.attribute === false) continue
+
+      const member = membersByName.get(property.name)
+      const attributeName = property.attribute ?? kebabCase(property.name)
+      attributesByName.set(attributeName, {
+        name: attributeName,
+        fieldName: property.name,
+        description: member?.description ?? '',
+        type: member?.type,
+        default: member?.default,
+      })
+    }
+
+    declaration.attributes = [...attributesByName.values()]
+  }
+}
+
+writeFileSync(manifestPath, `${JSON.stringify(manifest, null, 2)}\n`)
+
+function extractDecoratedProperties(source, className) {
+  const classStart = source.search(new RegExp(`export\\s+class\\s+${className}\\b|class\\s+${className}\\b`))
+  if (classStart < 0) return []
+
+  const classBody = source.slice(classStart)
+  const propertyPattern = /@property\s*\(([\s\S]*?)\)\s*(?:\r?\n\s*)?(?:public\s+|protected\s+|private\s+)?([A-Za-z_$][\w$]*)/g
+  const properties = []
+
+  for (const match of classBody.matchAll(propertyPattern)) {
+    const options = match[1]
+    const name = match[2]
+    properties.push({
+      name,
+      attribute: parseAttributeOption(options)
+    })
+  }
+
+  return properties
+}
+
+function parseAttributeOption(options) {
+  if (/\battribute\s*:\s*false\b/.test(options)) return false
+
+  const explicit = options.match(/\battribute\s*:\s*['"]([^'"]+)['"]/)
+  if (explicit) return explicit[1]
+
+  return undefined
+}
+
+function kebabCase(value) {
+  return value.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+}

package/scripts/generate-icon-registry.js

@@ -0,0 +1,80 @@
+import Fs from 'fs'
+import Path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = Path.dirname(fileURLToPath(import.meta.url))
+const PACKAGE_ROOT = Path.resolve(__dirname, '..')
+const ICONS_ROOT = Path.join(PACKAGE_ROOT, 'icons')
+const FM_ICON_DIR = Path.join(PACKAGE_ROOT, 'src', 'fm-icon')
+const ICONS_OUT_DIR = Path.join(FM_ICON_DIR, 'icons')
+
+const VARIANTS = ['bold', 'filled', 'stroke', 'duotone']
+
+function toCurrentColor(svg) {
+  return svg.replace(/\bfill="#[^"]+"/g, 'fill="currentColor"').replace(/\bstroke="#[^"]+"/g, 'stroke="currentColor"')
+}
+
+function main() {
+  const iconMap = {}
+  const allKeys = []
+
+  if (!Fs.existsSync(FM_ICON_DIR)) {
+    Fs.mkdirSync(FM_ICON_DIR, { recursive: true })
+  }
+  if (Fs.existsSync(ICONS_OUT_DIR)) {
+    const existing = Fs.readdirSync(ICONS_OUT_DIR)
+    for (const f of existing) {
+      if (f.endsWith('.ts')) Fs.unlinkSync(Path.join(ICONS_OUT_DIR, f))
+    }
+  } else {
+    Fs.mkdirSync(ICONS_OUT_DIR, { recursive: true })
+  }
+
+  for (const variant of VARIANTS) {
+    const variantDir = Path.join(ICONS_ROOT, variant)
+    if (!Fs.existsSync(variantDir)) continue
+    const files = Fs.readdirSync(variantDir).filter((f) => f.endsWith('.svg'))
+    for (const file of files) {
+      const name = file.replace(/\.svg$/, '')
+      const key = `${variant}/${name}`
+      const svgPath = Path.join(variantDir, file)
+      let svg = Fs.readFileSync(svgPath, 'utf8')
+      svg = toCurrentColor(svg)
+      iconMap[key] = svg
+      allKeys.push(key)
+    }
+  }
+
+  allKeys.sort()
+
+  const generatedHeader = `/**
+ * Generated by scripts/generate-icon-registry.js – do not edit.
+ */\n\n`
+
+  const iconMapEntries = allKeys
+    .map((key) => `  ${JSON.stringify(key)}: ${JSON.stringify(iconMap[key])}`)
+    .join(',\n')
+  const generatedTs = `${generatedHeader}export const iconMap: Record<string, string> = {\n${iconMapEntries}\n}
+
+export const iconNames = ${JSON.stringify(allKeys)} as const
+export type IconName = (typeof iconNames)[number]
+export const iconVariants = ${JSON.stringify(VARIANTS)} as const
+export type IconVariant = (typeof iconVariants)[number]
+`
+
+  Fs.writeFileSync(Path.join(FM_ICON_DIR, 'icon-registry.generated.ts'), generatedTs)
+
+  for (const key of allKeys) {
+    const [variant, name] = key.split('/')
+    const fileName = `${variant}-${name}.ts`
+    const svg = iconMap[key]
+    const content = `${generatedHeader}import { registerIcon } from '../icon-registry.js'
+registerIcon(${JSON.stringify(key)}, ${JSON.stringify(svg)})
+`
+    Fs.writeFileSync(Path.join(ICONS_OUT_DIR, fileName), content)
+  }
+
+  console.log(`Generated icon registry with ${allKeys.length} icons (variants: ${VARIANTS.join(', ')})`)
+}
+
+main()

package/scripts/install-cli.mjs

@@ -0,0 +1,157 @@
+#!/usr/bin/env node
+
+import { spawn } from 'node:child_process'
+import chalk from 'chalk'
+import {
+  intro,
+  outro,
+  select,
+  multiselect,
+  confirm,
+  isCancel,
+  cancel,
+  log,
+  spinner
+} from '@clack/prompts'
+
+const COMPONENTS = [
+  { value: 'fm-button', label: 'fm-button', exportName: 'FmButton' },
+  { value: 'fm-input', label: 'fm-input', exportName: 'FmInput' },
+  {
+    value: 'fm-radio-input',
+    label: 'fm-radio-input',
+    exportName: 'FmRadioInput'
+  },
+  {
+    value: 'fm-dropdown',
+    label: 'fm-dropdown',
+    exportName: 'FmDropdown'
+  },
+  {
+    value: 'fm-segmented-controller',
+    label: 'fm-segmented-controller',
+    exportName: 'FmSegmentedController'
+  },
+  {
+    value: 'fm-wizard',
+    label: 'fm-wizard',
+    exportName: 'FmWizard'
+  },
+  {
+    value: 'fm-icon',
+    label: 'fm-icon',
+    exportName: 'FmIcon'
+  }
+]
+
+const title = chalk.hex('#0086F5').bold(`
+███████╗██╗     ██╗████████╗███████╗███╗   ███╗███████╗██╗███████╗████████╗███████╗██████╗     ██╗   ██╗██╗
+██╔════╝██║     ██║╚══██╔══╝██╔════╝████╗ ████║██╔════╝██║██╔════╝╚══██╔══╝██╔════╝██╔══██╗    ██║   ██║██║
+█████╗  ██║     ██║   ██║   ███████╗██╔████╔██║█████╗  ██║███████╗   ██║   █████╗  ██████╔╝    ██║   ██║██║
+██╔══╝  ██║     ██║   ██║   ╚════██║██║╚██╔╝██║██╔══╝  ██║╚════██║   ██║   ██╔══╝  ██╔══██╗    ██║   ██║██║
+██║     ███████╗██║   ██║   ███████║██║ ╚═╝ ██║███████╗██║███████║   ██║   ███████╗██║  ██║    ╚██████╔╝██║
+╚═╝     ╚══════╝╚═╝   ╚═╝   ╚══════╝╚═╝     ╚═╝╚══════╝╚═╝╚══════╝   ╚═╝   ╚══════╝╚═╝  ╚═╝     ╚═════╝ ╚═╝
+`)
+
+async function main() {
+  console.log(title)
+  intro('Welkom Flitsmeister UI')
+  console.log(chalk.gray('  ↑ ↓  Navigeren   ·   Spatie  Selecteren (bij meerdere)   ·   Enter  Bevestigen\n'))
+
+  const choice = await select({
+    message: 'Wat wilt u installeren?',
+    options: [
+      { value: 'all', label: 'Alle componenten' },
+      { value: 'selection', label: 'Selectie maken' }
+    ]
+  })
+
+  if (isCancel(choice)) {
+    cancel('Installatie geannuleerd.')
+    process.exit(0)
+  }
+
+  let selected
+  if (choice === 'all') {
+    selected = COMPONENTS.map((c) => c.value)
+  } else {
+    const multiselectResult = await multiselect({
+      message: 'Kies componenten (space = selecteren, enter = doorgaan)',
+      options: COMPONENTS.map((c) => ({ value: c.value, label: c.label })),
+      required: false
+    })
+    if (isCancel(multiselectResult)) {
+      cancel('Installatie geannuleerd.')
+      process.exit(0)
+    }
+    selected = multiselectResult
+  }
+
+  const chosen = COMPONENTS.filter((c) => selected.includes(c.value))
+
+  const includeIconsResult = await confirm({
+    message: 'Wil je ook de icons meenemen?'
+  })
+  if (isCancel(includeIconsResult)) {
+    cancel('Installatie geannuleerd.')
+    process.exit(0)
+  }
+  const includeIcons = includeIconsResult === true
+
+  if (chosen.length === 0 && !includeIcons) {
+    log.message('Geen componenten of icons gekozen. Geen actie uitgevoerd.')
+    outro('Klaar!')
+    process.exit(0)
+  }
+
+  let exportNames = chosen.map((c) => c.exportName)
+  if (includeIcons && !exportNames.includes('FmIcon')) {
+    exportNames.push('FmIcon')
+  }
+  exportNames = [...exportNames].sort()
+
+  const s = spinner()
+  s.start('Package installeren…')
+
+  const installed = await new Promise((resolve) => {
+    const child = spawn('pnpm', ['add', '@flitsmeister/design-system'], {
+      stdio: 'ignore',
+      cwd: process.cwd()
+    })
+    child.on('close', (code) => resolve(code === 0))
+    child.on('error', () => resolve(false))
+  })
+
+  if (installed) {
+    s.stop('Package geïnstalleerd')
+    log.message('\nImports (root API):')
+    if (exportNames.length > 0) {
+      console.log(chalk.gray(`  import { ${exportNames.join(', ')} } from '@flitsmeister/design-system'`))
+    }
+    if (includeIcons) {
+      log.message('Icon-set (alle icons):')
+      console.log(chalk.gray("  import '@flitsmeister/design-system/fm-icon/all'"))
+    }
+    outro('Klaar! Voeg de imports hierboven toe aan je project.')
+  } else {
+    s.error('Installatie mislukt of pnpm niet gevonden')
+    log.message('Voer handmatig uit:')
+    console.log(chalk.cyan('  pnpm add @flitsmeister/design-system'))
+    console.log(chalk.gray('  of: npm i @flitsmeister/design-system'))
+    log.message('\nImports (root API):')
+    if (exportNames.length > 0) {
+      console.log(chalk.gray(`  import { ${exportNames.join(', ')} } from '@flitsmeister/design-system'`))
+    }
+    if (includeIcons) {
+      log.message('Icon-set (alle icons):')
+      console.log(chalk.gray("  import '@flitsmeister/design-system/fm-icon/all'"))
+    }
+    outro('Voer het install-commando uit en voeg daarna de imports toe.')
+    process.exit(1)
+  }
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})

package/dist-lib/assets/style-entry-l0sNRNKZ.js

@@ -1 +0,0 @@
-