- ${label}: unsupported schema node. Use Raw.
+ return html`
+
${label}
+
Unsupported schema node. Use Raw mode.
`;
}
+ // Handle anyOf/oneOf unions
if (schema.anyOf || schema.oneOf) {
const variants = schema.anyOf ?? schema.oneOf ?? [];
const nonNull = variants.filter(
- (v) =>
- !(
- v.type === "null" ||
- (Array.isArray(v.type) && v.type.includes("null"))
- ),
+ (v) => !(v.type === "null" || (Array.isArray(v.type) && v.type.includes("null")))
);
if (nonNull.length === 1) {
return renderNode({ ...params, schema: nonNull[0] });
}
+ // Check if it's a set of literal values (enum-like)
const extractLiteral = (v: JsonSchema): unknown | undefined => {
if (v.const !== undefined) return v.const;
if (v.enum && v.enum.length === 1) return v.enum[0];
@@ -73,137 +84,314 @@ export function renderNode(params: {
const literals = nonNull.map(extractLiteral);
const allLiterals = literals.every((v) => v !== undefined);
- if (allLiterals && literals.length > 0) {
+ if (allLiterals && literals.length > 0 && literals.length <= 5) {
+ // Use segmented control for small sets
const resolvedValue = value ?? schema.default;
- const currentIndex = literals.findIndex(
- (lit) =>
- lit === resolvedValue || String(lit) === String(resolvedValue),
- );
return html`
-
+
+ ${showLabel ? html`
` : nothing}
+ ${help ? html`
${help}
` : nothing}
+
+ ${literals.map((lit, idx) => html`
+
+ `)}
+
+
`;
}
+ if (allLiterals && literals.length > 5) {
+ // Use dropdown for larger sets
+ return renderSelect({ ...params, options: literals.map(String), value: String(value ?? schema.default ?? "") });
+ }
+
+ // Handle mixed primitive types
const primitiveTypes = new Set(
- nonNull
- .map((variant) => schemaType(variant))
- .filter((variant): variant is string => Boolean(variant)),
+ nonNull.map((variant) => schemaType(variant)).filter(Boolean)
);
const normalizedTypes = new Set(
- [...primitiveTypes].map((variant) => (variant === "integer" ? "number" : variant)),
- );
- const primitiveOnly = [...normalizedTypes].every((variant) =>
- ["string", "number", "boolean"].includes(variant),
+ [...primitiveTypes].map((v) => (v === "integer" ? "number" : v))
);
- if (primitiveOnly && normalizedTypes.size > 0) {
+ if ([...normalizedTypes].every((v) => ["string", "number", "boolean"].includes(v as string))) {
const hasString = normalizedTypes.has("string");
const hasNumber = normalizedTypes.has("number");
- const hasBoolean = normalizedTypes.has("boolean");
-
- if (hasBoolean && normalizedTypes.size === 1) {
- return renderNode({
- ...params,
- schema: { ...schema, type: "boolean", anyOf: undefined, oneOf: undefined },
- });
- }
-
+
if (hasString || hasNumber) {
- const displayValue = value ?? schema.default ?? "";
- return html`
-
- `;
+ return renderTextInput({
+ ...params,
+ inputType: hasNumber && !hasString ? "number" : "text",
+ });
}
}
}
+ // Enum - use segmented for small, dropdown for large
if (schema.enum) {
const options = schema.enum;
- const resolvedValue = value ?? schema.default;
- const currentIndex = options.findIndex(
- (opt) =>
- opt === resolvedValue || String(opt) === String(resolvedValue),
- );
- const unset = "__unset__";
+ if (options.length <= 5) {
+ const resolvedValue = value ?? schema.default;
+ return html`
+
+ ${showLabel ? html`
` : nothing}
+ ${help ? html`
${help}
` : nothing}
+
+ ${options.map((opt) => html`
+
+ `)}
+
+
+ `;
+ }
+ return renderSelect({ ...params, options: options.map(String), value: String(value ?? schema.default ?? "") });
+ }
+
+ // Object type - collapsible section
+ if (type === "object") {
+ return renderObject(params);
+ }
+
+ // Array type
+ if (type === "array") {
+ return renderArray(params);
+ }
+
+ // Boolean - toggle row
+ if (type === "boolean") {
+ const displayValue = typeof value === "boolean" ? value : typeof schema.default === "boolean" ? schema.default : false;
return html`
-