twico-ui 1.29.0 → 1.31.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to Twico UI are documented here (newest first). This file is generated automatically on each release by [semantic-release](https://semantic-release.gitbook.io/) from [Conventional Commits](https://www.conventionalcommits.org/) — do not edit it by hand. The same notes appear on each [GitHub Release](https://github.com/EncryptionL/twico-ui/releases).
 
+# [1.31.0](https://github.com/EncryptionL/twico-ui/compare/v1.30.0...v1.31.0) (2026-08-04)
+
+
+### Bug Fixes
+
+* **datatable:** keep DT_CSS a plain literal so single-component bundles tree-shake ([9574c2b](https://github.com/EncryptionL/twico-ui/commit/9574c2b52be39bdfcd27241a381b463eb7002c11)), closes [#330](https://github.com/EncryptionL/twico-ui/issues/330)
+
+
+### Features
+
+* **datatable:** MUI DataGrid-style per-row And/Or filter connector + controllable filterLogic ([3d79a1f](https://github.com/EncryptionL/twico-ui/commit/3d79a1f1c2e8f55d439e1bfeb37c0258b37cf5bc)), closes [#303](https://github.com/EncryptionL/twico-ui/issues/303) [#330](https://github.com/EncryptionL/twico-ui/issues/330)
+
+# [1.30.0](https://github.com/EncryptionL/twico-ui/compare/v1.29.0...v1.30.0) (2026-08-04)
+
+
+### Features
+
+* **inputs,datatable:** clearable inputs, richer select options, and datatable input clears ([e5eadbc](https://github.com/EncryptionL/twico-ui/commit/e5eadbce72db3ed96487bc7097d49c7c7caa6dfb)), closes [#328](https://github.com/EncryptionL/twico-ui/issues/328) [#326](https://github.com/EncryptionL/twico-ui/issues/326) [#327](https://github.com/EncryptionL/twico-ui/issues/327) [#326](https://github.com/EncryptionL/twico-ui/issues/326) [#327](https://github.com/EncryptionL/twico-ui/issues/327) [#328](https://github.com/EncryptionL/twico-ui/issues/328)
+
 # [1.29.0](https://github.com/EncryptionL/twico-ui/compare/v1.28.0...v1.29.0) (2026-08-03)
 
 

package/dist/index.cjs

@@ -5671,6 +5671,10 @@ var COMBO_CSS = `
 .twc-opt__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
 .twc-opt__label { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .twc-opt__desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #326: optional leading icon/swatch + trailing (right-aligned) hint on an option. */
+.twc-opt__icon { flex: none; display: inline-flex; align-items: center; color: var(--color-text-muted); }
+.twc-opt__icon svg { width: 16px; height: 16px; }
+.twc-opt__hint { flex: none; margin-inline-start: auto; padding-inline-start: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
 /* #300: wrapOptions \u2014 let long labels/descriptions wrap onto multiple lines instead of truncating.
    overflow-wrap: anywhere also breaks a single very long token so it can't overflow the popover edge. */
 .twc-opt[data-wrap="true"] { align-items: flex-start; }
@@ -5738,6 +5742,7 @@ function Combobox({
   virtualized: virtualizedProp = false,
   overscan = 8,
   wrapOptions = false,
+  renderOption,
   id,
   className = "",
   onFocus,
@@ -5745,8 +5750,8 @@ function Combobox({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-combo-styles", COMBO_CSS);
-  if (virtualizedProp && wrapOptions) warnOnce("combobox-wrap-virtualized", "twico-ui Combobox: `wrapOptions` disables `virtualized` \u2014 wrapped option rows aren't a fixed height.");
-  const virtualized = virtualizedProp && !wrapOptions;
+  if (virtualizedProp && (wrapOptions || renderOption)) warnOnce("combobox-var-height-virtualized", "twico-ui Combobox: `wrapOptions`/`renderOption` disable `virtualized` \u2014 those rows aren't a fixed height.");
+  const virtualized = virtualizedProp && !wrapOptions && !renderOption;
   const groups = React51__namespace.default.useMemo(() => normalizeGroups(options), [options]);
   const flat = React51__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
   const autoId = React51__namespace.default.useId();
@@ -5917,7 +5922,7 @@ function Combobox({
   const activeId = open && visible[active] ? optionId(active) : void 0;
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
-  const renderOption = (o, idx) => {
+  const renderRow = (o, idx) => {
     const isSel = o.value === current;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -5940,9 +5945,13 @@ function Combobox({
         onMouseDown: (e) => e.preventDefault(),
         onClick: () => commit(o.value),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
-            o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+          renderOption ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__main", children: renderOption(o, { selected: isSel, active: idx === active }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            o.icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__icon", "aria-hidden": "true", children: o.icon }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
+              o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+            ] }),
+            o.hint != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__hint", children: o.hint }) : null
           ] }),
           isSel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__check", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null
         ]
@@ -5964,14 +5973,14 @@ function Combobox({
     "Loading\u2026"
   ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : virtualized ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     vTop > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
-    vShown.map((r2) => r2.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: r2.label }, `g${r2.gi}`) : renderOption(r2.o, r2.idx)),
+    vShown.map((r2) => r2.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: r2.label }, `g${r2.gi}`) : renderRow(r2.o, r2.idx)),
     vBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
   ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React51__namespace.default.Fragment, { children: [
     g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
     g.options.map((o) => {
       counter += 1;
       const idx = counter;
-      return renderOption(o, idx);
+      return renderRow(o, idx);
     })
   ] }, gi)) });
   const RD = { createPortal: typeof reactDom.createPortal === "function" ? reactDom.createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
@@ -6508,6 +6517,10 @@ var SELECT_CSS = `
 .twc-opt__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
 .twc-opt__label { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .twc-opt__desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #326: optional leading icon/swatch + trailing (right-aligned) hint on an option. */
+.twc-opt__icon { flex: none; display: inline-flex; align-items: center; color: var(--color-text-muted); }
+.twc-opt__icon svg { width: 16px; height: 16px; }
+.twc-opt__hint { flex: none; margin-inline-start: auto; padding-inline-start: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
 .twc-opt__check { flex: none; color: var(--color-primary); display: inline-flex; }
 .twc-opt__check svg { width: 16px; height: 16px; }
 .twc-pop__empty { padding: 14px 12px; text-align: center; font-size: var(--text-sm); color: var(--color-text-subtle); }
@@ -6568,8 +6581,9 @@ function Select({
   loading = false,
   emptyText = "No results found",
   name,
-  virtualized = false,
+  virtualized: virtualizedProp = false,
   overscan = 8,
+  renderOption,
   id,
   className = "",
   onClick,
@@ -6577,6 +6591,8 @@ function Select({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-select-styles", SELECT_CSS);
+  if (virtualizedProp && renderOption) warnOnce("select-renderoption-virtualized", "twico-ui Select: `renderOption` disables `virtualized` \u2014 custom rows aren't a fixed height.");
+  const virtualized = virtualizedProp && !renderOption;
   const bufferRef = React51__namespace.default.useRef("");
   const bufferTimerRef = React51__namespace.default.useRef(null);
   const groups = React51__namespace.default.useMemo(() => normalizeGroups2(options), [options]);
@@ -6782,7 +6798,7 @@ function Select({
   const activeId = open && visible[active] ? optionId(active) : void 0;
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
-  const renderOption = (o, idx) => {
+  const renderRow = (o, idx) => {
     const isSel = o.value === current;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -6804,9 +6820,13 @@ function Select({
         },
         onClick: () => commit(o.value),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
-            o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+          renderOption ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__main", children: renderOption(o, { selected: isSel, active: idx === active }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            o.icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__icon", "aria-hidden": "true", children: o.icon }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
+              o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+            ] }),
+            o.hint != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__hint", children: o.hint }) : null
           ] }),
           isSel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__check", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null
         ]
@@ -6854,14 +6874,14 @@ function Select({
       "Loading\u2026"
     ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : virtualized ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       vTop > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
-      vShown.map((r2) => r2.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: r2.label }, `g${r2.gi}`) : renderOption(r2.o, r2.idx)),
+      vShown.map((r2) => r2.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: r2.label }, `g${r2.gi}`) : renderRow(r2.o, r2.idx)),
       vBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
     ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React51__namespace.default.Fragment, { children: [
       g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
       g.options.map((o) => {
         counter += 1;
         const idx = counter;
-        return renderOption(o, idx);
+        return renderRow(o, idx);
       })
     ] }, gi)) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-sel__sr", role: "status", "aria-live": "polite", children: loading ? "Loading\u2026" : visible.length === 0 ? emptyText : `${visible.length} result${visible.length === 1 ? "" : "s"}` })
@@ -7165,6 +7185,11 @@ var INPUT_EXTRA_CSS = `
 .twc-input__reveal:hover { background: var(--color-surface-sunken); color: var(--color-text); }
 .twc-input__reveal:focus-visible { outline: none; box-shadow: var(--ring); }
 .twc-input__reveal svg { width: 17px; height: 17px; }
+/* #328: trailing clear (X) button \u2014 mirrors the reveal toggle; sits alongside rightIcon / the password eye. */
+.twc-input__clear { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: none; background: transparent; color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-sm); flex: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.twc-input__clear:hover { background: var(--color-surface-sunken); color: var(--color-text); }
+.twc-input__clear:focus-visible { outline: none; box-shadow: var(--ring); }
+.twc-input__clear svg { width: 15px; height: 15px; }
 .twc-input__addon { align-self: stretch; display: inline-flex; align-items: center; padding-inline: var(--space-3);
   background: var(--color-surface-sunken); color: var(--color-text-muted); font-size: var(--text-sm);
   font-weight: var(--font-semibold); white-space: nowrap; flex: none; }
@@ -7186,6 +7211,7 @@ function Input({
   leftAddon,
   rightAddon,
   showCount = false,
+  clearable = false,
   type = "text",
   disabled = false,
   id,
@@ -7207,8 +7233,25 @@ function Input({
   const near = showCounter && count >= Math.floor(max * 0.9);
   const handleChange = (e) => {
     rest.onChange?.(e);
-    if (showCount && !countControlled) setLen(e.target.value.length);
+    if ((showCount || clearable) && !countControlled) setLen(e.target.value.length);
   };
+  const inputRef = React51__namespace.default.useRef(null);
+  const userRef = rest.ref;
+  const setRef = React51__namespace.default.useCallback((node) => {
+    inputRef.current = node;
+    if (typeof userRef === "function") userRef(node);
+    else if (userRef && typeof userRef === "object") userRef.current = node;
+  }, [userRef]);
+  const clearField = () => {
+    const el = inputRef.current;
+    if (!el) return;
+    const setter = typeof HTMLInputElement !== "undefined" && Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+    if (setter) setter.call(el, "");
+    else el.value = "";
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+    el.focus();
+  };
+  const showClear = clearable && count > 0 && !disabled && !rest.readOnly;
   const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
   const describedBy = [error || hint ? descId : null, showCounter ? countId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
   const isPassword = type === "password";
@@ -7255,11 +7298,16 @@ function Input({
           required: required || void 0,
           "aria-required": required || void 0,
           ...rest,
+          ref: setRef,
           onChange: handleChange,
           "aria-invalid": ariaInvalid,
           "aria-describedby": describedBy
         }
       ),
+      showClear ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-input__clear", "aria-label": "Clear", tabIndex: 0, onMouseDown: (e) => e.preventDefault(), onClick: clearField, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
+      ] }) }) : null,
       suffix,
       rightAddon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-input__addon twc-input__addon--end", children: rightAddon }) : null
     ] }),
@@ -7347,6 +7395,10 @@ var MULTI_CSS = `
 .twc-opt__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
 .twc-opt__label { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .twc-opt__desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #326: optional leading icon/swatch + trailing (right-aligned) hint on an option. */
+.twc-opt__icon { flex: none; display: inline-flex; align-items: center; color: var(--color-text-muted); }
+.twc-opt__icon svg { width: 16px; height: 16px; }
+.twc-opt__hint { flex: none; margin-inline-start: auto; padding-inline-start: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
 .twc-pop__empty { padding: 14px 12px; text-align: center; font-size: var(--text-sm); color: var(--color-text-subtle); }
 .twc-opt[data-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
 .twc-pop__loading { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 14px 12px; font-size: var(--text-sm); color: var(--color-text-muted); }
@@ -7408,8 +7460,9 @@ function MultiSelect({
   maxTagCount,
   filter,
   onInputChange,
-  virtualized = false,
+  virtualized: virtualizedProp = false,
   overscan = 8,
+  renderOption,
   id,
   className = "",
   onFocus,
@@ -7417,6 +7470,8 @@ function MultiSelect({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-ms-styles", MULTI_CSS);
+  if (virtualizedProp && renderOption) warnOnce("multiselect-renderoption-virtualized", "twico-ui MultiSelect: `renderOption` disables `virtualized` \u2014 custom rows aren't a fixed height.");
+  const virtualized = virtualizedProp && !renderOption;
   const groups = React51__namespace.default.useMemo(() => normalizeGroups3(options), [options]);
   const flat = React51__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
   const autoId = React51__namespace.default.useId();
@@ -7576,7 +7631,7 @@ function MultiSelect({
   const activeId = open && visible[active] ? optionId(active) : void 0;
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
-  const renderOption = (o, idx) => {
+  const renderRow = (o, idx) => {
     const isSel = selected.includes(o.value);
     const optDisabled = isOptDisabled(o);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7600,9 +7655,13 @@ function MultiSelect({
         onClick: () => toggle(o.value),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__box", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
-            o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+          renderOption ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__main", children: renderOption(o, { selected: isSel, active: idx === active }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            o.icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__icon", "aria-hidden": "true", children: o.icon }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-opt__main", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__label", children: o.label }),
+              o.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+            ] }),
+            o.hint != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-opt__hint", children: o.hint }) : null
           ] })
         ]
       },
@@ -7632,14 +7691,14 @@ function MultiSelect({
         "Loading\u2026"
       ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : virtualized ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         vTop > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
-        vShown.map((r2) => r2.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: r2.label }, `g${r2.gi}`) : renderOption(r2.o, r2.idx)),
+        vShown.map((r2) => r2.kind === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: r2.label }, `g${r2.gi}`) : renderRow(r2.o, r2.idx)),
         vBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
       ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React51__namespace.default.Fragment, { children: [
         g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
         g.options.map((o) => {
           counter += 1;
           const idx = counter;
-          return renderOption(o, idx);
+          return renderRow(o, idx);
         })
       ] }, gi))
     }
@@ -8152,6 +8211,8 @@ function classifyDiff(from = [], to = [], columns = [], rowKey, opts = {}) {
   });
   return { rows, counts };
 }
+var DT_FILTER_PANEL_W = 620;
+var DT_FILTER_LOGIC_W = 68;
 var DT_CSS = `
 .twc-dt { display: flex; flex-direction: column; font-family: var(--font-sans); color: var(--color-text);
   border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg);
@@ -8223,6 +8284,11 @@ var DT_CSS = `
   font-size: var(--text-sm); color: var(--color-text); width: 150px; }
 .twc-dt__search input:focus, .twc-dt__search input:focus-visible { outline: none; box-shadow: none; }
 .twc-dt__search input::placeholder { color: var(--color-text-subtle); }
