@narrative.io/jsonforms-provider-protocols 3.0.0-beta.3 → 3.0.0-beta.4

package/dist/vue/primevue/index.js

@@ -17,13 +17,38 @@ const injectLayoutStyles = () => {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 1rem;
+  gap: 24px;
   width: 100%;
 }
 
 .vertical-layout-item {
   width: 100%;
 }
+
+/* Form control wrapper */
+.jf-control {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* Form control label typography */
+.jf-label {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 14px;
+  color: #031553;
+  text-align: left;
+}
+
+/* Form control description typography */
+.jf-description {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 14px;
+  color: #415290;
+  text-align: left;
+}
       `;
       document.head.appendChild(style);
     }
@@ -64,39 +89,91 @@ function registerPrimevueRenderers(jsonformsCore) {
       {}
     );
   };
-  const projectedSchemaMatches = (check) => (uischema, schema) => {
-    const ui = uischema;
-    const projection = ui?.options?.projection;
-    if (!projection || ui?.type !== "Control" || !ui?.scope) return false;
-    const propertySchema = resolveScopeSchema(ui.scope, schema);
-    if (!propertySchema) return false;
-    return check(getProjectedSchema(propertySchema, projection));
-  };
+  const projectedSchemaMatches = (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ((check) => (uischema, schema) => {
+      const ui = uischema;
+      const projection = ui?.options?.projection;
+      if (!projection || ui?.type !== "Control" || !ui?.scope) return false;
+      const propertySchema = resolveScopeSchema(
+        ui.scope,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        schema
+      );
+      if (!propertySchema) return false;
+      return check(getProjectedSchema(propertySchema, projection));
+    })
+  );
   const isMultilineProjection = (uischema, schema) => {
     const ui = uischema;
     return ui?.options?.multi === true && projectedSchemaMatches((s) => s?.type === "string")(uischema, schema);
   };
   const renderers = [
     // Multiline text has higher priority than regular text
-    { tester: rankWith(PRIME + 4, or(isMultilineString, isMultilineProjection)), renderer: _sfc_main },
-    { tester: rankWith(PRIME + 3, or(isStringControl, projectedSchemaMatches((s) => s?.type === "string"))), renderer: _sfc_main$1 },
     {
-      tester: rankWith(PRIME + 6, or(isIntegerControl, projectedSchemaMatches((s) => s?.type === "integer"))),
+      tester: rankWith(PRIME + 4, or(isMultilineString, isMultilineProjection)),
+      renderer: _sfc_main
+    },
+    {
+      tester: rankWith(
+        PRIME + 3,
+        or(
+          isStringControl,
+          projectedSchemaMatches((s) => s?.type === "string")
+        )
+      ),
+      renderer: _sfc_main$1
+    },
+    {
+      tester: rankWith(
+        PRIME + 6,
+        or(
+          isIntegerControl,
+          projectedSchemaMatches((s) => s?.type === "integer")
+        )
+      ),
       renderer: _sfc_main$2
     },
     {
-      tester: rankWith(PRIME + 4, or(isNumberControl, projectedSchemaMatches((s) => s?.type === "number"))),
+      tester: rankWith(
+        PRIME + 4,
+        or(
+          isNumberControl,
+          projectedSchemaMatches((s) => s?.type === "number")
+        )
+      ),
       renderer: _sfc_main$2
     },
     {
-      tester: rankWith(PRIME + 7, or(and(isControl, schemaMatches(isScalarEnum)), and(isControl, projectedSchemaMatches(isScalarEnum)))),
+      tester: rankWith(
+        PRIME + 7,
+        or(
+          and(isControl, schemaMatches(isScalarEnum)),
+          and(isControl, projectedSchemaMatches(isScalarEnum))
+        )
+      ),
       renderer: _sfc_main$3
     },
     {
-      tester: rankWith(PRIME + 8, or(and(isControl, schemaMatches(isEnumArray)), and(isControl, projectedSchemaMatches(isEnumArray)))),
+      tester: rankWith(
+        PRIME + 8,
+        or(
+          and(isControl, schemaMatches(isEnumArray)),
+          and(isControl, projectedSchemaMatches(isEnumArray))
+        )
+      ),
       renderer: _sfc_main$4
     },
-    { tester: rankWith(PRIME + 3, or(isBooleanControl, projectedSchemaMatches((s) => s?.type === "boolean"))), renderer: _sfc_main$5 }
+    {
+      tester: rankWith(
+        PRIME + 3,
+        or(
+          isBooleanControl,
+          projectedSchemaMatches((s) => s?.type === "boolean")
+        )
+      ),
+      renderer: _sfc_main$5
+    }
   ];
   primevueRenderers.splice(0, primevueRenderers.length, ...renderers);
   renderersInitialized = true;

package/dist/vue/primevue/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/vue/primevue/index.ts"],"sourcesContent":["import JfText from \"./JfText.vue\";\nimport JfTextArea from \"./JfTextArea.vue\";\nimport JfNumber from \"./JfNumber.vue\";\nimport JfEnum from \"./JfEnum.vue\";\nimport JfEnumArray from \"./JfEnumArray.vue\";\nimport JfBoolean from \"./JfBoolean.vue\";\nimport { getProjectedSchema } from \"../../core/projection\";\nimport { resolveScopeSchema } from \"../../core/resolveScope\";\n\n// Auto-inject layout styles\nconst injectLayoutStyles = () => {\n  if (typeof window !== \"undefined\" && typeof document !== \"undefined\") {\n    if (!document.getElementById(\"jsonforms-primevue-styles\")) {\n      const style = document.createElement(\"style\");\n      style.id = \"jsonforms-primevue-styles\";\n      style.textContent = `\n/* JSONForms PrimeVue Provider Protocols Layout Styles */\n.vertical-layout {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 1rem;\n  width: 100%;\n}\n\n.vertical-layout-item {\n  width: 100%;\n}\n      `;\n      document.head.appendChild(style);\n    }\n  }\n};\n\n// Inject styles when this module is imported\ninjectLayoutStyles();\n\n// Track whether renderers have been registered to avoid duplicate registrations\nlet renderersInitialized = false;\n\n// Return empty renderers array initially\nexport const primevueRenderers: unknown[] = [];\n\n// Export a function that can be called by the consumer to register renderers\n// This should only be called once during application initialization\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function registerPrimevueRenderers(jsonformsCore: any): unknown[] {\n  // Prevent duplicate registration which causes AJV schema recompilation\n  if (renderersInitialized) {\n    return primevueRenderers as unknown[];\n  }\n\n  const {\n    rankWith,\n    isStringControl,\n    isNumberControl,\n    isIntegerControl,\n    and,\n    or,\n    isControl,\n    schemaMatches,\n    isBooleanControl,\n  } = jsonformsCore;\n\n  // Give PrimeVue renderers a high base rank; vanilla commonly uses small ranks (2–5)\n  const PRIME = 100;\n\n  // helpers for enum detection - using simple schema checks instead of JSONForms internal functions\n  const isScalarEnum = (s?: object) => {\n    const schema = s as {\n      type?: string;\n      enum?: unknown[];\n      oneOf?: unknown[];\n    };\n    return (\n      schema &&\n      schema.type !== \"array\" &&\n      (Array.isArray(schema.enum) || Array.isArray(schema.oneOf))\n    );\n  };\n\n  const isEnumArray = (s?: object) => {\n    const schema = s as {\n      type?: string;\n      items?: { enum?: unknown[]; oneOf?: unknown[] };\n    };\n    return (\n      schema?.type === \"array\" &&\n      (Array.isArray(schema.items?.enum) || Array.isArray(schema.items?.oneOf))\n    );\n  };\n\n  // helper for multiline detection\n  const isMultilineString = (uischema: unknown, schema: unknown) => {\n    const controlUischema = uischema as { options?: { multi?: boolean } };\n    return and(isStringControl, () => controlUischema?.options?.multi === true)(\n      uischema as Parameters<typeof isStringControl>[0],\n      schema as Parameters<typeof isStringControl>[1],\n      {} as Parameters<typeof isStringControl>[2],\n    );\n  };\n\n  // Projection-aware schema check: when options.projection is set,\n  // resolve the projected schema and test against it instead of the original\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const projectedSchemaMatches = (check: (schema: any) => boolean) =>\n    (uischema: unknown, schema: unknown): boolean => {\n      const ui = uischema as { type?: string; scope?: string; options?: { projection?: string } };\n      const projection = ui?.options?.projection;\n      if (!projection || ui?.type !== \"Control\" || !ui?.scope) return false;\n\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const propertySchema = resolveScopeSchema(ui.scope, schema as Record<string, any>);\n      if (!propertySchema) return false;\n\n      return check(getProjectedSchema(propertySchema, projection));\n    };\n\n  const isMultilineProjection = (uischema: unknown, schema: unknown) => {\n    const ui = uischema as { options?: { multi?: boolean } };\n    return ui?.options?.multi === true &&\n      projectedSchemaMatches((s) => s?.type === \"string\")(uischema, schema);\n  };\n\n  const renderers = [\n    // Multiline text has higher priority than regular text\n    { tester: rankWith(PRIME + 4, or(isMultilineString, isMultilineProjection)), renderer: JfTextArea },\n    { tester: rankWith(PRIME + 3, or(isStringControl, projectedSchemaMatches((s) => s?.type === \"string\"))), renderer: JfText },\n    {\n      tester: rankWith(PRIME + 6, or(isIntegerControl, projectedSchemaMatches((s) => s?.type === \"integer\"))),\n      renderer: JfNumber,\n    },\n    {\n      tester: rankWith(PRIME + 4, or(isNumberControl, projectedSchemaMatches((s) => s?.type === \"number\"))),\n      renderer: JfNumber,\n    },\n    {\n      tester: rankWith(PRIME + 7, or(and(isControl, schemaMatches(isScalarEnum)), and(isControl, projectedSchemaMatches(isScalarEnum)))),\n      renderer: JfEnum,\n    },\n    {\n      tester: rankWith(PRIME + 8, or(and(isControl, schemaMatches(isEnumArray)), and(isControl, projectedSchemaMatches(isEnumArray)))),\n      renderer: JfEnumArray,\n    },\n    { tester: rankWith(PRIME + 3, or(isBooleanControl, projectedSchemaMatches((s) => s?.type === \"boolean\"))), renderer: JfBoolean },\n  ];\n\n  // Update the exported array\n  primevueRenderers.splice(0, primevueRenderers.length, ...renderers);\n\n  // Mark as initialized to prevent duplicate registrations\n  renderersInitialized = true;\n\n  return renderers;\n}\n\nexport { JfText, JfTextArea, JfNumber, JfEnum, JfEnumArray, JfBoolean };\n"],"names":["JfTextArea","JfText","JfNumber","JfEnum","JfEnumArray","JfBoolean"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/vue/primevue/index.ts"],"sourcesContent":["import JfText from \"./JfText.vue\";\nimport JfTextArea from \"./JfTextArea.vue\";\nimport JfNumber from \"./JfNumber.vue\";\nimport JfEnum from \"./JfEnum.vue\";\nimport JfEnumArray from \"./JfEnumArray.vue\";\nimport JfBoolean from \"./JfBoolean.vue\";\nimport { getProjectedSchema } from \"../../core/projection\";\nimport { resolveScopeSchema } from \"../../core/resolveScope\";\n\n// Auto-inject layout styles\nconst injectLayoutStyles = () => {\n  if (typeof window !== \"undefined\" && typeof document !== \"undefined\") {\n    if (!document.getElementById(\"jsonforms-primevue-styles\")) {\n      const style = document.createElement(\"style\");\n      style.id = \"jsonforms-primevue-styles\";\n      style.textContent = `\n/* JSONForms PrimeVue Provider Protocols Layout Styles */\n.vertical-layout {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 24px;\n  width: 100%;\n}\n\n.vertical-layout-item {\n  width: 100%;\n}\n\n/* Form control wrapper */\n.jf-control {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n/* Form control label typography */\n.jf-label {\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 14px;\n  color: #031553;\n  text-align: left;\n}\n\n/* Form control description typography */\n.jf-description {\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 14px;\n  color: #415290;\n  text-align: left;\n}\n      `;\n      document.head.appendChild(style);\n    }\n  }\n};\n\n// Inject styles when this module is imported\ninjectLayoutStyles();\n\n// Track whether renderers have been registered to avoid duplicate registrations\nlet renderersInitialized = false;\n\n// Return empty renderers array initially\nexport const primevueRenderers: unknown[] = [];\n\n// Export a function that can be called by the consumer to register renderers\n// This should only be called once during application initialization\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function registerPrimevueRenderers(jsonformsCore: any): unknown[] {\n  // Prevent duplicate registration which causes AJV schema recompilation\n  if (renderersInitialized) {\n    return primevueRenderers as unknown[];\n  }\n\n  const {\n    rankWith,\n    isStringControl,\n    isNumberControl,\n    isIntegerControl,\n    and,\n    or,\n    isControl,\n    schemaMatches,\n    isBooleanControl,\n  } = jsonformsCore;\n\n  // Give PrimeVue renderers a high base rank; vanilla commonly uses small ranks (2–5)\n  const PRIME = 100;\n\n  // helpers for enum detection - using simple schema checks instead of JSONForms internal functions\n  const isScalarEnum = (s?: object) => {\n    const schema = s as {\n      type?: string;\n      enum?: unknown[];\n      oneOf?: unknown[];\n    };\n    return (\n      schema &&\n      schema.type !== \"array\" &&\n      (Array.isArray(schema.enum) || Array.isArray(schema.oneOf))\n    );\n  };\n\n  const isEnumArray = (s?: object) => {\n    const schema = s as {\n      type?: string;\n      items?: { enum?: unknown[]; oneOf?: unknown[] };\n    };\n    return (\n      schema?.type === \"array\" &&\n      (Array.isArray(schema.items?.enum) || Array.isArray(schema.items?.oneOf))\n    );\n  };\n\n  // helper for multiline detection\n  const isMultilineString = (uischema: unknown, schema: unknown) => {\n    const controlUischema = uischema as { options?: { multi?: boolean } };\n    return and(isStringControl, () => controlUischema?.options?.multi === true)(\n      uischema as Parameters<typeof isStringControl>[0],\n      schema as Parameters<typeof isStringControl>[1],\n      {} as Parameters<typeof isStringControl>[2],\n    );\n  };\n\n  // Projection-aware schema check: when options.projection is set,\n  // resolve the projected schema and test against it instead of the original\n\n  const projectedSchemaMatches =\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (check: (schema: any) => boolean) =>\n      (uischema: unknown, schema: unknown): boolean => {\n        const ui = uischema as {\n          type?: string;\n          scope?: string;\n          options?: { projection?: string };\n        };\n        const projection = ui?.options?.projection;\n        if (!projection || ui?.type !== \"Control\" || !ui?.scope) return false;\n\n        const propertySchema = resolveScopeSchema(\n          ui.scope,\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          schema as Record<string, any>,\n        );\n        if (!propertySchema) return false;\n\n        return check(getProjectedSchema(propertySchema, projection));\n      };\n\n  const isMultilineProjection = (uischema: unknown, schema: unknown) => {\n    const ui = uischema as { options?: { multi?: boolean } };\n    return (\n      ui?.options?.multi === true &&\n      projectedSchemaMatches((s) => s?.type === \"string\")(uischema, schema)\n    );\n  };\n\n  const renderers = [\n    // Multiline text has higher priority than regular text\n    {\n      tester: rankWith(PRIME + 4, or(isMultilineString, isMultilineProjection)),\n      renderer: JfTextArea,\n    },\n    {\n      tester: rankWith(\n        PRIME + 3,\n        or(\n          isStringControl,\n          projectedSchemaMatches((s) => s?.type === \"string\"),\n        ),\n      ),\n      renderer: JfText,\n    },\n    {\n      tester: rankWith(\n        PRIME + 6,\n        or(\n          isIntegerControl,\n          projectedSchemaMatches((s) => s?.type === \"integer\"),\n        ),\n      ),\n      renderer: JfNumber,\n    },\n    {\n      tester: rankWith(\n        PRIME + 4,\n        or(\n          isNumberControl,\n          projectedSchemaMatches((s) => s?.type === \"number\"),\n        ),\n      ),\n      renderer: JfNumber,\n    },\n    {\n      tester: rankWith(\n        PRIME + 7,\n        or(\n          and(isControl, schemaMatches(isScalarEnum)),\n          and(isControl, projectedSchemaMatches(isScalarEnum)),\n        ),\n      ),\n      renderer: JfEnum,\n    },\n    {\n      tester: rankWith(\n        PRIME + 8,\n        or(\n          and(isControl, schemaMatches(isEnumArray)),\n          and(isControl, projectedSchemaMatches(isEnumArray)),\n        ),\n      ),\n      renderer: JfEnumArray,\n    },\n    {\n      tester: rankWith(\n        PRIME + 3,\n        or(\n          isBooleanControl,\n          projectedSchemaMatches((s) => s?.type === \"boolean\"),\n        ),\n      ),\n      renderer: JfBoolean,\n    },\n  ];\n\n  // Update the exported array\n  primevueRenderers.splice(0, primevueRenderers.length, ...renderers);\n\n  // Mark as initialized to prevent duplicate registrations\n  renderersInitialized = true;\n\n  return renderers;\n}\n\nexport { JfText, JfTextArea, JfNumber, JfEnum, JfEnumArray, JfBoolean };\n"],"names":["JfTextArea","JfText","JfNumber","JfEnum","JfEnumArray","JfBoolean"],"mappings":"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"}

package/dist/vue/utils/autoSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"autoSelect.js","sources":["../../../src/vue/utils/autoSelect.ts"],"sourcesContent":["import type { ProviderItem } from \"../../core/types\";\n\nexport interface AutoSelectParams {\n  autoSelectSingle: boolean;\n  isLoading: boolean;\n  items: ProviderItem[];\n  currentValue: unknown;\n}\n\n/**\n * Determines if auto-select should trigger for single-select dropdowns.\n * Returns null if auto-select should not trigger.\n *\n * Auto-select triggers when:\n * - autoSelectSingle option is enabled (default: true for single-select)\n * - Provider has finished loading\n * - Exactly one item is available\n * - Current value is empty (undefined/null) OR not in the current options\n */\nexport function shouldAutoSelect(params: AutoSelectParams): unknown | null {\n  const { autoSelectSingle, isLoading, items, currentValue } = params;\n\n  if (!autoSelectSingle || isLoading || items.length !== 1) {\n    return null;\n  }\n\n  const singleItem = items[0];\n  if (!singleItem) {\n    return null;\n  }\n\n  const isValueEmpty = currentValue === undefined || currentValue === null;\n  const isValueInOptions = items.some((item) => item.value === currentValue);\n\n  if (isValueEmpty || !isValueInOptions) {\n    return singleItem.value;\n  }\n\n  return null;\n}\n\nexport interface AutoSelectMultiParams {\n  autoSelectSingle: boolean;\n  isLoading: boolean;\n  items: ProviderItem[];\n  currentValue: unknown[];\n}\n\n/**\n * Determines if auto-select should trigger for multiselect dropdowns.\n * Returns null if auto-select should not trigger, otherwise returns an array with the single value.\n *\n * Auto-select triggers when:\n * - autoSelectSingle option is explicitly enabled (default: false for multiselect)\n * - Provider has finished loading\n * - Exactly one item is available\n * - Current value is empty array OR current selection is not in the current options\n */\nexport function shouldAutoSelectMulti(\n  params: AutoSelectMultiParams\n): unknown[] | null {\n  const { autoSelectSingle, isLoading, items, currentValue } = params;\n\n  if (!autoSelectSingle || isLoading || items.length !== 1) {\n    return null;\n  }\n\n  const singleItem = items[0];\n  if (!singleItem) {\n    return null;\n  }\n\n  const currentArray = Array.isArray(currentValue) ? currentValue : [];\n  const isValueEmpty = currentArray.length === 0;\n  const hasValidSelection = currentArray.some((val) =>\n    items.some((item) => item.value === val)\n  );\n\n  if (isValueEmpty || !hasValidSelection) {\n    return [singleItem.value];\n  }\n\n  return null;\n}\n"],"names":[],"mappings":"AAmBO,SAAS,iBAAiB,QAA0C;AACzE,QAAM,EAAE,kBAAkB,WAAW,OAAO,iBAAiB;AAE7D,MAAI,CAAC,oBAAoB,aAAa,MAAM,WAAW,GAAG;AACxD,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,MAAM,CAAC;AAC1B,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,iBAAiB,UAAa,iBAAiB;AACpE,QAAM,mBAAmB,MAAM,KAAK,CAAC,SAAS,KAAK,UAAU,YAAY;AAEzE,MAAI,gBAAgB,CAAC,kBAAkB;AACrC,WAAO,WAAW;AAAA,EACpB;AAEA,SAAO;AACT;AAmBO,SAAS,sBACd,QACkB;AAClB,QAAM,EAAE,kBAAkB,WAAW,OAAO,iBAAiB;AAE7D,MAAI,CAAC,oBAAoB,aAAa,MAAM,WAAW,GAAG;AACxD,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,MAAM,CAAC;AAC1B,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,MAAM,QAAQ,YAAY,IAAI,eAAe,CAAA;AAClE,QAAM,eAAe,aAAa,WAAW;AAC7C,QAAM,oBAAoB,aAAa;AAAA,IAAK,CAAC,QAC3C,MAAM,KAAK,CAAC,SAAS,KAAK,UAAU,GAAG;AAAA,EAAA;AAGzC,MAAI,gBAAgB,CAAC,mBAAmB;AACtC,WAAO,CAAC,WAAW,KAAK;AAAA,EAC1B;AAEA,SAAO;AACT;"}
+{"version":3,"file":"autoSelect.js","sources":["../../../src/vue/utils/autoSelect.ts"],"sourcesContent":["import type { ProviderItem } from \"../../core/types\";\n\nexport interface AutoSelectParams {\n  autoSelectSingle: boolean;\n  isLoading: boolean;\n  items: ProviderItem[];\n  currentValue: unknown;\n}\n\n/**\n * Determines if auto-select should trigger for single-select dropdowns.\n * Returns null if auto-select should not trigger.\n *\n * Auto-select triggers when:\n * - autoSelectSingle option is enabled (default: true for single-select)\n * - Provider has finished loading\n * - Exactly one item is available\n * - Current value is empty (undefined/null) OR not in the current options\n */\nexport function shouldAutoSelect(params: AutoSelectParams): unknown | null {\n  const { autoSelectSingle, isLoading, items, currentValue } = params;\n\n  if (!autoSelectSingle || isLoading || items.length !== 1) {\n    return null;\n  }\n\n  const singleItem = items[0];\n  if (!singleItem) {\n    return null;\n  }\n\n  const isValueEmpty = currentValue === undefined || currentValue === null;\n  const isValueInOptions = items.some((item) => item.value === currentValue);\n\n  if (isValueEmpty || !isValueInOptions) {\n    return singleItem.value;\n  }\n\n  return null;\n}\n\nexport interface AutoSelectMultiParams {\n  autoSelectSingle: boolean;\n  isLoading: boolean;\n  items: ProviderItem[];\n  currentValue: unknown[];\n}\n\n/**\n * Determines if auto-select should trigger for multiselect dropdowns.\n * Returns null if auto-select should not trigger, otherwise returns an array with the single value.\n *\n * Auto-select triggers when:\n * - autoSelectSingle option is explicitly enabled (default: false for multiselect)\n * - Provider has finished loading\n * - Exactly one item is available\n * - Current value is empty array OR current selection is not in the current options\n */\nexport function shouldAutoSelectMulti(\n  params: AutoSelectMultiParams,\n): unknown[] | null {\n  const { autoSelectSingle, isLoading, items, currentValue } = params;\n\n  if (!autoSelectSingle || isLoading || items.length !== 1) {\n    return null;\n  }\n\n  const singleItem = items[0];\n  if (!singleItem) {\n    return null;\n  }\n\n  const currentArray = Array.isArray(currentValue) ? currentValue : [];\n  const isValueEmpty = currentArray.length === 0;\n  const hasValidSelection = currentArray.some((val) =>\n    items.some((item) => item.value === val),\n  );\n\n  if (isValueEmpty || !hasValidSelection) {\n    return [singleItem.value];\n  }\n\n  return null;\n}\n"],"names":[],"mappings":"AAmBO,SAAS,iBAAiB,QAA0C;AACzE,QAAM,EAAE,kBAAkB,WAAW,OAAO,iBAAiB;AAE7D,MAAI,CAAC,oBAAoB,aAAa,MAAM,WAAW,GAAG;AACxD,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,MAAM,CAAC;AAC1B,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,iBAAiB,UAAa,iBAAiB;AACpE,QAAM,mBAAmB,MAAM,KAAK,CAAC,SAAS,KAAK,UAAU,YAAY;AAEzE,MAAI,gBAAgB,CAAC,kBAAkB;AACrC,WAAO,WAAW;AAAA,EACpB;AAEA,SAAO;AACT;AAmBO,SAAS,sBACd,QACkB;AAClB,QAAM,EAAE,kBAAkB,WAAW,OAAO,iBAAiB;AAE7D,MAAI,CAAC,oBAAoB,aAAa,MAAM,WAAW,GAAG;AACxD,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,MAAM,CAAC;AAC1B,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,MAAM,QAAQ,YAAY,IAAI,eAAe,CAAA;AAClE,QAAM,eAAe,aAAa,WAAW;AAC7C,QAAM,oBAAoB,aAAa;AAAA,IAAK,CAAC,QAC3C,MAAM,KAAK,CAAC,SAAS,KAAK,UAAU,GAAG;AAAA,EAAA;AAGzC,MAAI,gBAAgB,CAAC,mBAAmB;AACtC,WAAO,CAAC,WAAW,KAAK;AAAA,EAC1B;AAEA,SAAO;AACT;"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@narrative.io/jsonforms-provider-protocols",
-	"version": "3.0.0-beta.3",
+	"version": "3.0.0-beta.4",
 	"description": "Dynamic data provider capabilities for JSONForms with Vue 3 integration",
 	"type": "module",
 	"author": "Narrative I/O",

package/src/core/projection.ts

@@ -26,10 +26,7 @@ export function parseProjectionPath(path: string): ProjectionSegment[] {
  * Read a value from `data` by following the projection path.
  * Returns `undefined` if any segment along the path is missing.
  */
-export function getProjectedValue(
-  data: unknown,
-  path: string,
-): unknown {
+export function getProjectedValue(data: unknown, path: string): unknown {
   const segments = parseProjectionPath(path);
   let current: unknown = data;
 
@@ -85,7 +82,10 @@ function setAtPath(
   } else {
     // Object key — ensure we have an object
     const obj: Record<string, unknown> =
-      current !== null && current !== undefined && typeof current === "object" && !Array.isArray(current)
+      current !== null &&
+      current !== undefined &&
+      typeof current === "object" &&
+      !Array.isArray(current)
         ? { ...(current as Record<string, unknown>) }
         : {};
     obj[seg] = setAtPath(obj[seg], segments, index + 1, value);

package/src/core/transforms.ts

@@ -14,7 +14,16 @@ export interface FlattenTransform extends Transform {
   labelFormat?: string; // Optional format string like "{parent.name} → {name}"
 }
 
-export type FilterOperator = "eq" | "neq" | "empty" | "notEmpty" | "gt" | "gte" | "lt" | "lte" | "contains";
+export type FilterOperator =
+  | "eq"
+  | "neq"
+  | "empty"
+  | "notEmpty"
+  | "gt"
+  | "gte"
+  | "lt"
+  | "lte"
+  | "contains";
 
 export interface FilterCondition {
   key: string;
@@ -153,13 +162,29 @@ function evaluateCondition(
     case "notEmpty":
       return !isEmpty(value);
     case "gt":
-      return typeof value === "number" && condition.values !== undefined && value > (condition.values[0] as number);
+      return (
+        typeof value === "number" &&
+        condition.values !== undefined &&
+        value > (condition.values[0] as number)
+      );
     case "gte":
-      return typeof value === "number" && condition.values !== undefined && value >= (condition.values[0] as number);
+      return (
+        typeof value === "number" &&
+        condition.values !== undefined &&
+        value >= (condition.values[0] as number)
+      );
     case "lt":
-      return typeof value === "number" && condition.values !== undefined && value < (condition.values[0] as number);
+      return (
+        typeof value === "number" &&
+        condition.values !== undefined &&
+        value < (condition.values[0] as number)
+      );
     case "lte":
-      return typeof value === "number" && condition.values !== undefined && value <= (condition.values[0] as number);
+      return (
+        typeof value === "number" &&
+        condition.values !== undefined &&
+        value <= (condition.values[0] as number)
+      );
     case "contains":
       if (typeof value === "string" && condition.values) {
         return condition.values.some((v) => value.includes(String(v)));
@@ -208,7 +233,9 @@ function filterTransform(items: unknown[], config: Transform): unknown[] {
   return items.filter((item) => {
     if (typeof item !== "object" || item === null) return false;
     const itemObj = item as Record<string, unknown>;
-    return conditions.every((condition) => evaluateCondition(itemObj, condition));
+    return conditions.every((condition) =>
+      evaluateCondition(itemObj, condition),
+    );
   });
 }
 

package/src/vue/components/ProviderAutocomplete.vue

@@ -12,7 +12,10 @@ const props = defineProps<{
   path: string;
 }>();
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange } = useProjection(control, rawHandleChange);
+const { projectedData, handleProjectedChange: handleChange } = useProjection(
+  control,
+  rawHandleChange,
+);
 
 const binding = computed(() => {
   const provider = control.value.uischema?.options?.provider;
@@ -53,16 +56,16 @@ const onSelect = (event: { value?: { value?: unknown } | unknown }) => {
 </script>
 
 <template>
-  <div class="flex flex-column gap-1">
-    <label v-if="control.schema.title" class="text-color text-left">{{
+  <div class="jf-control">
+    <label v-if="control.schema.title" class="jf-label">{{
       control.schema.title
     }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <AutoComplete
       v-model="value"
-      class="w-full"
+      class="w-full!"
       :suggestions="items"
       option-label="label"
       :placeholder="placeholder"

package/src/vue/components/ProviderMultiSelect.vue

@@ -13,7 +13,10 @@ const props = defineProps<{
   path: string;
 }>();
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange } = useProjection(control, rawHandleChange);
+const { projectedData, handleProjectedChange: handleChange } = useProjection(
+  control,
+  rawHandleChange,
+);
 
 const binding = computed(() => {
   const provider = control.value.uischema?.options?.provider;
@@ -55,14 +58,16 @@ watch(
         control.value.uischema?.options?.autoSelectSingle === true,
       isLoading,
       items: newItems,
-      currentValue: Array.isArray(projectedData.value) ? projectedData.value : [],
+      currentValue: Array.isArray(projectedData.value)
+        ? projectedData.value
+        : [],
     });
 
     if (valueToSelect !== null) {
       handleChange(control.value.path, valueToSelect);
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 // order-insensitive shallow equality for primitive arrays
@@ -98,16 +103,16 @@ const placeholder = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-column gap-2">
-    <label v-if="control.schema.title" class="text-color text-left">{{
+  <div class="jf-control">
+    <label v-if="control.schema.title" class="jf-label">{{
       control.schema.title
     }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <MultiSelect
       v-model="value"
-      class="w-full"
+      class="w-full!"
       :options="items"
       option-label="label"
       option-value="value"

package/src/vue/components/ProviderSelect.vue

@@ -13,7 +13,10 @@ const props = defineProps<{
   path: string;
 }>();
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange } = useProjection(control, rawHandleChange);
+const { projectedData, handleProjectedChange: handleChange } = useProjection(
+  control,
+  rawHandleChange,
+);
 
 const binding = computed(() => {
   const provider = control.value.uischema?.options?.provider;
@@ -62,7 +65,7 @@ watch(
       handleChange(control.value.path, valueToSelect);
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const value = computed({
@@ -81,16 +84,16 @@ const placeholder = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-column gap-2">
-    <label v-if="control.schema.title" class="text-color text-left">{{
+  <div class="jf-control">
+    <label v-if="control.schema.title" class="jf-label">{{
       control.schema.title
     }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <Dropdown
       v-model="value"
-      class="w-full"
+      class="w-full!"
       :options="items"
       option-label="label"
       option-value="value"

package/src/vue/composables/useDerive.ts

@@ -1,4 +1,11 @@
-import { computed, watch, unref, inject, type Ref, type ComputedRef } from "vue";
+import {
+  computed,
+  watch,
+  unref,
+  inject,
+  type Ref,
+  type ComputedRef,
+} from "vue";
 import { type ControlElement } from "@jsonforms/core";
 import { useDataLayer } from "./useDataLayer";
 
@@ -14,7 +21,11 @@ interface DeriveOptions {
   data?: Ref<unknown> | ComputedRef<unknown>;
 }
 
-export function useDerive({ control, handleChange, data: dataOverride }: DeriveOptions) {
+export function useDerive({
+  control,
+  handleChange,
+  data: dataOverride,
+}: DeriveOptions) {
   // Get the root form data from JSONForms context
   const injectedFormData = inject<{ value: unknown }>("formData", {
     value: {},
@@ -50,7 +61,9 @@ export function useDerive({ control, handleChange, data: dataOverride }: DeriveO
           data,
           extData,
         );
-        const compareData = dataOverride ? unref(dataOverride) : control.value.data;
+        const compareData = dataOverride
+          ? unref(dataOverride)
+          : control.value.data;
         if (derivedValue !== compareData) {
           handleChange(control.value.path, derivedValue);
         }

package/src/vue/composables/useProjection.ts

@@ -27,15 +27,9 @@ interface ErrorLike {
  * Resolve the display label for a control.
  * Priority: uischema options.label → schemaTitle (projected sub-schema) → control.label.
  */
-function resolveLabel(
-  ctrl: ProjectionControl,
-  schemaTitle?: string,
-): string {
+function resolveLabel(ctrl: ProjectionControl, schemaTitle?: string): string {
   return (
-    (ctrl.uischema?.options?.label as string) ??
-    schemaTitle ??
-    ctrl.label ??
-    ""
+    (ctrl.uischema?.options?.label as string) ?? schemaTitle ?? ctrl.label ?? ""
   );
 }
 
@@ -69,7 +63,9 @@ function prefixErrors(label: string, errors: string): string {
 function getErrorPath(error: ErrorLike): string {
   let p = (error.instancePath || "").replace(/\//g, ".").replace(/^\./, "");
   if (error.keyword === "required" && error.params?.missingProperty) {
-    p = p ? p + "." + error.params.missingProperty : error.params.missingProperty;
+    p = p
+      ? p + "." + error.params.missingProperty
+      : error.params.missingProperty;
   }
   return p;
 }
@@ -160,9 +156,7 @@ export function useProjection(
       errStr = baseErrors;
     } else {
       const projMsg = matching
-        .map((e) =>
-          e.keyword === "required" ? "is required" : e.message,
-        )
+        .map((e) => (e.keyword === "required" ? "is required" : e.message))
         .filter(Boolean)
         .join("\n");
       errStr = [baseErrors, projMsg].filter(Boolean).join("\n");

package/src/vue/index.ts

@@ -22,8 +22,11 @@ const isIntegerScope = (uischema: unknown, schema: unknown) => {
   const ui = uischema as { type?: string; scope?: string };
   if (ui?.type !== "Control" || !ui?.scope) return false;
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const propertySchema = resolveScopeSchema(ui.scope, schema as Record<string, any>);
+  const propertySchema = resolveScopeSchema(
+    ui.scope,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    schema as Record<string, any>,
+  );
   return propertySchema?.type === "integer";
 };
 
@@ -53,8 +56,11 @@ const isArrayControl = (uischema: UISchemaElement, schema: unknown) => {
     return false;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const propertySchema = resolveScopeSchema(controlSchema.scope, schema as Record<string, any>);
+  const propertySchema = resolveScopeSchema(
+    controlSchema.scope,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    schema as Record<string, any>,
+  );
   return propertySchema?.type === "array";
 };
 

package/src/vue/primevue/JfBoolean.vue

@@ -49,7 +49,12 @@ import Checkbox from "primevue/checkbox";
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange, projectedErrors, projectedLabel } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 // Track user interaction — errors only show after first toggle
 const { showErrors, markDirty } = useDirtyValidation(control, projectedErrors);
@@ -61,7 +66,7 @@ const onToggle = (val: boolean) => {
 </script>
 
 <template>
-  <div class="flex items-center gap-2">
+  <div class="jf-control" style="flex-direction: row; align-items: center">
     <Checkbox
       :binary="true"
       :model-value="!!projectedData"
@@ -70,7 +75,7 @@ const onToggle = (val: boolean) => {
       :aria-invalid="showErrors || undefined"
       @update:model-value="onToggle"
     />
-    <label v-if="projectedLabel">{{ projectedLabel }}</label>
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
     <small v-if="showErrors" class="p-error">{{ projectedErrors }}</small>
   </div>
 </template>

package/src/vue/primevue/JfEnum.vue

@@ -54,7 +54,12 @@ import Dropdown from "primevue/dropdown";
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange, projectedErrors, projectedLabel } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 type Opt = { label: string; value: unknown };
 const toOptions = (schema?: JsonSchema): Opt[] => {
@@ -158,7 +163,7 @@ watch(
       handleChange(control.value.path, valueToSelect);
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 // Track user interaction — errors only show after blur
@@ -170,15 +175,13 @@ const onSelect = (val: unknown) => {
 </script>
 
 <template>
-  <div class="flex flex-column gap-2">
-    <label v-if="projectedLabel" class="text-color text-left">{{
-      projectedLabel
-    }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+  <div class="jf-control">
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <Dropdown
-      :class="['w-full', { 'p-invalid': showErrors }]"
+      :class="['w-full!', { 'p-invalid': showErrors }]"
       :options="options"
       option-label="label"
       option-value="value"