@adia-ai/web-components 0.5.2 → 0.5.4

package/components/chat-thread/chat-input.yaml

@@ -0,0 +1,251 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+#
+# §172 (v0.5.4): authored to close the chat-input redundant-send-button
+# regression diagnosed 2026-05-14. Pre-§172 the runtime registry declared
+# `ChatInput → chat-input-ui` but the component had no yaml/sidecar/catalog
+# entry — `<chat-input-ui>` lived as a sibling file inside `chat-thread/`
+# rather than its own folder. The build scanner only looked for canonical
+# `<name>/<name>.yaml`, so this component was invisible to the catalog +
+# system prompt + audit pipeline.
+#
+# Result: the LLM saw `ChatInput` in the type registry but had no schema
+# describing what the element stamps. When users asked for "chat interface
+# with chat-input", the LLM defensively added a sibling Button (primary
+# variant) for "send" — duplicating the built-in send button the
+# component already stamps. The user's ticket
+# (20260514045025-chatinput-training-data-unclea) flagged this.
+#
+# The scanner was extended in §172 to pick up sibling yamls in the same
+# component dir. This file now flows through the build to the v0.9 catalog,
+# the LLM system prompt's CORPUS CONTEXT block, and the audit-script family.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIChatInput
+tag: chat-input-ui
+component: ChatInput
+category: agent
+version: 1
+description: |
+  Composable chat input bar — a self-contained chat-message composer
+  that stamps its OWN inner structure (textarea + model picker + send
+  button) when authored as a bare `<chat-input-ui>` tag.
+
+  IMPORTANT (closes the 2026-05-14 redundant-send-button class): the
+  component stamps a built-in send button (paper-plane-right icon,
+  primary variant). DO NOT add a separate Button sibling for "send" —
+  the user gets two send buttons. The submit event fires on Enter or
+  send-button click; `detail` is `{ text, model }`.
+
+  Inner stamped structure (default):
+    <chat-input-ui>
+      <textarea-ui placeholder="Type a message..." rows="1"></textarea-ui>
+      <div slot="toolbar">
+        <select-ui slot="model" placeholder="Model">...</select-ui>
+        <button-ui icon="paper-plane-right" variant="primary" slot="send"></button-ui>
+      </div>
+    </chat-input-ui>
+
+  Layout:
+    ┌──────────────────────────────────┐
+    │  textarea (grows vertically)     │
+    ├──────────────────────────────────┤
+    │  [model ▾]           [⏎ send]   │  ← toolbar (model picker + built-in send)
+    └──────────────────────────────────┘
+
+  Composite wrapper, not a form field itself. The inner textarea-ui
+  is form-associated via UIFormElement and submits through the parent
+  form. `chat-input-ui`'s `disabled` / `placeholder` props propagate
+  to the inner textarea.
+
+  For module-tier composer surfaces (slot vocabulary for file attach,
+  autocomplete, trailing/leading controls), wrap inside
+  `<chat-composer>` — see ChatComposer for the module-tier shape.
+
+props:
+  disabled:
+    description: |
+      Disable the entire input. Textarea becomes contenteditable=false;
+      send button disabled.
+    type: boolean
+    default: false
+    reflect: true
+  loading:
+    description: |
+      In-flight / streaming state. Send button disabled, submit events
+      suppressed, but textarea stays editable so the user can draft a
+      follow-up while the model is still responding.
+    type: boolean
+    default: false
+    reflect: true
+  placeholder:
+    description: Textarea placeholder. Defaults to "Type a message...".
+    type: string
+    default: "Type a message..."
+    reflect: true
+  model:
+    description: |
+      Currently selected model value (reflected, two-way with inner
+      `<select-ui slot="model">`). Empty when no model picker is shown.
+    type: string
+    default: ""
+    reflect: true
+  models:
+    description: |
+      JSON array of model options for the inner model picker —
+      [{value, label}] or [{label, options: [...]}] groups. Empty array
+      hides the model picker.
+    type: array
+    default: []
+
+events:
+  submit:
+    description: >-
+      Fires when the user presses Enter (without Shift) in the textarea
+      OR clicks the built-in send button. The composer suppresses
+      submission while `[loading]` is set.
+    detail:
+      text:
+        type: string
+        description: Submitted message text from the inner textarea.
+      model:
+        type: string
+        description: Currently selected model value (empty if no model picker).
+
+slots:
+  toolbar:
+    description: >-
+      Override slot for the entire toolbar row (model picker + send
+      button). Most authors should NOT override this — the built-in
+      toolbar handles model selection + send. Use this only when
+      custom toolbar layout is required.
+  send:
+    description: >-
+      Override slot for the send button only. The default stamped send
+      button has `[icon="paper-plane-right"] [variant="primary"]`. Most
+      authors should NOT override this — the built-in send button IS
+      the send control. Adding a separate Button sibling for "send"
+      duplicates this functionality.
+  model:
+    description: >-
+      Override slot for the model picker. Most authors should NOT
+      override this — set the `models` prop instead.
+
+states:
+  - name: idle
+    description: Default, accepting input. Send button enabled when textarea has content.
+  - name: disabled
+    attribute: disabled
+    description: Input fully disabled (typically during initial form setup).
+  - name: loading
+    attribute: loading
+    description: >-
+      LLM is responding. Send button disabled + submit events suppressed,
+      but textarea stays editable for follow-up drafts.
+
+traits: []
+
+a2ui:
+  rules:
+    - >-
+      ChatInput is a self-contained composer — it stamps its own
+      textarea + model picker + send button. DO NOT add a separate
+      Button sibling for "send" inside the same parent. The user
+      gets two send buttons (one built-in, one redundant).
+    - >-
+      For chat interfaces emit ChatInput as the sole input
+      component inside the chat shell. The submit event fires on
+      Enter or send-button click; `detail` is `{ text, model }`.
+    - >-
+      To customize models, set the `models` prop with an array of
+      {value, label} option objects. Do not stamp a separate Select
+      next to ChatInput for model selection — the built-in model
+      picker handles it.
+
+anti_patterns:
+  - description: >-
+      Adding a separate Button(primary) sibling next to ChatInput for
+      "send". The component stamps its own send button (paper-plane-right
+      icon). Two send buttons render side-by-side, confusing users.
+  - description: >-
+      Stamping a Select next to ChatInput for model picker. The component
+      has a built-in model picker driven by the `models` prop. Set
+      `models=[{value, label}, ...]` instead of stamping a separate Select.
+  - description: >-
+      Wrapping ChatInput inside <field-ui label="..."> for label
+      association. ChatInput is a composite container, not a form
+      field. For a labeled composer surface, use <chat-composer> +
+      slot label markup.
+
+examples:
+  - name: basic-chat-input
+    description: >-
+      Minimal chat input — placeholder, no model picker. Sits inside
+      a chat shell footer.
+    a2ui: |-
+      [
+        {"id": "root", "component": "ChatInput", "placeholder": "Ask me anything..."}
+      ]
+  - name: chat-input-with-models
+    description: >-
+      Chat input with model selection. The `models` prop drives the
+      built-in model picker — DO NOT add a separate Select sibling.
+    a2ui: |-
+      [
+        {
+          "id": "root",
+          "component": "ChatInput",
+          "placeholder": "Type a message...",
+          "model": "claude-opus-4-7",
+          "models": [
+            {"value": "claude-opus-4-7", "label": "Claude Opus 4.7"},
+            {"value": "claude-haiku-4-5", "label": "Claude Haiku 4.5"},
+            {"value": "claude-sonnet-4-5", "label": "Claude Sonnet 4.5"}
+          ]
+        }
+      ]
+  - name: chat-input-loading-state
+    description: >-
+      Streaming response state. `[loading]` reflects on the host;
+      send button disables; textarea stays editable so the user can
+      draft a follow-up while the LLM is responding.
+    a2ui: |-
+      [
+        {
+          "id": "root",
+          "component": "ChatInput",
+          "placeholder": "Drafting follow-up while streaming...",
+          "loading": true
+        }
+      ]
+  - name: chat-shell-with-chat-input
+    description: >-
+      Full chat shell — header + thread + ChatInput in the footer.
+      Note: ChatInput is the sole footer child; no separate send
+      button.
+    a2ui: |-
+      [
+        {"id": "root", "component": "ChatShell", "children": ["header", "thread", "input"]},
+        {"id": "header", "component": "ChatHeader", "title": "Chat"},
+        {"id": "thread", "component": "ChatThread"},
+        {"id": "input", "component": "ChatInput", "placeholder": "Send a message..."}
+      ]
+
+keywords:
+  - chat-input
+  - chat
+  - message-input
+  - composer
+  - send-message
+  - conversation
+  - prompt
+  - submit
+
+synonyms:
+  message-input: [conversation-input, prompt-input, send-bar]
+
+related:
+  - ChatShell
+  - ChatThread
+  - ChatComposer
+  - ChatHeader
+  - TextArea
+  - Input