+/* #327: trailing clear (X) for the built-in search inputs (quick-search + column-menu search). */
+.twc-dt__search-clear { border: none; background: transparent; color: var(--color-text-subtle); cursor: pointer; display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border-radius: var(--radius-sm); flex: none; }
+.twc-dt__search-clear:hover { color: var(--color-text); background: var(--color-surface-sunken); }
+.twc-dt__search-clear:focus-visible { outline: none; box-shadow: var(--ring); }
+.twc-dt__search-clear svg { width: 14px; height: 14px; }
 .twc-dt__tlabel { display: inline; }
 /* Narrow grid: collapse the toolbar to icon-only buttons (labels survive as
    hover tooltips via data-tip) and let the search flex so nothing wraps. */
@@ -8569,13 +8635,11 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
 .twc-dt__panel-count { font-weight: 600; color: var(--color-text-muted); text-transform: none; letter-spacing: 0; margin-inline-start: 6px; font-variant-numeric: tabular-nums; }
 .twc-dt__link { border: none; background: transparent; color: var(--color-primary); font-family: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: var(--radius-sm); }
 .twc-dt__link:hover { background: var(--color-primary-subtle); }
-/* #303: AND/OR connective toggle (segmented pill) in the Filters panel head. */
-.twc-dt__flogic { display: inline-flex; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
-.twc-dt__flogic-btn { border: none; background: transparent; color: var(--color-text-muted); font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-wide); cursor: pointer; padding: 2px 8px; }
-.twc-dt__flogic-btn + .twc-dt__flogic-btn { border-inline-start: var(--border-thin) solid var(--color-border); }
-.twc-dt__flogic-btn:hover { background: var(--color-surface-sunken); }
-.twc-dt__flogic-btn[data-active] { background: var(--color-primary); color: var(--color-primary-fg); }
-.twc-dt__flogic-btn[data-active]:hover { background: var(--color-primary); }
+/* #330: MUI DataGrid-style per-row And/Or connector. Row 1 shows a static "Where"; the first connector
+   row (row 2) hosts an editable And/Or Select bound to the single filterLogic; rows 3+ echo it as static
+   text. Fixed-width leading cell so the Column/Operator/Value cells stay aligned across rows. */
+.twc-dt__f-logic { position: relative; flex: none; width: 68px; }
+.twc-dt__f-where { display: inline-flex; align-items: center; height: 38px; padding-inline: 6px; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--font-medium); }
 
 /* Filter panel \u2014 user-resizable (#292): panel size + per-field widths resolve through a two-tier CSS var
    cascade \u2014 user drag (-usr) > #289 measured auto-fit (-fit) > 118px fallback \u2014 entirely in clamp(), so
@@ -8585,7 +8649,7 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
      equal-specificity 'position: relative' defined later would clobber it, dropping the popover into normal
      flow below the table. The panel stays position: fixed, which already anchors the absolutely-positioned
      .twc-dt__pop-grip; per-field handles anchor to their own position: relative .twc-dt__f-* fields. */
