@json-layout/core 2.4.0 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-layout/core",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Compilation and state management utilities for JSON Layout.",
   "type": "module",
   "exports": {
@@ -45,6 +45,12 @@
         "types": "./types/utils/doc-options.d.ts",
         "default": "./src/utils/doc-options.js"
       }
+    },
+    "./webmcp": {
+      "import": {
+        "types": "./types/webmcp/index.d.ts",
+        "default": "./src/webmcp/index.js"
+      }
     }
   },
   "files": [
@@ -89,6 +95,7 @@
     "marked": "^15.0.7"
   },
   "devDependencies": {
+    "@mcp-b/webmcp-types": "^2.2.0",
     "@types/debug": "^4.1.7",
     "@types/node-fetch": "^2.6.5",
     "json-schema-to-typescript": "^14.0.0",

package/src/i18n/de.js

@@ -14,25 +14,6 @@ export default {
   up: 'Nach oben verschieben',
   down: 'Nach unten verschieben',
   showHelp: 'Hilfemeldung anzeigen',
-  mdeLink1: '[Link-Titel',
-  mdeLink2: '](Link-URL)',
-  mdeImg1: '![](',
-  mdeImg2: 'Bild-URL)',
-  mdeTable1: '',
-  mdeTable2: '\n\n| Spalte 1 | Spalte 2 | Spalte 3 |\n| -------- | -------- | -------- |\n| Text     | Text     | Text     |\n\n',
-  bold: 'Fett',
-  italic: 'Kursiv',
-  heading: 'Titel',
-  quote: 'Zitat',
-  unorderedList: 'Ungeordnete Liste',
-  orderedList: 'Geordnete Liste',
-  createLink: 'Link erstellen',
-  insertImage: 'Bild einfügen',
-  createTable: 'Tabelle erstellen',
-  preview: 'Vorschau',
-  mdeGuide: 'Syntax-Dokumentation',
-  undo: 'Rückgängig',
-  redo: 'Wiederholen',
   default: 'standard: ',
   name: 'name: ',
   examples: 'Beispiele: ',

package/src/i18n/en.js

@@ -14,25 +14,6 @@ export default {
   up: 'Move up',
   down: 'Move down',
   showHelp: 'Show a help message',
-  mdeLink1: '[Link title',
-  mdeLink2: '](link url)',
-  mdeImg1: '![](',
-  mdeImg2: 'image url)',
-  mdeTable1: '',
-  mdeTable2: '\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text     | Text     | Text     |\n\n',
-  bold: 'Bold',
-  italic: 'Italic',
-  heading: 'Title',
-  quote: 'Quote',
-  unorderedList: 'Unordered list',
-  orderedList: 'Ordered list',
-  createLink: 'Create a link',
-  insertImage: 'Insert an image',
-  createTable: 'Create a table',
-  preview: 'Aperçu du rendu',
-  mdeGuide: 'Documentation de la syntaxe',
-  undo: 'Undo',
-  redo: 'Redo',
   default: 'default: ',
   name: 'name: ',
   examples: 'Examples: ',

package/src/i18n/fr.js

@@ -14,25 +14,6 @@ export default {
   up: 'Décaler vers le haut',
   down: 'Décaler vers le bas',
   showHelp: 'Afficher un message d\'aide',
-  mdeLink1: '[titre du lien',
-  mdeLink2: '](adresse du lien)',
-  mdeImg1: '![](',
-  mdeImg2: 'adresse de l\'image)',
-  mdeTable1: '',
-  mdeTable2: '\n\n| Colonne 1 | Colonne 2 | Colonne 3 |\n| -------- | -------- | -------- |\n| Texte     | Texte     | Texte     |\n\n',
-  bold: 'Gras',
-  italic: 'Italique',
-  heading: 'Titre',
-  quote: 'Citation',
-  unorderedList: 'Liste à puce',
-  orderedList: 'Liste numérotée',
-  createLink: 'Créer un lien',
-  insertImage: 'Insérer une image',
-  createTable: 'Créer un tableau',
-  preview: 'Preview',
-  mdeGuide: 'Syntax documentation',
-  undo: 'Défaire',
-  redo: 'Refaire',
   default: 'défaut : ',
   name: 'nom : ',
   examples: 'Exemples : ',

package/src/i18n/nl.js

@@ -14,25 +14,6 @@ export default {
   up: 'Omhoog verplaatsen',
   down: 'Omlaag verplaatsen',
   showHelp: 'Toon helpbericht',
-  mdeLink1: '[Link titel',
-  mdeLink2: '](link url)',
-  mdeImg1: '![](',
-  mdeImg2: 'afbeelding url)',
-  mdeTable1: '',
-  mdeTable2: '\n\n| Kolom 1  | Kolom 2  | Kolom 3  |\n| -------- | -------- | -------- |\n| Tekst    | Tekst    | Tekst    |\n\n',
-  bold: 'Vet',
-  italic: 'Cursief',
-  heading: 'Titel',
-  quote: 'Citaat',
-  unorderedList: 'Ongeordende lijst',
-  orderedList: 'Geordende lijst',
-  createLink: 'Maak een koppeling',
-  insertImage: 'Afbeelding invoegen',
-  createTable: 'Tabel aanmaken',
-  preview: 'Voorbeeld',
-  mdeGuide: 'Documentatie over syntaxis',
-  undo: 'Ongedaan maken',
-  redo: 'Opnieuw',
   default: 'standaard: ',
   name: 'naam: ',
   examples: 'Voorbeelden: ',

package/src/i18n/types.ts

@@ -18,25 +18,6 @@ export interface StateOptionsMessages {
   up: string
   down: string
   showHelp: string
-  mdeLink1: string
-  mdeLink2: string
-  mdeImg1: string
-  mdeImg2: string
-  mdeTable1: string
-  mdeTable2: string
-  bold: string
-  italic: string
-  heading: string
-  quote: string
-  unorderedList: string
-  orderedList: string
-  createLink: string
-  insertImage: string
-  createTable: string
-  preview: string
-  mdeGuide: string
-  undo: string
-  redo: string
   keyboardDate: string
   keyboardDateTime: string
 }

package/src/state/state-tree.js

@@ -51,7 +51,16 @@ export function createStateTree (
 ) {
   logStateTree('createStateTree', skeleton.root)
   const validate = compiledLayout.validates[skeleton.refPointer]
-  const valid = validate(data)
+  let valid
+  if (compiledLayout.options?.ajvOptions?.coerceTypes) {
+    const serializedBefore = JSON.stringify(data)
+    valid = validate(data)
+    if (JSON.stringify(data) !== serializedBefore) {
+      data = { .../** @type {Record<string, unknown>} */(data) }
+    }
+  } else {
+    valid = validate(data)
+  }
   if (validate.errors) {
     logValidation(`${skeleton.root} new state tree initial validation errors`, validate.errors, validationState)
     for (const error of validate.errors) {

package/src/webmcp/index.js

@@ -0,0 +1,283 @@
+/**
+ * @file WebMCP integration for JSON Layout StatefulLayout
+ * @description Provides MCP tool descriptors that work with browser's navigator.modelContext
+ */
+
+import debug from 'debug'
+
+import * as describeState from './tools/describe-state.js'
+import * as setFieldValue from './tools/set-field-value.js'
+import * as setData from './tools/set-data.js'
+import * as getData from './tools/get-data.js'
+import * as getFieldSuggestions from './tools/get-field-suggestions.js'
+import * as fillFormSkill from './tools/fill-form-skill.js'
+
+/** @typedef {import('@mcp-b/webmcp-types').ToolDescriptor} ToolDescriptor */
+
+const log = debug('jl:webmcp')
+
+/**
+ * @typedef {object} WebMCPOptions
+ * @property {string} [prefixName] - Prefix for all tool names
+ * @property {string} [dataTitle] - Title used in descriptions (default: 'form')
+ * @property {object} [schema] - The original JSON schema
+ */
+
+/**
+ * WebMCP class that provides MCP tool descriptors for a StatefulLayout instance
+ */
+export class WebMCP {
+  /**
+   * @readonly
+   * @type {import('../state/index.js').StatefulLayout}
+   */
+  _statefulLayout
+
+  /**
+   * @readonly
+   * @type {string}
+   */
+  _prefixName
+
+  /**
+   * @readonly
+   * @type {string}
+   */
+  _dataTitle
+
+  /**
+   * @readonly
+   * @type {string}
+   */
+  _skill
+
+  /**
+   * @readonly
+   * @type {object | null}
+   */
+  _schema = null
+
+  /**
+   * @type {string[]}
+   */
+  _registeredTools = []
+
+  /**
+   * @param {import('../state/index.js').StatefulLayout} statefulLayout
+   * @param {WebMCPOptions} [options]
+   */
+  constructor (statefulLayout, options = {}) {
+    this._statefulLayout = statefulLayout
+    this._prefixName = options.prefixName || ''
+    this._dataTitle = options.dataTitle || 'form'
+    this._schema = options.schema || null
+    this._skill = fillFormSkill.generateSkill(this._dataTitle, this._prefixName, !!this._schema, this._statefulLayout)
+  }
+
+  /**
+   * @param {string} name
+   * @returns {string}
+   */
+  _toolName (name) {
+    return this._prefixName + name
+  }
+
+  /**
+   * @returns {ToolDescriptor[]}
+   */
+  getTools () {
+    const dataTitle = this._dataTitle
+
+    /** @type {ToolDescriptor[]} */
+    const tools = [
+      {
+        name: this._toolName('fillFormSkill'),
+        description: fillFormSkill.getDescription(dataTitle),
+        outputSchema: { type: 'string' },
+        execute: async (args) => {
+          try {
+            return {
+              content: [{ type: 'text', text: this._skill }]
+            }
+          } catch (err) {
+            const message = err instanceof Error ? err.message : String(err)
+            return {
+              content: [{ type: 'text', text: `Error: ${message}` }],
+              isError: true
+            }
+          }
+        }
+      },
+      {
+        name: this._toolName('getData'),
+        description: getData.getDescription(dataTitle),
+        inputSchema: getData.inputSchema,
+        outputSchema: getData.outputSchema,
+        execute: async (args) => {
+          try {
+            const result = getData.execute(this._statefulLayout, args || {})
+            return {
+              content: [{ type: 'text', text: JSON.stringify(result, null, 2) }]
+            }
+          } catch (err) {
+            const message = err instanceof Error ? err.message : String(err)
+            return {
+              content: [{ type: 'text', text: `Error: ${message}` }],
+              isError: true
+            }
+          }
+        }
+      },
+      {
+        name: this._toolName('setData'),
+        description: setData.getDescription(dataTitle),
+        inputSchema: setData.inputSchema,
+        outputSchema: setData.outputSchema,
+        execute: async (args) => {
+          try {
+            if (!args?.data) {
+              throw new Error('data is required')
+            }
+            const result = setData.execute(
+              this._statefulLayout,
+              /** @type {{ data: unknown }} */(args)
+            )
+            return {
+              content: [{ type: 'text', text: JSON.stringify(result, null, 2) }]
+            }
+          } catch (err) {
+            const message = err instanceof Error ? err.message : String(err)
+            return {
+              content: [{ type: 'text', text: `Error: ${message}` }],
+              isError: true
+            }
+          }
+        }
+      },
+      {
+        name: this._toolName('describeState'),
+        description: describeState.getDescription(dataTitle),
+        inputSchema: describeState.inputSchema,
+        outputSchema: describeState.outputSchema,
+        execute: async (args) => {
+          try {
+            const result = describeState.execute(this._statefulLayout, args || {})
+            return {
+              content: [{ type: 'text', text: JSON.stringify(result, null, 2) }]
+            }
+          } catch (err) {
+            const message = err instanceof Error ? err.message : String(err)
+            return {
+              content: [{ type: 'text', text: `Error: ${message}` }],
+              isError: true
+            }
+          }
+        }
+      },
+      {
+        name: this._toolName('setFieldValue'),
+        description: setFieldValue.getDescription(dataTitle),
+        inputSchema: setFieldValue.inputSchema,
+        outputSchema: setFieldValue.outputSchema,
+        execute: async (args) => {
+          try {
+            if (!args?.path) {
+              throw new Error('path is required')
+            }
+            const result = setFieldValue.execute(
+              this._statefulLayout,
+              /** @type {{ path: string, value: unknown }} */(args)
+            )
+            return {
+              content: [{ type: 'text', text: JSON.stringify(result, null, 2) }]
+            }
+          } catch (err) {
+            const message = err instanceof Error ? err.message : String(err)
+            return {
+              content: [{ type: 'text', text: `Error: ${message}` }],
+              isError: true
+            }
+          }
+        }
+      },
+      {
+        name: this._toolName('getFieldSuggestions'),
+        description: getFieldSuggestions.getDescription(dataTitle),
+        inputSchema: getFieldSuggestions.inputSchema,
+        outputSchema: getFieldSuggestions.outputSchema,
+        execute: async (args) => {
+          try {
+            if (!args?.path) {
+              throw new Error('path is required')
+            }
+            const result = await getFieldSuggestions.execute(
+              this._statefulLayout,
+              /** @type {{ path: string, query?: string }} */(args)
+            )
+            return {
+              content: [{ type: 'text', text: JSON.stringify(result, null, 2) }]
+            }
+          } catch (err) {
+            const message = err instanceof Error ? err.message : String(err)
+            return {
+              content: [{ type: 'text', text: `Error: ${message}` }],
+              isError: true
+            }
+          }
+        }
+      }
+    ]
+
+    if (this._schema) {
+      tools.push({
+        name: this._toolName('getSchema'),
+        description: `Get the the JSON schema that governs "${dataTitle}" form.`,
+        outputSchema: {
+          type: 'object',
+          properties: {
+            jsonSchema: {},
+          }
+        },
+        execute: async (args) => {
+          return {
+            jsonSchema: this._schema
+          }
+        }
+      })
+    }
+
+    return tools
+  }
+
+  /**
+   * @returns {Promise<void>}
+   */
+  async registerTools () {
+    if (typeof navigator === 'undefined' || !navigator.modelContext) {
+      throw new Error('navigator.modelContext is not available')
+    }
+
+    const tools = this.getTools()
+    for (const tool of tools) {
+      log('registering tool:', tool.name)
+      // @ts-ignore - complex generic types from webmcp-types
+      await navigator.modelContext.registerTool(tool)
+      this._registeredTools.push(tool.name)
+    }
+  }
+
+  /**
+   * @returns {Promise<void>}
+   */
+  async unregisterTools () {
+    if (typeof navigator === 'undefined' || !navigator.modelContext) {
+      throw new Error('navigator.modelContext is not available')
+    }
+
+    for (const name of this._registeredTools) {
+      log('unregistering tool:', name)
+      await navigator.modelContext.unregisterTool(name)
+    }
+    this._registeredTools = []
+  }
+}

package/src/webmcp/project.js

@@ -0,0 +1,148 @@
+/**
+ * @file Projection functions for webmcp tools
+ */
+
+import { isItemsLayout } from '@json-layout/vocabulary'
+
+const constraintKeys = {
+  'number-field': ['min', 'max', 'step', 'precision'],
+  slider: ['min', 'max', 'step'],
+  'date-picker': ['min', 'max', 'format'],
+  'date-time-picker': ['min', 'max'],
+  'time-picker': ['min', 'max'],
+  combobox: ['separator'],
+  'number-combobox': ['separator']
+}
+
+/**
+ * @param {string} comp
+ * @returns {string[]|undefined}
+ */
+function getConstraintKeys (comp) {
+  // @ts-ignore - complex union type not fully represented
+  return constraintKeys[comp]
+}
+
+/**
+ * @param {import('../state/types.js').StateNode} node
+ * @param {import('../state/index.js').StatefulLayout} statefulLayout
+ * @returns {{
+ *   key: string|number,
+ *   path: string,
+ *   comp: string,
+ *   data: unknown,
+ *   title?: string,
+ *   label?: string,
+ *   help?: string,
+ *   error?: string,
+ *   childError?: boolean,
+ *   required?: boolean,
+ *   readOnly?: boolean,
+ *   constraints?: Record<string, unknown>,
+ *   oneOfItems?: Array<{key: number, title: string}>,
+ *   children?: Array<any>
+ *   getSuffections?: boolean
+ * }}
+ */
+export function projectNode (node, statefulLayout) {
+  /**
+   * @type {{
+   *   key: string|number,
+   *   path: string,
+   *   comp: string,
+   *   data: unknown,
+   *   title?: string,
+   *   label?: string,
+   *   help?: string,
+   *   error?: string,
+   *   childError?: boolean,
+   *   required?: boolean,
+   *   readOnly?: boolean,
+   *   constraints?: Record<string, unknown>,
+   *   oneOfItems?: Array<{key: number, title: string}>,
+   *   children?: Array<any>
+   *   getSuggestions?: boolean
+   * }}
+   */
+  const out = {
+    key: node.key,
+    path: node.fullKey,
+    comp: node.layout.comp,
+    data: node.data
+  }
+
+  const layout = /** @type {Record<string, unknown>} */(node.layout)
+  if (typeof layout.title === 'string') out.title = layout.title
+  if (typeof layout.label === 'string') out.label = layout.label
+  if (node.layout.help) out.help = node.layout.help
+
+  if (node.error) out.error = node.error
+  if (node.childError) out.childError = true
+
+  if (node.skeleton.required) out.required = true
+  if (node.options.readOnly) out.readOnly = true
+  if (isItemsLayout(node.layout, statefulLayout.compiledLayout.components)) out.getSuggestions = true
+
+  const keys = getConstraintKeys(node.layout.comp)
+  if (keys) {
+    /** @type {Record<string, unknown>} */
+    const constraints = {}
+    for (const k of keys) {
+      const v = layout[k]
+      if (v !== undefined && v !== null) constraints[k] = v
+    }
+    if (Object.keys(constraints).length > 0) out.constraints = constraints
+  }
+
+  if (node.layout.comp === 'one-of-select' && Array.isArray(layout.oneOfItems)) {
+    out.oneOfItems = layout.oneOfItems
+      .filter((item) => !item.header)
+      .map((item) => ({ key: item.key, title: item.title }))
+  }
+
+  if (node.children) {
+    out.children = node.children
+      .filter((c) => c.layout.comp !== 'none')
+      .map(node => projectNode(node, statefulLayout))
+  }
+
+  return out
+}
+
+/**
+ * @param {import('../state/types.js').StateTree} stateTree
+ * @param {import('../state/index.js').StatefulLayout} statefulLayout
+ * @returns {{ root: ReturnType<typeof projectNode>, valid: boolean }}
+ */
+export function projectStateTree (stateTree, statefulLayout) {
+  return {
+    root: projectNode(stateTree.root, statefulLayout),
+    valid: stateTree.valid
+  }
+}
+
+/**
+ * @param {import('../state/types.js').StateNode} node
+ * @returns {Array<{path: string, message: string}>}
+ */
+export function collectErrors (node) {
+  /** @type {Array<{path: string, message: string}>} */
+  const errors = []
+  collectErrorsRecurse(node, errors)
+  return errors
+}
+
+/**
+ * @param {import('../state/types.js').StateNode} node
+ * @param {Array<{path: string, message: string}>} errors
+ */
+function collectErrorsRecurse (node, errors) {
+  if (node.error) {
+    errors.push({ path: node.fullKey, message: node.error })
+  }
+  if (node.children) {
+    for (const child of node.children) {
+      collectErrorsRecurse(child, errors)
+    }
+  }
+}

package/src/webmcp/resolve.js

@@ -0,0 +1,25 @@
+/**
+ * @file Node resolution for webmcp tools
+ */
+
+/**
+ * Navigate from a root StateNode to a descendant node by path.
+ * @param {import('../state/types.js').StateNode} root
+ * @param {string} path
+ * @returns {import('../state/types.js').StateNode|undefined}
+ */
+export function resolveNode (root, path) {
+  if (!path || path === '/') return root
+
+  const segments = path.replace(/^\//, '').split('/')
+  /** @type {import('../state/types.js').StateNode|undefined} */
+  let current = root
+
+  for (const segment of segments) {
+    if (!current?.children) return undefined
+    const key = /^\d+$/.test(segment) ? parseInt(segment, 10) : segment
+    current = current.children.find((c) => c.key === key)
+  }
+
+  return current
+}