@structured-field/widget-editor 1.1.1 → 1.2.1

package/README.md

@@ -197,6 +197,290 @@ Query parameters sent: `_q` (search term), `page` (pagination).
 | `oneOf + discriminator` | UnionEditor | Type selector |
 | `relation` | RelationEditor | Autocomplete with search |
 
+## Custom Editors
+
+You can override the editor used for any field by passing a `customEditors` array to `SchemaForm`. Each entry defines a `match` condition and the `component` to render when that condition is true. Overrides are evaluated **before** the built-in resolution logic, in order — the first match wins.
+
+### Vue component
+
+```vue
+<template>
+  <SchemaForm :schema="schema" :custom-editors="customEditors" />
+</template>
+
+<script setup>
+import { SchemaForm } from '@structured-field/widget-editor';
+import MyDatePicker from './MyDatePicker.vue';
+import MyColorPicker from './MyColorPicker.vue';
+
+const customEditors = [
+  // Match by schema format
+  { match: (schema) => schema.format === 'date', component: MyDatePicker },
+  // Match by field name (last segment of the path)
+  { match: (schema, path) => path.at(-1) === 'color', component: MyColorPicker },
+  // Match by a custom schema property
+  { match: (schema) => schema['x-widget'] === 'rich-text', component: MyRichText },
+];
+</script>
+```
+
+### Web Component (custom element)
+
+```js
+const el = document.querySelector('schema-form');
+
+el.customEditors = [
+  // Vue component — pass the component object
+  { match: (schema) => schema.format === 'date', component: MyDatePicker },
+  // Web Component — pass the tag name as a string
+  { match: (schema, path) => path.at(-1) === 'color', component: 'my-color-picker' },
+];
+```
+
+When `component` is a **string containing a hyphen**, it is treated as a web component tag name. The editor wrapper will:
+
+- Set `schema`, `modelValue`, `path`, and `form` as **JS properties** on the element (not HTML attributes)
+- Listen for `change` or `update:model-value` `CustomEvent`s to receive the new value
+
+### Custom editor API
+
+#### Vue component
+
+A custom editor Vue component must accept the following props and emit `update:modelValue` to write values back. **Never mutate `modelValue` directly.**
+
+| Prop | Type | Description |
+|---|---|---|
+| `schema` | `Object` | The resolved JSON Schema for this field |
+| `modelValue` | `any` | Current field value — read-only |
+| `path` | `string[]` | Path segments from the root (`['address', 'city']`) |
+| `form` | `Object` | Form API: `getSchemaAtPath(path)`, `getErrorsForPath(path)`, `resolveSchema(schema)` |
+
+| Emit | Payload | Description |
+|---|---|---|
+| `update:modelValue` | new value | The only way to write a value back to the form |
+
+#### Web Component
+
+A custom editor web component receives the same data as **JS properties** and dispatches a `change` `CustomEvent` with the new value as `detail`:
+
+| Property | Type | Description |
+|---|---|---|
+| `schema` | `Object` | The resolved JSON Schema for this field |
+| `modelValue` | `any` | Current field value — read-only |
+| `path` | `string[]` | Path segments from the root |
+| `form` | `Object` | Form API: `getSchemaAtPath(path)`, `getErrorsForPath(path)`, `resolveSchema(schema)` |
+
+| Event | Detail | Description |
+|---|---|---|
+| `change` | new value | Dispatched to write a value back to the form |
+
+### Starter templates
+
+#### Vue component
+
+Copy and adapt this component as a starting point:
+
+```vue
+<template>
+  <div class="sf-field" :class="{ errors: fieldErrors.length }">
+    <label class="sf-label" :class="{ required: isRequired }">{{ title }}</label>
+
+    <!-- Replace this with your custom input -->
+    <input
+      type="text"
+      class="sf-input"
+      :value="modelValue"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+
+    <ul v-if="fieldErrors.length" class="errorlist">
+      <li v-for="(err, i) in fieldErrors" :key="i">{{ err }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MyCustomEditor',
+  props: {
+    schema:     { type: Object, required: true },
+    modelValue: { default: undefined },
+    path:       { type: Array,  default: () => [] },
+    form:       { type: Object, default: null },
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    title() {
+      return this.schema.title || this.humanize(this.path.at(-1)) || '';
+    },
+    isRequired() {
+      if (this.path.length < 2 || !this.form) return false;
+      const parentSchema = this.form.getSchemaAtPath(this.path.slice(0, -1));
+      return Array.isArray(parentSchema?.required) && parentSchema.required.includes(this.path.at(-1));
+    },
+    fieldErrors() {
+      return this.form?.getErrorsForPath?.(this.path) ?? [];
+    },
+  },
+  methods: {
+    humanize(str) {
+      if (!str) return '';
+      return str.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, s => s.toUpperCase());
+    },
+  },
+};
+</script>
+```
+
+#### Web Component (using `BaseEditorElement`)
+
+The `BaseEditorElement` base class handles the property contract for you. Override `render()` to build the initial DOM and `update()` to react to property changes. Use `this.emitChange(value)` to send values back and `this.getErrors()` to read validation errors.
+
+**ESM:**
+
+```js
+import { BaseEditorElement } from '@structured-field/widget-editor';
+
+class MyColorPicker extends BaseEditorElement {
+  render() {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'sf-field';
+
+    const label = document.createElement('label');
+    label.className = 'sf-label';
+    label.textContent = this.schema?.title || 'Color';
+    this._label = label;
+
+    const input = document.createElement('input');
+    input.type = 'color';
+    input.className = 'sf-input';
+    input.value = this.modelValue || '#000000';
+    input.addEventListener('input', () => this.emitChange(input.value));
+    this._input = input;
+
+    wrapper.appendChild(label);
+    wrapper.appendChild(input);
+    this.appendChild(wrapper);
+  }
+
+  update() {
+    if (this._label) this._label.textContent = this.schema?.title || 'Color';
+    if (this._input) this._input.value = this.modelValue || '#000000';
+  }
+}
+
+customElements.define('my-color-picker', MyColorPicker);
+```
+
+**IIFE:**
+
+```html
+<script src="https://bnznamco.github.io/structured-widget-editor/latest/structured-widget-editor.iife.js"></script>
+<script>
+  var BaseEditorElement = StructuredWidgetEditor.BaseEditorElement;
+
+  class MyColorPicker extends BaseEditorElement {
+    render() {
+      var input = document.createElement('input');
+      input.type = 'color';
+      input.value = this.modelValue || '#000000';
+      input.addEventListener('input', () => this.emitChange(input.value));
+      this._input = input;
+      this.appendChild(input);
+    }
+
+    update() {
+      if (this._input) this._input.value = this.modelValue || '#000000';
+    }
+  }
+
+  customElements.define('my-color-picker', MyColorPicker);
+</script>
+```
+
+#### `BaseEditorElement` API
+
+| Property / Method | Description |
+|---|---|
+| `this.schema` | The resolved JSON Schema for this field |
+| `this.modelValue` | Current field value (read-only) |
+| `this.path` | Path segments from the root |
+| `this.form` | Form API object |
+| `this.emitChange(value)` | Dispatch the new value back to the form |
+| `this.getErrors()` | Returns `string[]` of validation errors for this field |
+| `render()` | **Override.** Called once when connected — build the DOM here |
+| `update()` | **Override.** Called on every property change after `render()` |
+
+## Conditional fields
+
+The form renderer evaluates standard JSON Schema conditional keywords on every change and updates the visible/required fields accordingly. No custom keywords — anything you put in the schema is also enforced server-side by Pydantic v2.
+
+Supported keywords on object schemas:
+
+| Keyword | Use case |
+|---|---|
+| `if` / `then` / `else` | "If `status == 'archived'`, require `archive_reason`" |
+| `allOf: [{ if, then }, ...]` | Multiple independent rules on the same object |
+| `dependentSchemas` | "If field `publisher` is present, also show `edition`" |
+| `dependentRequired` | Lighter version: only toggles `required` |
+
+Example schema fragment:
+
+```json
+{
+  "type": "object",
+  "properties": {
+    "status": { "enum": ["draft", "archived"] }
+  },
+  "allOf": [
+    {
+      "if":   { "properties": { "status": { "const": "archived" } }, "required": ["status"] },
+      "then": {
+        "properties": { "archive_reason": { "type": "string" } },
+        "required": ["archive_reason"]
+      }
+    }
+  ],
+  "dependentSchemas": {
+    "publisher": { "properties": { "edition": { "type": "string" } } }
+  }
+}
+```
+
+Fields that disappear when a rule stops matching are pruned from the form value, so the emitted JSON stays clean.
+
+### Declaring conditionals on a Pydantic model
+
+`django-structured-field` ships matching helpers in `structured.pydantic.conditionals` that compile down to the same standard keywords:
+
+```python
+from typing import Literal, Optional
+from pydantic import ConfigDict
+from structured.pydantic.models import BaseModel
+from structured.pydantic.conditionals import (
+    When, conditional_schema, dependent_schemas,
+)
+
+class Book(BaseModel):
+    status: Literal["draft", "review", "published", "archived"] = "draft"
+    archive_reason: Optional[str] = None
+    published_at: Optional[str] = None
+    publisher: Optional[str] = None
+    edition: Optional[str] = None
+
+    model_config = ConfigDict(json_schema_extra=conditional_schema(
+        When("status", equals="archived",
+             then={"required": ["archive_reason"]}),
+        When("status", equals="published",
+             then={"required": ["published_at"]}),
+        dependent_schemas(publisher={
+            "properties": {"edition": {"type": "string"}}
+        }),
+    ))
+```
+
+`When(field, equals=..., in_=..., not_equals=..., then=..., else_=...)` builds a single `if/then/else` clause; `conditional_schema(...)` groups them into `allOf` and merges any `dependent_schemas` / `dependent_required` fragments.
+
 ## Theming
 
 All styles use CSS custom properties with sensible defaults. Override them to match your design system:

package/dist/structured-widget-editor.css

@@ -1 +1 @@
-.structured-field-editor{width:100%;border-radius:4px;font-size:.8125rem}.structured-field-editor *,.structured-field-editor *::before,.structured-field-editor *::after{box-sizing:border-box}.structured-field-editor .sf-label{display:block;font-weight:600;margin-bottom:4px;text-transform:capitalize;color:var(--body-quiet-color, #666);font-size:.8125rem}.structured-field-editor .sf-label.required::after{content:" *";color:var(--error-fg, #ba2121)}.structured-field-editor .sf-input{display:block;width:100%;padding:6px 8px;border:1px solid var(--border-color, #ccc);border-radius:4px;background:var(--body-bg, #fff);color:var(--body-fg, #333);font-size:.8125rem;font-family:inherit;transition:border-color .15s}.structured-field-editor .sf-input:focus{outline:none;border-color:var(--primary, #79aec8);box-shadow:0 0 0 2px rgba(121,174,200,.2)}.structured-field-editor .sf-textarea{resize:vertical;min-height:60px}.structured-field-editor .sf-select{appearance:none;cursor:pointer;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12'%3E%3Cpath fill='%23888' d='M12 15L5 8h14z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:12px 12px}.structured-field-editor .sf-checkbox{margin-right:6px;accent-color:var(--primary, #79aec8)}.structured-field-editor .sf-checkbox-label{display:flex;align-items:center;font-weight:normal;cursor:pointer;padding:6px 0}.structured-field-editor .sf-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;background:var(--object-tools-bg, #888);color:var(--object-tools-fg, #fff);font-weight:400;font-size:.6875rem;text-transform:uppercase;letter-spacing:.5px;border-radius:15px;border:none;cursor:pointer;transition:background-color .15s}.structured-field-editor .sf-btn:hover{background-color:var(--object-tools-hover-bg, #666)}.structured-field-editor .sf-btn i{font-size:.6rem}.structured-field-editor .sf-btn-sm{padding:2px 8px;font-size:.625rem}.structured-field-editor .sf-btn-add{background:var(--object-tools-bg, #888);color:var(--object-tools-fg, #fff)}.structured-field-editor .sf-btn-danger{background:var(--delete-button-bg, #ba2121);color:var(--delete-button-fg, #fff)}.structured-field-editor .sf-btn-danger:hover{background:#a41515}.structured-field-editor .sf-error{color:var(--error-fg, #ba2121);font-size:.75rem;margin-top:2px}.structured-field-editor .errors .sf-input{border-color:var(--error-fg, #ba2121)}.structured-field-editor .errorlist{margin:4px 0 0 0;padding:0;list-style:none;color:var(--error-fg, #ba2121);font-size:.75rem}.structured-field-editor .errorlist li{padding:2px 0}.form-row{overflow:visible !important}.structured-field-editor .sf-field{margin-bottom:12px}.structured-field-editor .sf-field-boolean{margin-bottom:8px}.structured-field-editor .sf-object:not(.sf-object-root){border:1px solid var(--border-color, #ccc);border-radius:4px;padding:12px;margin-bottom:12px;background:var(--body-bg, #fff)}.structured-field-editor .sf-object:not(.sf-object-root).sf-object-collapsed{padding:0}.structured-field-editor .sf-object-title{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.8125rem;color:var(--body-fg, #333);text-transform:capitalize;padding:0 4px}.structured-field-editor .sf-object-title-text{flex-shrink:0}.structured-field-editor .sf-object-summary{font-weight:400;font-size:.75rem;color:var(--body-quiet-color, #888);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.structured-field-editor .sf-collapse-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:none;background:rgba(0,0,0,0);cursor:pointer;color:var(--body-quiet-color, #888);border-radius:3px;flex-shrink:0}.structured-field-editor .sf-collapse-btn:hover{background:var(--darkened-bg, #f0f0f0);color:var(--body-fg, #333)}.structured-field-editor .sf-object-fields{display:flex;flex-direction:column}.structured-field-editor .sf-array{margin-bottom:12px}.structured-field-editor .sf-array-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.structured-field-editor .sf-array-header .sf-label{margin-bottom:0}.structured-field-editor .sf-array-collapse-toggle{margin-left:auto;display:inline-flex;align-items:center;cursor:pointer;color:var(--body-quiet-color, #aaa);line-height:0}.structured-field-editor .sf-array-collapse-toggle:hover{color:var(--body-fg, #333)}.structured-field-editor .sf-array-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--darkened-bg, #f0f0f0);border-radius:10px;font-size:.6875rem;font-weight:600;color:var(--body-quiet-color, #666)}.structured-field-editor .sf-array-items{display:flex;flex-direction:column;gap:8px}.structured-field-editor .sf-array-item{border:1px solid var(--border-color, #ccc);border-radius:4px;background:var(--darkened-bg, #f8f8f8);overflow:hidden}.structured-field-editor .sf-array-item[draggable=true]{cursor:grab}.structured-field-editor .sf-array-item.sf-dragging{opacity:.4}.structured-field-editor .sf-array-item.sf-drag-over{outline:2px solid var(--primary-color, #3b82f6);outline-offset:-2px}.structured-field-editor .sf-array-item-header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:var(--darkened-bg, #f0f0f0);border-bottom:1px solid var(--border-color, #ccc)}.structured-field-editor .sf-array-item-left{display:flex;align-items:center;gap:6px}.structured-field-editor .sf-drag-handle{display:inline-flex;align-items:center;color:var(--body-quiet-color, #aaa);cursor:grab;padding:0 2px;line-height:0}.structured-field-editor .sf-drag-handle:active{cursor:grabbing}.structured-field-editor .sf-drag-handle:hover{color:var(--body-fg, #555)}.structured-field-editor .sf-array-item-index{font-size:.6875rem;font-weight:600;color:var(--body-quiet-color, #666)}.structured-field-editor .sf-array-item-actions{display:flex;gap:4px}.structured-field-editor .sf-array-item-body{padding:10px}.structured-field-editor .sf-array-item-body>.sf-object.sf-object-root,.structured-field-editor .sf-array-item-body>.sf-object:not(.sf-object-root){border:none;padding:0;margin:0;background:rgba(0,0,0,0)}.structured-field-editor .sf-nullable{margin-bottom:12px}.structured-field-editor .sf-nullable-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.structured-field-editor .sf-nullable-header .sf-label{margin-bottom:0}.structured-field-editor .sf-nullable-body{padding-left:0}.structured-field-editor .sf-nullable-body:not(:empty){border:1px solid var(--border-color, #ccc);border-radius:4px;padding:12px;margin-top:4px;background:var(--body-bg, #fff)}.structured-field-editor .sf-union{margin-bottom:12px}.structured-field-editor .sf-union-body{border:1px solid var(--border-color, #ccc);border-radius:4px;padding:12px;margin-top:8px;background:var(--body-bg, #fff)}.structured-field-editor .sf-union-body>.sf-object{border:none;padding:0;margin:0;background:rgba(0,0,0,0)}.structured-field-editor .sf-relation{position:relative}.structured-field-editor .sf-relation-wrapper{display:flex;flex-direction:column;gap:6px}.structured-field-editor .sf-relation-selected{display:flex;flex-wrap:wrap;gap:6px}.structured-field-editor .sf-relation-selected:empty{display:none}.structured-field-editor .sf-relation-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--darkened-bg, #f0f0f0);border:1px solid var(--border-color, #ccc);border-radius:4px;font-size:.8125rem;color:var(--body-fg, #333);max-width:100%}.structured-field-editor .sf-relation-tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.structured-field-editor .sf-relation-tag-remove{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:none;border-radius:50%;background:rgba(0,0,0,0);color:var(--body-quiet-color, #666);cursor:pointer;font-size:.6875rem;flex-shrink:0;transition:color .15s,background .15s}.structured-field-editor .sf-relation-tag-remove:hover{color:var(--error-fg, #ba2121);background:rgba(186,33,33,.1)}.structured-field-editor .sf-relation-search{position:relative}.structured-field-editor .sf-relation-input{padding-left:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:8px center;background-size:14px}.structured-field-editor .sf-relation-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;max-height:240px;overflow-y:auto;background:var(--body-bg, #fff);border:1px solid var(--border-color, #ccc);border-top:none;border-radius:0 0 4px 4px;box-shadow:0 4px 12px rgba(0,0,0,.1)}.structured-field-editor .sf-relation-dropdown-item{padding:8px 12px;cursor:pointer;font-size:.8125rem;color:var(--body-fg, #333);transition:background .1s;border-bottom:1px solid var(--hairline-color, #eee)}.structured-field-editor .sf-relation-dropdown-item:last-child{border-bottom:none}.structured-field-editor .sf-relation-dropdown-item:hover,.structured-field-editor .sf-relation-dropdown-item.highlighted{background:var(--selected-bg, #e4e4e4)}.structured-field-editor .sf-relation-dropdown-empty{padding:12px;text-align:center;color:var(--body-quiet-color, #999);font-size:.8125rem;font-style:italic}.structured-field-editor .sf-relation-dropdown-more{padding:8px 12px;text-align:center;cursor:pointer;font-size:.75rem;color:var(--link-fg, #417690);font-weight:600;border-top:1px solid var(--hairline-color, #eee);transition:background .1s}.structured-field-editor .sf-relation-dropdown-more:hover{background:var(--darkened-bg, #f0f0f0)}
+.structured-field-editor{width:100%;border-radius:4px;font-size:.8125rem}.structured-field-editor *,.structured-field-editor *::before,.structured-field-editor *::after{box-sizing:border-box}.structured-field-editor .sf-label{display:block;font-weight:600;margin-bottom:4px;text-transform:capitalize;color:var(--body-quiet-color, #666);font-size:.8125rem}.structured-field-editor .sf-label.required::after{content:" *";color:var(--error-fg, #ba2121)}.structured-field-editor .sf-input{display:block;width:100%;padding:6px 8px;border:1px solid var(--border-color, #ccc);border-radius:4px;background:var(--body-bg, #fff);color:var(--body-fg, #333);font-size:.8125rem;font-family:inherit;transition:border-color .15s}.structured-field-editor .sf-input:focus{outline:none;border-color:var(--primary, #79aec8);box-shadow:0 0 0 2px rgba(121,174,200,.2)}.structured-field-editor .sf-textarea{resize:vertical;min-height:60px}.structured-field-editor .sf-select{appearance:none;cursor:pointer;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12'%3E%3Cpath fill='%23888' d='M12 15L5 8h14z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:12px 12px}.structured-field-editor .sf-checkbox{margin-right:6px;accent-color:var(--primary, #79aec8)}.structured-field-editor .sf-checkbox-label{display:flex;align-items:center;font-weight:normal;cursor:pointer;padding:6px 0}.structured-field-editor .sf-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;background:var(--object-tools-bg, #888);color:var(--object-tools-fg, #fff);font-weight:400;font-size:.6875rem;text-transform:uppercase;letter-spacing:.5px;border-radius:15px;border:none;cursor:pointer;transition:background-color .15s}.structured-field-editor .sf-btn:hover{background-color:var(--object-tools-hover-bg, #666)}.structured-field-editor .sf-btn i{font-size:.6rem}.structured-field-editor .sf-btn-sm{padding:2px 8px;font-size:.625rem}.structured-field-editor .sf-btn-add{background:var(--object-tools-bg, #888);color:var(--object-tools-fg, #fff)}.structured-field-editor .sf-btn-danger{background:var(--delete-button-bg, #ba2121);color:var(--delete-button-fg, #fff)}.structured-field-editor .sf-btn-danger:hover{background:#a41515}.structured-field-editor .sf-error{color:var(--error-fg, #ba2121);font-size:.75rem;margin-top:2px}.structured-field-editor .errors .sf-input{border-color:var(--error-fg, #ba2121)}.structured-field-editor .errorlist{margin:4px 0 0 0;padding:0;list-style:none;color:var(--error-fg, #ba2121);font-size:.75rem}.structured-field-editor .errorlist li{padding:2px 0}.form-row{overflow:visible !important}.structured-field-editor .sf-field{margin-bottom:12px}.structured-field-editor .sf-field-boolean{margin-bottom:8px}.structured-field-editor .sf-object:not(.sf-object-root){border:1px solid var(--border-color, #ccc);border-radius:4px;padding:12px;margin-bottom:12px;background:var(--body-bg, #fff)}.structured-field-editor .sf-object:not(.sf-object-root).sf-object-collapsed{padding:0}.structured-field-editor .sf-object-title{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.8125rem;color:var(--body-fg, #333);text-transform:capitalize;padding:0 4px}.structured-field-editor .sf-object-title-text{flex-shrink:0}.structured-field-editor .sf-object-summary{font-weight:400;font-size:.75rem;color:var(--body-quiet-color, #888);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.structured-field-editor .sf-collapse-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:none;background:rgba(0,0,0,0);cursor:pointer;color:var(--body-quiet-color, #888);border-radius:3px;flex-shrink:0}.structured-field-editor .sf-collapse-btn:hover{background:var(--darkened-bg, #f0f0f0);color:var(--body-fg, #333)}.structured-field-editor .sf-object-fields{display:flex;flex-direction:column}.structured-field-editor .sf-array{margin-bottom:12px}.structured-field-editor .sf-array-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.structured-field-editor .sf-array-header .sf-label{margin-bottom:0}.structured-field-editor .sf-array-collapse-toggle{margin-left:auto;display:inline-flex;align-items:center;cursor:pointer;color:var(--body-quiet-color, #aaa);line-height:0}.structured-field-editor .sf-array-collapse-toggle:hover{color:var(--body-fg, #333)}.structured-field-editor .sf-array-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--darkened-bg, #f0f0f0);border-radius:10px;font-size:.6875rem;font-weight:600;color:var(--body-quiet-color, #666)}.structured-field-editor .sf-array-items{display:flex;flex-direction:column;gap:8px}.structured-field-editor .sf-array-item{border:1px solid var(--border-color, #ccc);border-radius:4px;background:var(--darkened-bg, #f8f8f8);overflow:visible;position:relative}.structured-field-editor .sf-array-item[draggable=true]{cursor:grab}.structured-field-editor .sf-array-item.sf-dragging{opacity:.4}.structured-field-editor .sf-array-item.sf-drag-over{outline:2px solid var(--primary-color, #3b82f6);outline-offset:-2px}.structured-field-editor .sf-array-item-header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:var(--darkened-bg, #f0f0f0);border-bottom:1px solid var(--border-color, #ccc);border-radius:4px 4px 0 0}.structured-field-editor .sf-array-item-left{display:flex;align-items:center;gap:6px}.structured-field-editor .sf-drag-handle{display:inline-flex;align-items:center;color:var(--body-quiet-color, #aaa);cursor:grab;padding:0 2px;line-height:0}.structured-field-editor .sf-drag-handle:active{cursor:grabbing}.structured-field-editor .sf-drag-handle:hover{color:var(--body-fg, #555)}.structured-field-editor .sf-array-item-index{font-size:.6875rem;font-weight:600;color:var(--body-quiet-color, #666)}.structured-field-editor .sf-array-item-actions{display:flex;gap:4px}.structured-field-editor .sf-array-item-body{padding:10px}.structured-field-editor .sf-array-item-body>.sf-object.sf-object-root,.structured-field-editor .sf-array-item-body>.sf-object:not(.sf-object-root){border:none;padding:0;margin:0;background:rgba(0,0,0,0)}.structured-field-editor .sf-nullable{margin-bottom:12px}.structured-field-editor .sf-nullable-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.structured-field-editor .sf-nullable-header .sf-label{margin-bottom:0}.structured-field-editor .sf-nullable-body{padding-left:0}.structured-field-editor .sf-nullable-body:not(:empty){border:1px solid var(--border-color, #ccc);border-radius:4px;padding:12px;margin-top:4px;background:var(--body-bg, #fff)}.structured-field-editor .sf-union{margin-bottom:12px}.structured-field-editor .sf-union-body{border:1px solid var(--border-color, #ccc);border-radius:4px;padding:12px;margin-top:8px;background:var(--body-bg, #fff)}.structured-field-editor .sf-union-body>.sf-object{border:none;padding:0;margin:0;background:rgba(0,0,0,0)}.structured-field-editor .sf-relation{position:relative}.structured-field-editor .sf-relation-wrapper{display:flex;flex-direction:column;gap:6px}.structured-field-editor .sf-relation-selected{display:flex;flex-wrap:wrap;gap:6px}.structured-field-editor .sf-relation-selected:empty{display:none}.structured-field-editor .sf-relation-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--darkened-bg, #f0f0f0);border:1px solid var(--border-color, #ccc);border-radius:4px;font-size:.8125rem;color:var(--body-fg, #333);max-width:100%}.structured-field-editor .sf-relation-tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.structured-field-editor .sf-relation-tag-remove{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:none;border-radius:50%;background:rgba(0,0,0,0);color:var(--body-quiet-color, #666);cursor:pointer;font-size:.6875rem;flex-shrink:0;transition:color .15s,background .15s}.structured-field-editor .sf-relation-tag-remove:hover{color:var(--error-fg, #ba2121);background:rgba(186,33,33,.1)}.structured-field-editor .sf-relation-search{position:relative}.structured-field-editor .sf-relation-input{padding-left:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:8px center;background-size:14px}.structured-field-editor .sf-relation-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;max-height:240px;overflow-y:auto;background:var(--body-bg, #fff);border:1px solid var(--border-color, #ccc);border-top:none;border-radius:0 0 4px 4px;box-shadow:0 4px 12px rgba(0,0,0,.1)}.structured-field-editor .sf-relation-dropdown-item{padding:8px 12px;cursor:pointer;font-size:.8125rem;color:var(--body-fg, #333);transition:background .1s;border-bottom:1px solid var(--hairline-color, #eee)}.structured-field-editor .sf-relation-dropdown-item:last-child{border-bottom:none}.structured-field-editor .sf-relation-dropdown-item:hover,.structured-field-editor .sf-relation-dropdown-item.highlighted{background:var(--selected-bg, #e4e4e4)}.structured-field-editor .sf-relation-dropdown-empty{padding:12px;text-align:center;color:var(--body-quiet-color, #999);font-size:.8125rem;font-style:italic}.structured-field-editor .sf-relation-dropdown-more{padding:8px 12px;text-align:center;cursor:pointer;font-size:.75rem;color:var(--link-fg, #417690);font-weight:600;border-top:1px solid var(--hairline-color, #eee);transition:background .1s}.structured-field-editor .sf-relation-dropdown-more:hover{background:var(--darkened-bg, #f0f0f0)}