-  width: var(--twc-dt-panel-w, 580px); max-width: calc(100vw - 32px);
+  width: var(--twc-dt-panel-w, 620px); max-width: calc(100vw - 32px);
   height: var(--twc-dt-panel-h, auto); max-height: calc(100vh - 32px);
   display: flex; flex-direction: column;
 }
@@ -9197,6 +9261,9 @@ function Datatable({
   searchable = true,
   quickFilter,
   onQuickFilterChange,
+  filterLogic: filterLogicProp,
+  defaultFilterLogic = "and",
+  onFilterLogicChange,
   toolbarActions,
   resizableFilters = true,
   resizablePopovers = true,
@@ -9290,7 +9357,14 @@ function Datatable({
   });
   const [sort, setSort] = React51__namespace.default.useState(null);
   const [filters, setFilters] = React51__namespace.default.useState([]);
-  const [filterLogic, setFilterLogic] = React51__namespace.default.useState("and");
+  const filterLogicControlled = filterLogicProp !== void 0;
+  const [filterLogicInternal, setFilterLogicInternal] = React51__namespace.default.useState(defaultFilterLogic === "or" ? "or" : "and");
+  const filterLogic = filterLogicControlled ? filterLogicProp === "or" ? "or" : "and" : filterLogicInternal;
+  const setFilterLogic = (next) => {
+    const v = next === "or" ? "or" : "and";
+    if (!filterLogicControlled) setFilterLogicInternal(v);
+    onFilterLogicChange?.(v);
+  };
   const [hidden, setHidden] = React51__namespace.default.useState(() => /* @__PURE__ */ new Set());
   const [showRowNum, setShowRowNum] = React51__namespace.default.useState(rowNumbers);
   const [wrapped, setWrapped] = React51__namespace.default.useState(() => new Set((columns || []).filter((c) => c.wrapText).map((c) => c.field)));
@@ -9386,7 +9460,7 @@ function Datatable({
     if (!s || typeof s !== "object") return;
     const known = new Set(cols.map((c) => c.field).filter(Boolean));
     if (Array.isArray(s.filters)) setFilters(s.filters.filter((f) => f && known.has(f.field)).map((f, i) => ({ id: Date.now() + Math.random() + i, field: f.field, op: f.op, value: f.value })));
-    if (s.filterLogic === "or" || s.filterLogic === "and") setFilterLogic(s.filterLogic);
+    if ((s.filterLogic === "or" || s.filterLogic === "and") && !filterLogicControlled) setFilterLogicInternal(s.filterLogic);
     if ("sort" in s) setSort(s.sort && known.has(s.sort.field) ? { field: s.sort.field, dir: s.sort.dir === "desc" ? "desc" : "asc" } : null);
     if (typeof s.quickFilter === "string" && quickFilter === void 0) setInternalQuick(s.quickFilter);
     if (typeof s.page === "number" && !pageControlled) setInternalPage(Math.max(0, Math.floor(s.page)));
@@ -9591,6 +9665,8 @@ function Datatable({
   const colMenuRef = React51__namespace.default.useRef(null);
   const rowMenuRef = React51__namespace.default.useRef(null);
   const exportMenuRef = React51__namespace.default.useRef(null);
+  const quickSearchRef = React51__namespace.default.useRef(null);
+  const colSearchRef = React51__namespace.default.useRef(null);
   function focusFirstItem(container) {
     if (!container) return;
     const first = container.querySelector('[role="menuitem"]:not([disabled])');
@@ -10777,7 +10853,7 @@ function Datatable({
       const pad2 = trigger ? (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0) : 24;
       const chrome = pad2 + 8 + 16 + 4;
       const widest = (labels) => labels.reduce((m, l) => Math.max(m, ctx.measureText(String(l)).width), 0);
-      const colCap = Math.max(118, Math.min(210, el.clientWidth - 118 - 30 - 140 - 3 * 6 - 2 * 4));
+      const colCap = Math.max(118, Math.min(210, el.clientWidth - DT_FILTER_LOGIC_W - 118 - 30 - 30 - 140 - 5 * 6 - 2 * 4));
       const colW = Math.min(colCap, Math.max(118, Math.ceil(widest(filterableCols.map((c) => c.headerName ?? c.field)) + chrome)));
       const opW = Math.min(170, Math.max(118, Math.ceil(widest(ALL_OP_LABELS) + chrome)));
       if (Number.isFinite(colW)) el.style.setProperty("--twc-dt-fcol-fit", `${colW}px`);
@@ -10809,7 +10885,7 @@ function Datatable({
     if (field === "op") return filterFieldMaxWidth || 260;
     const p = filterPanelRef.current;
     if (!p) return 640;
-    return clampNum(p.clientWidth - fLiveW("col") - fLiveW("op") - 30 - 24, F_MIN.val, 640);
+    return clampNum(p.clientWidth - DT_FILTER_LOGIC_W - fLiveW("col") - fLiveW("op") - 30 - 30 - 5 * 6 - 2 * 4, F_MIN.val, 640);
   };
   const isRtl = () => {
     const p = filterPanelRef.current;
@@ -11506,7 +11582,7 @@ function Datatable({
             } else {
               setPanel("filters");
               setColMenu(null);
-              openPanel(e.currentTarget, "left", 580);
+              openPanel(e.currentTarget, "left", DT_FILTER_PANEL_W);
             }
           },
           children: [
@@ -11605,7 +11681,11 @@ function Datatable({
       ] }) : null,
       searchable ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__search", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.search }),
-        /* @__PURE__ */ jsxRuntime.jsx("input", { placeholder: "Search\u2026", "aria-label": "Search rows", value: quick, onChange: (e) => commitQuick(e.target.value) })
+        /* @__PURE__ */ jsxRuntime.jsx("input", { ref: quickSearchRef, placeholder: "Search\u2026", "aria-label": "Search rows", value: quick, onChange: (e) => commitQuick(e.target.value) }),
+        quick ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__search-clear", "aria-label": "Clear search", onMouseDown: (e) => e.preventDefault(), onClick: () => {
+          commitQuick("");
+          quickSearchRef.current?.focus();
+        }, children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.x }) }) : null
       ] }) : null
     ] }),
     !pivotActive && activeGroupBy.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__groupbar", children: [