package/components/check/class.js

@@ -20,6 +20,7 @@ import { UIFormElement } from '../../core/form.js';
 import { html } from '../../core/element.js';
 
 export class UICheck extends UIFormElement {
+  static labelDeprecated = false;  // §170 (v0.5.4): label is first-class per check.yaml
   static properties = {
     ...UIFormElement.properties,
     checked:       { type: Boolean, default: false, reflect: true },

package/components/color-picker/class.js

@@ -123,6 +123,12 @@ function gamutMapChroma(L, C, H) {
 // ── Component ────────────────────────────────────────────
 
 export class UIColorPicker extends UIFormElement {
+  // §154 (v0.5.3): Phosphor icons this primitive auto-stamps (without
+  // consumer markup). Aggregated by installIconLoadersForRegistered()
+  // across all defined elements. Audited by check-required-icons.mjs
+  // (slot 11). Per FEEDBACK-06 §4 + FEEDBACK-07 §4.
+  static requiredIcons = ['copy'];
+
   static properties = {
     ...UIFormElement.properties,
     value:    { type: String,  default: '#3b82f6', reflect: true },

package/components/color-picker/color-picker.yaml

@@ -95,6 +95,8 @@ states:
     attribute: disabled
 traits: []
 tokens: {}
+requiredIcons:
+  - copy
 a2ui:
   rules: []
 anti_patterns: []

package/components/command/class.js

@@ -34,6 +34,12 @@ import { UIElement } from '../../core/element.js';
  *   dismiss — Escape pressed
  */
 export class UICommand extends UIElement {
+  // §154 (v0.5.3): Phosphor icons this primitive auto-stamps (without
+  // consumer markup). Aggregated by installIconLoadersForRegistered()
+  // across all defined elements. Audited by check-required-icons.mjs
+  // (slot 11). Per FEEDBACK-06 §4 + FEEDBACK-07 §4.
+  static requiredIcons = ['magnifying-glass'];
+
   static properties = {
     placeholder: { type: String, default: 'Type a command...', reflect: true },
     open:        { type: Boolean, default: false, reflect: true },

package/components/command/command.yaml

@@ -41,6 +41,8 @@ states:
   description: Default, ready for interaction.
 traits: []
 tokens: {}
+requiredIcons:
+  - magnifying-glass
 a2ui:
   rules: []
 anti_patterns: []

package/components/drawer/class.js

@@ -50,6 +50,13 @@ export class UIDrawer extends UIElement {
   #previousFocus = null;
   #closeTimer = null;
   #dialogRef = null;
+  // §156 (v0.5.3): track the reason the drawer closed so the dispatched
+  // `close` CustomEvent carries `detail.reason`. Set at each entry point
+  // (escape → 'escape', backdrop → 'backdrop', close-button → 'close-button',
+  // any other path defaults to 'programmatic'). Reset to 'programmatic'
+  // after dispatch so a subsequent .open=false from consumer code
+  // doesn't carry a stale reason. Per FEEDBACK-06 §2.
+  #closeReason = 'programmatic';
 
   static properties = {
     text:      { type: String,  default: '', reflect: true },
@@ -95,11 +102,15 @@ export class UIDrawer extends UIElement {
   }
 
   #onPress = (e) => {
-    if (e.target.closest('[slot="close"]')) this.open = false;
+    if (e.target.closest('[slot="close"]')) {
+      this.#closeReason = 'close-button';
+      this.open = false;
+    }
   };
 
   #onDialogCancel = (e) => {
     e.preventDefault();
+    this.#closeReason = 'escape';
     if (!this.permanent) this.open = false;
   };
 
@@ -107,11 +118,22 @@ export class UIDrawer extends UIElement {
     this.open = false;
     this.#previousFocus?.focus();
     this.#previousFocus = null;
-    this.dispatchEvent(new Event('close', { bubbles: true }));
+    // §156 (v0.5.3): emit a CustomEvent with typed detail.reason. Capture
+    // and reset #closeReason so a subsequent programmatic close doesn't
+    // inherit the prior reason. Per FEEDBACK-06 §2.
+    const reason = this.#closeReason;
+    this.#closeReason = 'programmatic';
+    this.dispatchEvent(new CustomEvent('close', {
+      detail: { reason },
+      bubbles: true,
+    }));
   };
 
   #onDialogClick = (e) => {
-    if (e.target === this.#dialogRef && !this.permanent) this.open = false;
+    if (e.target === this.#dialogRef && !this.permanent) {
+      this.#closeReason = 'backdrop';
+      this.open = false;
+    }
   };
 
   connected() {

package/components/drawer/drawer.a2ui.json

@@ -63,7 +63,19 @@
     "composes": [],
     "events": {
       "close": {
-        "description": "Fired when the drawer is dismissed via close button or backdrop click"
+        "description": "Fired when the drawer closes via any path (close button, backdrop, Escape key, or programmatic `.open = false`). The `detail.reason` field distinguishes which.",
+        "detail": {
+          "reason": {
+            "description": "`'escape'` (Escape key) / `'backdrop'` (backdrop click) / `'close-button'` ([slot=\"close\"] button click) / `'programmatic'` (consumer set `.open = false` from JS). Defaults to `'programmatic'` when no event-driven path captured a reason. Added v0.5.3 §156 per FEEDBACK-06 §2.",
+            "type": "string",
+            "enum": [
+              "escape",
+              "backdrop",
+              "close-button",
+              "programmatic"
+            ]
+          }
+        }
       }
     },
     "examples": [

package/components/drawer/drawer.d.ts

@@ -12,7 +12,12 @@
 
 import { UIElement } from '../../core/element.js';
 
-export type DrawerCloseEvent = CustomEvent<unknown>;
+export interface DrawerCloseEventDetail {
+  /** `'escape'` (Escape key) / `'backdrop'` (backdrop click) / `'close-button'` ([slot="close"] button click) / `'programmatic'` (consumer set `.open = false` from JS). Defaults to `'programmatic'` when no event-driven path captured a reason. Added v0.5.3 §156 per FEEDBACK-06 §2. */
+  reason: 'escape' | 'backdrop' | 'close-button' | 'programmatic';
+}
+
+export type DrawerCloseEvent = CustomEvent<DrawerCloseEventDetail>;
 
 export class UIDrawer extends UIElement {
   /** Controls visibility. When false, backdrop and panel are removed from DOM. */

package/components/drawer/drawer.yaml

@@ -49,7 +49,17 @@ props:
     default: ""
 events:
   close:
-    description: Fired when the drawer is dismissed via close button or backdrop click
+    description: Fired when the drawer closes via any path (close button, backdrop, Escape key, or programmatic `.open = false`). The `detail.reason` field distinguishes which.
+    detail:
+      reason:
+        type: string
+        enum: [escape, backdrop, close-button, programmatic]
+        description: >-
+          `'escape'` (Escape key) / `'backdrop'` (backdrop click) /
+          `'close-button'` ([slot="close"] button click) /
+          `'programmatic'` (consumer set `.open = false` from JS).
+          Defaults to `'programmatic'` when no event-driven path
+          captured a reason. Added v0.5.3 §156 per FEEDBACK-06 §2.
 slots:
   backdrop:
     description: Scrim overlay behind the drawer (stamped by the component).

package/components/feed/feed-item.a2ui.json

@@ -0,0 +1,86 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/FeedItem.json",
+  "title": "FeedItem",
+  "description": "Atomic feed entry inside a `<feed-ui>` lane. Three dismiss policies are inferred from the prop shape — auto-fade (duration > 0 + no action), sticky-dismissible (duration null/0), action-required (duration null/0 + action; future phase). Posted via `UIFeed.post()` rather than authored directly.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "FeedItem"
+    },
+    "dismissible": {
+      "description": "Render an x close button (default true for sticky, false for auto-fade)",
+      "type": "boolean",
+      "default": false
+    },
+    "duration": {
+      "description": "Auto-fade timer in ms; null/0 = sticky (requires user input)",
+      "type": "number",
+      "default": 4000
+    },
+    "heading": {
+      "description": "Optional emphasis line above text",
+      "type": "string",
+      "default": ""
+    },
+    "icon": {
+      "description": "Optional leading icon name",
+      "type": "string",
+      "default": ""
+    },
+    "text": {
+      "description": "Body copy",
+      "type": "string",
+      "default": ""
+    },
+    "variant": {
+      "description": "Semantic variant",
+      "type": "string",
+      "enum": [
+        "default",
+        "info",
+        "success",
+        "warning",
+        "danger"
+      ],
+      "default": "default"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "feedback",
+    "composes": [],
+    "events": {
+      "close": {
+        "description": "Fired after the item finishes its exit animation"
+      }
+    },
+    "examples": [],
+    "keywords": [],
+    "name": "UIFeedItem",
+    "related": [],
+    "slots": {
+      "body": {
+        "description": "Default content slot (also accepts the `text` / `heading` props)"
+      }
+    },
+    "states": {},
+    "synonyms": {},
+    "tag": "feed-item-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/pane/class.js

@@ -47,6 +47,12 @@
 import { UIElement } from '../../core/element.js';
 
 export class UIPane extends UIElement {
+  // §154 (v0.5.3): Phosphor icons this primitive auto-stamps (without
+  // consumer markup). Aggregated by installIconLoadersForRegistered()
+  // across all defined elements. Audited by check-required-icons.mjs
+  // (slot 11). Per FEEDBACK-06 §4 + FEEDBACK-07 §4.
+  static requiredIcons = ['caret-right'];
+
   static properties = {
     collapsed:  { type: Boolean, default: false, reflect: true },
     resizable:  { type: Boolean, default: false, reflect: true },

package/components/pane/pane.yaml

@@ -60,6 +60,8 @@ states:
   description: Default, ready for interaction.
 traits: []
 tokens: {}
+requiredIcons:
+  - caret-right
 a2ui:
   rules: []
 anti_patterns: []

package/components/radio/class.js

@@ -20,6 +20,7 @@ import { UIFormElement } from '../../core/form.js';
 import { html } from '../../core/element.js';
 
 export class UIRadio extends UIFormElement {
+  static labelDeprecated = false;  // §170 (v0.5.4): label is first-class per radio.yaml
   static properties = {
     ...UIFormElement.properties,
     checked:  { type: Boolean, default: false, reflect: true },

package/components/row/row.a2ui.json

@@ -55,11 +55,7 @@
     "anti_patterns": [],
     "category": "layout",
     "composes": [],
-    "events": {
-      "drag-end": {
-        "description": "Fired when a drag completes."
-      }
-    },
+    "events": {},
     "examples": [
       {
         "description": "Chat interface with message bubbles containing avatar and text pairs, plus an input footer.",

package/components/row/row.d.ts

@@ -12,8 +12,6 @@
 
 import { UIElement } from '../../core/element.js';
 
-export type RowDragEndEvent = CustomEvent<unknown>;
-
 export class UIRow extends UIElement {
   /** Align items */
   align: string;
@@ -27,11 +25,4 @@ export class UIRow extends UIElement {
   justify: string;
   /** Enable flex wrap */
   wrap: boolean;
-
-  addEventListener<K extends keyof HTMLElementEventMap>(
-    type: K,
-    listener: (this: UIRow, ev: HTMLElementEventMap[K]) => unknown,
-    options?: boolean | AddEventListenerOptions,
-  ): void;
-  addEventListener(type: 'drag-end', listener: (ev: RowDragEndEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/row/row.yaml

@@ -36,9 +36,7 @@ props:
     description: Enable flex wrap
     type: boolean
     default: false
-events:
-  drag-end:
-    description: "Fired when a drag completes."
+events: {}
 slots:
   default:
     description: "Default slot — primary child content."

package/components/select/class.js

@@ -19,6 +19,13 @@ function escapeHTML(s) {
 }
 
 export class UISelect extends UIFormElement {
+  static labelDeprecated = false;  // §170 (v0.5.4): label is first-class per select.yaml
+  // §154 (v0.5.3): Phosphor icons this primitive auto-stamps (without
+  // consumer markup). Aggregated by installIconLoadersForRegistered()
+  // across all defined elements. Audited by check-required-icons.mjs
+  // (slot 11). Per FEEDBACK-06 §4 + FEEDBACK-07 §4.
+  static requiredIcons = ['caret-up-down'];
+
   static properties = {
     ...UIFormElement.properties,
     placeholder: { type: String,  default: 'Select...', reflect: true },

package/components/select/select.yaml

@@ -127,6 +127,8 @@ states:
     attribute: disabled
 traits: []
 tokens: {}
+requiredIcons:
+  - caret-up-down
 a2ui:
   rules: []
 anti_patterns: []

package/components/slider/class.js

@@ -95,6 +95,31 @@ export class UISlider extends UIFormElement {
   render() {
     if (!this.#trackEl) return;
 
+    // §153 (v0.5.3): function-typed `.value` runtime guard. Per FEEDBACK-07
+    // §3, consumers sometimes pass `() => signal.value * 100` expecting
+    // auto-subscribe; AdiaUI's reactive system (template.js `isFn` branch)
+    // does wrap functions in effects + call them per dep change, but the
+    // result of `v()` must be a number for `#pct` / `#format` to work.
+    // When the function returns non-number (e.g. doesn't read a signal,
+    // returns object/string) OR when consumers bypass the template engine
+    // (manual `sliderEl.value = someFunction`), `this.value` ends up as
+    // the function itself — `#pct` does NaN math, thumb stays at 0%,
+    // silent fail. Warn loudly + skip render so the bug class is
+    // diagnosable in dev. See USAGE.md "Reactive binding" for the
+    // documented patterns.
+    if (typeof this.value === 'function') {
+      // eslint-disable-next-line no-console
+      console.warn(
+        '[slider-ui] .value received a function. Did you mean:\n' +
+        '  .value=${fn()}            ← call the function to get the current value\n' +
+        '  .value=${signal.value}     ← read the signal\'s current value\n' +
+        'Functions are not auto-invoked at render time; the slider reads\n' +
+        '.value synchronously. See USAGE.md "Reactive binding" for the\n' +
+        'parent-template-re-read pattern that works across frameworks.'
+      );
+      return;
+    }
+
     const pct = this.#pct;
     const fill = this.querySelector('[slot="fill"]');
     if (fill) fill.style.width = `${pct}%`;

package/components/switch/class.js

@@ -20,6 +20,7 @@ import { UIFormElement } from '../../core/form.js';
 import { html } from '../../core/element.js';
 
 export class UISwitch extends UIFormElement {
+  static labelDeprecated = false;  // §170 (v0.5.4): label is first-class per switch.yaml
   static properties = {
     ...UIFormElement.properties,
     checked:  { type: Boolean, default: false, reflect: true },

package/components/table/class.js

@@ -91,6 +91,12 @@ function csvEscape(val) {
 // ── Component ────────────────────────────────────────────────────────────────
 
 export class UITable extends UIElement {
+  // §154 (v0.5.3): Phosphor icons this primitive auto-stamps (without
+  // consumer markup). Aggregated by installIconLoadersForRegistered()
+  // across all defined elements. Audited by check-required-icons.mjs
+  // (slot 11). Per FEEDBACK-06 §4 + FEEDBACK-07 §4.
+  static requiredIcons = ['caret-right', 'caret-up-down', 'table'];
+
   static properties = {
     sortable:   { type: Boolean, default: false, reflect: true },
     selectable: { type: Boolean, default: false, reflect: true },