@@ -12070,7 +12150,7 @@ function Datatable({
                 closeMenu();
                 restoreTriggerFocus();
                 setPanel("filters");
-                openPanel(document.querySelector(".twc-dt__toolbar .twc-dt__tbtn:nth-child(2)"), "left", 580);
+                openPanel(document.querySelector(".twc-dt__toolbar .twc-dt__tbtn:nth-child(2)"), "left", DT_FILTER_PANEL_W);
               }, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.filter }),
                 " Filter"
@@ -12198,7 +12278,11 @@ function Datatable({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__col-search", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.search }),
-        /* @__PURE__ */ jsxRuntime.jsx("input", { autoFocus: true, placeholder: "Find column\u2026", "aria-label": "Find column", value: colQuery, onChange: (e) => setColQuery(e.target.value) })
+        /* @__PURE__ */ jsxRuntime.jsx("input", { ref: colSearchRef, autoFocus: true, placeholder: "Find column\u2026", "aria-label": "Find column", value: colQuery, onChange: (e) => setColQuery(e.target.value) }),
+        colQuery ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__search-clear", "aria-label": "Clear column search", onMouseDown: (e) => e.preventDefault(), onClick: () => {
+          setColQuery("");
+          colSearchRef.current?.focus();
+        }, children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.x }) }) : null
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__col-list", children: [
         rowNumMatch ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__col-row", onClick: () => setShowRowNum((v) => !v), children: [
@@ -12500,10 +12584,6 @@ function Datatable({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__panel-head", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__panel-title", children: "Filters" }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
-              filters.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__flogic", role: "group", "aria-label": "Combine filters with", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__flogic-btn", "data-active": filterLogic === "and" || void 0, "aria-pressed": filterLogic === "and", onClick: () => setFilterLogic("and"), children: "AND" }),
-                /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__flogic-btn", "data-active": filterLogic === "or" || void 0, "aria-pressed": filterLogic === "or", onClick: () => setFilterLogic("or"), children: "OR" })
-              ] }) : null,
               resizableFilters && hasFilterSizeOverride ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__link", onClick: resetFilterSizes, children: "Reset sizes" }) : null,
               filters.length ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__link", onClick: () => setFilters([]), children: "Clear all" }) : null
             ] })
@@ -12513,6 +12593,17 @@ function Datatable({
             const ops = opsFor(filterTypeOf(col));
             const op = ops.find((o) => o.value === f.op) || ops[0];
             return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__frow", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__f-logic", children: i === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__f-where", children: "Where" }) : i === 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+                Select,
+                {
+                  size: "sm",
+                  portal: true,
+                  "aria-label": "Combine with the other filters",
+                  value: filterLogic,
+                  options: [{ value: "and", label: "And" }, { value: "or", label: "Or" }],
+                  onChange: (v) => setFilterLogic(v)
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__f-where", children: filterLogic === "or" ? "Or" : "And" }) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__f-col", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   Select,
@@ -12568,6 +12659,7 @@ function Datatable({
                   Input,
                   {
                     size: "sm",
+                    clearable: true,
                     type: filterTypeOf(col) === "number" ? "number" : "text",
                     placeholder: "Value",
                     value: f.value,
@@ -12591,7 +12683,7 @@ function Datatable({
               role: "slider",
               tabIndex: 0,
               "aria-label": "Resize filters panel (Enter to reset)",
-              "aria-valuetext": `Width ${Math.round(fPanelSize?.w ?? 580)} pixels, height ${fPanelSize?.h != null ? Math.round(fPanelSize.h) + " pixels" : "auto"}`,
+              "aria-valuetext": `Width ${Math.round(fPanelSize?.w ?? DT_FILTER_PANEL_W)} pixels, height ${fPanelSize?.h != null ? Math.round(fPanelSize.h) + " pixels" : "auto"}`,
               onPointerDown: startPanelResize,
               onKeyDown: onPanelGripKey,
               onDoubleClick: (e) => {
@@ -17656,6 +17748,12 @@ var TEXTAREA_CSS = `
 .twc-textarea__el:disabled { background: var(--color-surface-sunken); opacity: 0.7; cursor: not-allowed; }
 .twc-textarea__el[data-readonly] { background: var(--color-surface-sunken); }
 .twc-textarea__el[data-autosize="true"] { resize: none; overflow: hidden; }
+/* #328: clearable (X). Wrap positions the button top-inline-end so it dodges the bottom-right resize handle. */
+.twc-textarea__wrap { position: relative; display: block; }
+.twc-textarea__clear { position: absolute; top: 6px; inset-inline-end: 8px; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: none; background: var(--color-surface); color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-sm); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.twc-textarea__clear:hover { background: var(--color-surface-sunken); color: var(--color-text); }
+.twc-textarea__clear:focus-visible { outline: none; box-shadow: var(--ring); }
+.twc-textarea__clear svg { width: 15px; height: 15px; }
 .twc-field__footer { display: flex; align-items: center; gap: var(--space-2); }
 .twc-field__count { margin-inline-start: auto; font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; flex: none; }
 .twc-field__count[data-danger="true"] { color: var(--color-danger-subtle-fg); }
@@ -17672,6 +17770,7 @@ var Textarea = React51__namespace.default.forwardRef(function Textarea2({
   minRows,
   maxRows,
   showCount = false,
+  clearable = false,
   disabled = false,
   id,
   className = "",
@@ -17718,8 +17817,18 @@ var Textarea = React51__namespace.default.forwardRef(function Textarea2({
   };
   const handleChange = (e) => {
     rest.onChange?.(e);
-    if (showCount && !countControlled) setLen(e.target.value.length);
+    if ((showCount || clearable) && !countControlled) setLen(e.target.value.length);
   };
+  const clearField = () => {
+    const el = innerRef.current;
+    if (!el) return;
+    const setter = typeof HTMLTextAreaElement !== "undefined" && Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")?.set;
+    if (setter) setter.call(el, "");
+    else el.value = "";
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+    el.focus();
+  };
+  const showClear = clearable && count > 0 && !disabled && !rest.readOnly;
   const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
   const describedBy = [error || hint ? descId : null, showCounter ? countId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, children: [
@@ -17728,27 +17837,33 @@ var Textarea = React51__namespace.default.forwardRef(function Textarea2({
       label,
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-field__req", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
-      {
-        ref: setRef,
-        id: fieldId,
-        className: "twc-textarea__el",
-        "data-size": size,
-        "data-tone": tone,
-        "data-autosize": autosize || void 0,
-        "data-readonly": rest.readOnly || void 0,
-        rows: autosize ? minRows ?? rows : rows,
-        disabled,
-        required: required || void 0,
-        "aria-required": required || void 0,
-        ...rest,
-        onInput: handleInput,
-        onChange: handleChange,
-        "aria-invalid": ariaInvalid,
-        "aria-describedby": describedBy
-      }
-    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-textarea__wrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          ref: setRef,
+          id: fieldId,
+          className: "twc-textarea__el",
+          "data-size": size,
+          "data-tone": tone,
+          "data-autosize": autosize || void 0,
+          "data-readonly": rest.readOnly || void 0,
+          rows: autosize ? minRows ?? rows : rows,
+          disabled,
+          required: required || void 0,
+          "aria-required": required || void 0,
+          ...rest,
+          onInput: handleInput,
+          onChange: handleChange,
+          "aria-invalid": ariaInvalid,
+          "aria-describedby": describedBy
+        }
+      ),
+      showClear ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-textarea__clear", "aria-label": "Clear", tabIndex: 0, onMouseDown: (e) => e.preventDefault(), onClick: clearField, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
+      ] }) }) : null
+    ] }),
     error || hint || showCounter ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-field__footer", children: [
       error ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__error", children: error }) : hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__hint", children: hint }) : null,
       showCounter ? /* @__PURE__ */ jsxRuntime.jsxs("span", { id: countId, className: "twc-field__count", "data-danger": near || void 0, "aria-live": "polite", children: [