@agent-native/core 0.92.10 → 0.92.12

package/corpus/templates/design/app/components/design/edit-panel/typography-helpers.ts

@@ -1,3 +1,5 @@
+import { isMixedValue, MIXED_VALUE } from "./selection-helpers";
+
 export const FONT_FAMILY_OPTIONS = [
   { value: "inherit", key: "inherit" },
   { value: "sans-serif", key: "sansSerif" },
@@ -21,8 +23,38 @@ export const FONT_WEIGHT_OPTIONS = [
   { value: "900", key: "black" },
 ] as const;
 
+/**
+ * True when `value` matches one of the nine standard FONT_WEIGHT_OPTIONS
+ * notches. Variable-font weights (e.g. "550") or a keyword the browser
+ * didn't normalize are real but "unknown" — callers should inject a
+ * synthesized option for these instead of silently rendering a Select whose
+ * value matches no item (blank dropdown, current weight still applied).
+ */
+export function isKnownFontWeight(value: string): boolean {
+  return FONT_WEIGHT_OPTIONS.some((option) => option.value === value);
+}
+
 export type TextResizeMode = "auto-width" | "auto-height" | "fixed";
 
+/**
+ * Fallback dimension used when converting a text box from an auto (width or
+ * height) resize mode to "fixed". When the box already has a real authored
+ * size (not auto), that size is preserved verbatim. Otherwise this must use
+ * the element's actual current on-screen size (`boundingSizePx`, from
+ * `boundingRect`) rather than an arbitrary constant — converting auto-width
+ * text that currently renders at, say, 340px wide to "fixed" must keep it at
+ * ~340px, not silently snap it to a hardcoded default and visibly resize it.
+ */
+export function resolveFixedResizeDimension(
+  authoredValue: string | undefined,
+  isAuto: boolean,
+  boundingSizePx: number,
+): string {
+  if (authoredValue && !isAuto) return authoredValue;
+  const size = Number.isFinite(boundingSizePx) ? Math.round(boundingSizePx) : 0;
+  return `${Math.max(1, size)}px`;
+}
+
 function cleanFontFamilyName(value: string): string {
   const trimmed = value.trim();
   if (
@@ -115,3 +147,126 @@ export function resolveFontFamilySelectValue(
   );
   return firstFamilyOption?.value ?? raw;
 }
+
+/**
+ * Mixed-selection-safe wrapper around resolveFontFamilySelectValue.
+ *
+ * A multi-selection spanning different font families injects the MIXED_VALUE
+ * sentinel string ("Mixed") into computedStyles.fontFamily (see
+ * mixedElementFromSelection/sameOrMixed in selection-helpers.ts). Feeding
+ * that sentinel straight into resolveFontFamilySelectValue happened to
+ * resolve back to the literal string "Mixed" (no option's normalized stack
+ * or first-family matches, so the raw fallback wins) — but only by
+ * coincidence, since MIXED_VALUE itself is "Mixed". Callers must not rely on
+ * that coincidence: without an explicit mixed check the caller has no signal
+ * to render the value as a disabled placeholder, so "Mixed" ends up as a
+ * normal, clickable SelectItem the user could select and commit as a literal
+ * (nonsensical) `font-family: Mixed` style. This wrapper makes the mixed
+ * state explicit so callers can branch on it the same way they already do
+ * for fontWeight/fontSize/lineHeight/letterSpacing.
+ */
+export function resolveFontFamilyFieldValue(
+  computedFontFamily: string | undefined,
+): string {
+  if (isMixedValue(computedFontFamily)) return MIXED_VALUE;
+  return resolveFontFamilySelectValue(computedFontFamily);
+}
+
+/**
+ * PERSISTENCE GOTCHA — commit text-decoration toggles through "text-decoration"
+ * (the shorthand), never "text-decoration-line" (the longhand).
+ *
+ * The persisted-source style patcher (`applyStyleEdit`/`normalizeStyleProperty`
+ * in `shared/code-layer.ts`) only writes properties on its `VisualStyleProperty`
+ * allow-list. That list has "text-decoration" but does NOT have
+ * "text-decoration-line" — so an `onStyleChange("textDecorationLine", ...)`
+ * call would normalize to the unlisted kebab name, miss the allow-list, and
+ * return "unsupported": the live iframe preview (which patches the DOM
+ * directly via `element.style.setProperty`, no allow-list) would still
+ * visually flip on the toggle tick, but the change would never reach the
+ * saved HTML source and would revert on the next load/reparse — a
+ * works-in-preview, doesn't-persist bug. The shorthand happily accepts a bare
+ * line-keyword list ("underline", "underline line-through", "none") as its
+ * value, which is valid CSS and *is* on the allow-list, so every helper below
+ * reads/writes through "text-decoration" (property name "textDecoration" from
+ * call sites) even though the bridge separately exposes the clean longhand
+ * `textDecorationLine` computed value for reading current state.
+ */
+export type TextDecorationLineToken = "underline" | "line-through" | "overline";
+
+const TEXT_DECORATION_LINE_TOKENS: readonly TextDecorationLineToken[] = [
+  "underline",
+  "line-through",
+  "overline",
+];
+
+/**
+ * Parses a text-decoration-line-ish CSS value ("none", "underline",
+ * "underline line-through", or even the full shorthand computed string like
+ * "underline solid rgb(0, 0, 0)") into the set of line tokens present. Works
+ * on either the clean longhand or the composite shorthand since it just
+ * looks for each known keyword as a whole word.
+ */
+export function parseTextDecorationLineTokens(
+  value: string | undefined,
+): Set<TextDecorationLineToken> {
+  const tokens = new Set<TextDecorationLineToken>();
+  if (!value) return tokens;
+  for (const token of TEXT_DECORATION_LINE_TOKENS) {
+    if (new RegExp(`(?:^|\\s)${token}(?:\\s|$)`).test(value)) {
+      tokens.add(token);
+    }
+  }
+  return tokens;
+}
+
+/**
+ * True when `line` is active in `value`. A mixed-selection sentinel (see
+ * `isMixedValue`) always reads as inactive — same convention every other
+ * mixed-aware field in this panel uses (fontFamily/fontWeight/fontSize/...):
+ * an indeterminate state renders as "off", not as a guess at one element's
+ * value.
+ */
+export function isTextDecorationLineActive(
+  value: string | undefined,
+  line: TextDecorationLineToken,
+): boolean {
+  if (isMixedValue(value)) return false;
+  return parseTextDecorationLineTokens(value).has(line);
+}
+
+/**
+ * Returns the "text-decoration" value to commit after toggling `line` on/off
+ * against the element's current decoration-line state. A mixed selection is
+ * treated as "no lines active yet" so the first click always turns the
+ * toggled line ON uniformly across every selected element — matching how
+ * every other Select-driven field here (fontFamily, fontWeight, ...)
+ * overwrites a mixed selection with one explicit value instead of trying to
+ * merge each element's own prior state.
+ */
+export function nextTextDecorationLineValue(
+  currentValue: string | undefined,
+  line: TextDecorationLineToken,
+): string {
+  const current = isMixedValue(currentValue)
+    ? new Set<TextDecorationLineToken>()
+    : parseTextDecorationLineTokens(currentValue);
+  if (current.has(line)) current.delete(line);
+  else current.add(line);
+  return current.size === 0 ? "none" : Array.from(current).join(" ");
+}
+
+/**
+ * text-transform options (Figma's "Case" control). Unlike font-family/weight,
+ * "text-transform" is already on the persisted-source `VisualStyleProperty`
+ * allow-list under its own name, so callers can commit it directly with
+ * `onStyleChange("textTransform", value)` — no shorthand workaround needed.
+ */
+export const TEXT_CASE_OPTIONS = [
+  { value: "none", key: "none" },
+  { value: "uppercase", key: "uppercase" },
+  { value: "lowercase", key: "lowercase" },
+  { value: "capitalize", key: "capitalize" },
+] as const;
+
+export type TextCaseValue = (typeof TEXT_CASE_OPTIONS)[number]["value"];

package/corpus/templates/design/app/components/design/edit-panel/typography-properties.tsx

@@ -10,9 +10,15 @@ import {
   IconLayoutAlignMiddle,
   IconLayoutAlignTop,
   IconLetterCase,
+  IconLetterCaseLower,
+  IconLetterCaseToggle,
+  IconLetterCaseUpper,
   IconLetterSpacing,
   IconLineHeight,
   IconSquare,
+  IconStrikethrough,
+  IconTextSize,
+  IconUnderline,
 } from "@tabler/icons-react";
 import { useState } from "react";
 
@@ -45,12 +51,22 @@ import { PanelSection } from "./panel-primitives";
 import { roundToOneDecimal } from "./position-helpers";
 import { isMixedValue, MIXED_VALUE } from "./selection-helpers";
 import type { StyleChangeHandler } from "./style-change-types";
-import { parseNumericValue, resolveLineHeight } from "./style-options";
+import {
+  optionValue,
+  parseNumericValue,
+  resolveLineHeight,
+} from "./style-options";
 import {
   displayFontFamilyName,
   FONT_FAMILY_OPTIONS,
   FONT_WEIGHT_OPTIONS,
-  resolveFontFamilySelectValue,
+  isKnownFontWeight,
+  isTextDecorationLineActive,
+  nextTextDecorationLineValue,
+  resolveFixedResizeDimension,
+  resolveFontFamilyFieldValue,
+  TEXT_CASE_OPTIONS,
+  type TextDecorationLineToken,
   type TextResizeMode,
 } from "./typography-helpers";
 
@@ -90,14 +106,76 @@ function TextResizeControls({
   );
 }
 
+type TypographyDetailsTab = "basics" | "details";
+
+/**
+ * The tab bar's "Basics"/"Details" buttons are a real tab list (not the
+ * static, non-interactive spans this replaced) — see the module-level note
+ * near `TypographyDetailsPopover` for why the third "Variable" tab was
+ * dropped instead of wired up.
+ */
+function TypographyDetailsTabButton({
+  label,
+  active,
+  onClick,
+}: {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={active}
+      onClick={onClick}
+      className={cn(
+        "cursor-pointer rounded px-2.5 py-1 !text-[11px] font-medium text-muted-foreground",
+        active &&
+          "bg-[var(--design-editor-panel-raised-bg)] font-semibold text-foreground",
+      )}
+    >
+      {label}
+    </button>
+  );
+}
+
+/**
+ * Text decoration (underline/strikethrough) and case (none/uppercase/
+ * lowercase/capitalize) live here, in the popover's "Details" tab, rather
+ * than as a 5th always-visible row in the compact panel above — matching
+ * Figma, which tucks these into the same type-details flyout instead of the
+ * always-on compact type row. Deliberately NOT duplicating line-height /
+ * letter-spacing here even though Figma's flyout also shows them: this
+ * panel's compact row (see TypographyProperties below) already exposes both
+ * as always-visible, directly-editable fields, so a second live-editable
+ * copy of the exact same property here would be redundant clutter and an
+ * easy source of two-inputs-fighting-the-same-value bugs, not a feature.
+ */
 function TypographyDetailsPopover({
   resizeMode,
   onResizeModeChange,
+  underlineActive,
+  strikethroughActive,
+  onToggleUnderline,
+  onToggleStrikethrough,
+  textCase,
+  textCaseIsMixed,
+  onTextCaseChange,
 }: {
   resizeMode: TextResizeMode;
   onResizeModeChange: (mode: TextResizeMode) => void;
+  underlineActive: boolean;
+  strikethroughActive: boolean;
+  onToggleUnderline: () => void;
+  onToggleStrikethrough: () => void;
+  textCase: string;
+  textCaseIsMixed: boolean;
+  onTextCaseChange: (value: string) => void;
 }) {
+  const t = useT();
   const [open, setOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState<TypographyDetailsTab>("basics");
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -131,32 +209,99 @@ function TypographyDetailsPopover({
         className="z-[100010] w-[360px] rounded-xl border-[var(--design-editor-control-border)] bg-[var(--design-editor-panel-bg)] p-0 text-foreground shadow-2xl"
       >
         <div className="flex items-center gap-1 border-b border-[var(--design-editor-control-border)] p-2.5">
-          <div className="flex rounded-md bg-[var(--design-editor-control-bg)] p-0.5">
-            <span className="rounded bg-[var(--design-editor-panel-raised-bg)] px-2.5 py-1 !text-[11px] font-semibold text-foreground">
-              {"Basics" /* i18n-ignore design typography details tab */}
-            </span>
-            <span className="px-2.5 py-1 !text-[11px] font-medium text-muted-foreground">
-              {"Details" /* i18n-ignore design typography details tab */}
-            </span>
-            <span className="px-2.5 py-1 !text-[11px] font-medium text-muted-foreground">
-              {"Variable" /* i18n-ignore design typography details tab */}
-            </span>
+          <div
+            role="tablist"
+            className="flex rounded-md bg-[var(--design-editor-control-bg)] p-0.5"
+          >
+            <TypographyDetailsTabButton
+              label={t("editPanel.typographyDetails.basicsTab")}
+              active={activeTab === "basics"}
+              onClick={() => setActiveTab("basics")}
+            />
+            <TypographyDetailsTabButton
+              label={t("editPanel.typographyDetails.detailsTab")}
+              active={activeTab === "details"}
+              onClick={() => setActiveTab("details")}
+            />
           </div>
         </div>
-        <div className="space-y-3 p-4 !text-[11px]">
-          <div className="flex h-20 items-center justify-center rounded-md bg-[var(--design-editor-control-bg)] text-[18px] text-muted-foreground/80">
-            {"Preview" /* i18n-ignore design typography details preview */}
+        {activeTab === "basics" ? (
+          <div className="space-y-3 p-4 !text-[11px]">
+            <div className="flex h-20 items-center justify-center rounded-md bg-[var(--design-editor-control-bg)] text-[18px] text-muted-foreground/80">
+              {"Preview" /* i18n-ignore design typography details preview */}
+            </div>
+            <div className="flex items-center justify-between gap-3">
+              <span className="!text-[11px] font-medium text-muted-foreground">
+                {"Text box" /* i18n-ignore design typography details label */}
+              </span>
+              <TextResizeControls
+                resizeMode={resizeMode}
+                onResizeModeChange={onResizeModeChange}
+              />
+            </div>
           </div>
-          <div className="flex items-center justify-between gap-3">
-            <span className="!text-[11px] font-medium text-muted-foreground">
-              {"Text box" /* i18n-ignore design typography details label */}
-            </span>
-            <TextResizeControls
-              resizeMode={resizeMode}
-              onResizeModeChange={onResizeModeChange}
-            />
+        ) : (
+          <div className="space-y-3 p-4 !text-[11px]">
+            <div className="flex items-center justify-between gap-3">
+              <span className="!text-[11px] font-medium text-muted-foreground">
+                {t("editPanel.typographyDetails.decorationLabel")}
+              </span>
+              <InspectorSegment>
+                <InspectorIconButton
+                  label={t("editPanel.textDecorations.underline")}
+                  shortcut="⌘U"
+                  active={underlineActive}
+                  onClick={onToggleUnderline}
+                >
+                  <IconUnderline className="size-3.5" />
+                </InspectorIconButton>
+                <InspectorIconButton
+                  label={t("editPanel.textDecorations.strikethrough")}
+                  shortcut="⌘⇧X"
+                  active={strikethroughActive}
+                  onClick={onToggleStrikethrough}
+                >
+                  <IconStrikethrough className="size-3.5" />
+                </InspectorIconButton>
+              </InspectorSegment>
+            </div>
+            <div className="flex items-center justify-between gap-3">
+              <span className="!text-[11px] font-medium text-muted-foreground">
+                {t("editPanel.typographyDetails.caseLabel")}
+              </span>
+              <InspectorSegment>
+                <InspectorIconButton
+                  label={t("editPanel.textCases.none")}
+                  active={!textCaseIsMixed && textCase === "none"}
+                  onClick={() => onTextCaseChange("none")}
+                >
+                  <IconLetterCase className="size-3.5" />
+                </InspectorIconButton>
+                <InspectorIconButton
+                  label={t("editPanel.textCases.uppercase")}
+                  active={!textCaseIsMixed && textCase === "uppercase"}
+                  onClick={() => onTextCaseChange("uppercase")}
+                >
+                  <IconLetterCaseUpper className="size-3.5" />
+                </InspectorIconButton>
+                <InspectorIconButton
+                  label={t("editPanel.textCases.lowercase")}
+                  active={!textCaseIsMixed && textCase === "lowercase"}
+                  onClick={() => onTextCaseChange("lowercase")}
+                >
+                  <IconLetterCaseLower className="size-3.5" />
+                </InspectorIconButton>
+                <InspectorIconButton
+                  label={t("editPanel.textCases.capitalize")}
+                  active={!textCaseIsMixed && textCase === "capitalize"}
+                  onClick={() => onTextCaseChange("capitalize")}
+                >
+                  <IconLetterCaseToggle className="size-3.5" />
+                </InspectorIconButton>
+              </InspectorSegment>
+            </div>
           </div>
-        </div>
+        )}
       </PopoverContent>
     </Popover>
   );
@@ -176,24 +321,6 @@ export function TypographyProperties({
     value: option.value,
     label: t(`editPanel.fontFamilies.${option.key}`),
   }));
-  const fontFamily = resolveFontFamilySelectValue(styles.fontFamily);
-  const fontFamilyOptions = FONT_FAMILY_OPTIONS.some(
-    (option) => option.value === fontFamily,
-  )
-    ? baseFontFamilyOptions
-    : [
-        {
-          value: fontFamily,
-          label: displayFontFamilyName(styles.fontFamily || fontFamily),
-        },
-        ...baseFontFamilyOptions,
-      ];
-  const fontWeightOptions = FONT_WEIGHT_OPTIONS.map((option) => ({
-    value: option.value,
-    label: t(`editPanel.fontWeights.${option.key}`),
-  }));
-  const textAlign = styles.textAlign || "left";
-
   // Mixed-selection guards: a multi-selection with differing values injects
   // the MIXED_VALUE sentinel string into these computedStyles fields (see
   // mixedElementFromSelection/sameOrMixed). Parsing that sentinel with
@@ -202,10 +329,75 @@ export function TypographyProperties({
   // fabricated 0 (size), 1.2 (line-height), or blank (tracking) rather than
   // the Mixed state ScrubInput already knows how to render — same pattern as
   // the rotation field above.
+  const fontFamilyIsMixed = isMixedValue(styles.fontFamily);
   const fontWeightIsMixed = isMixedValue(styles.fontWeight);
   const fontSizeIsMixed = isMixedValue(styles.fontSize);
   const lineHeightIsMixed = isMixedValue(styles.lineHeight);
   const letterSpacingIsMixed = isMixedValue(styles.letterSpacing);
+  const textTransformIsMixed = isMixedValue(styles.textTransform);
+
+  // Text decoration (underline/strikethrough) reads through the bridge's
+  // clean `textDecorationLine` computed longhand (never the composite
+  // `textDecoration` shorthand string, which also carries style/color) but
+  // WRITES commit through the "textDecoration" property name — see
+  // nextTextDecorationLineValue's doc comment in typography-helpers.ts for
+  // why the longhand isn't on the persisted-source style allow-list.
+  const underlineActive = isTextDecorationLineActive(
+    styles.textDecorationLine,
+    "underline",
+  );
+  const strikethroughActive = isTextDecorationLineActive(
+    styles.textDecorationLine,
+    "line-through",
+  );
+  const toggleTextDecorationLine = (line: TextDecorationLineToken) => {
+    onStyleChange(
+      "textDecoration",
+      nextTextDecorationLineValue(styles.textDecorationLine, line),
+    );
+  };
+  // Mixed-selection guard mirrors fontWeight/fontFamily above: an
+  // indeterminate case across the selection renders with none of the four
+  // options highlighted rather than guessing one element's value.
+  const textCase = textTransformIsMixed
+    ? "none"
+    : optionValue(TEXT_CASE_OPTIONS, styles.textTransform, "none");
+  const setTextCase = (value: string) => onStyleChange("textTransform", value);
+
+  // resolveFontFamilyFieldValue returns the MIXED_VALUE sentinel unchanged
+  // when the selection differs so the Select below can render it as an
+  // explicit disabled placeholder (matching fontWeight's pattern just below)
+  // instead of a normal, clickable option that could commit the literal
+  // string "Mixed" as a font-family value.
+  const fontFamily = resolveFontFamilyFieldValue(styles.fontFamily);
+  const fontFamilyOptions = fontFamilyIsMixed
+    ? baseFontFamilyOptions
+    : FONT_FAMILY_OPTIONS.some((option) => option.value === fontFamily)
+      ? baseFontFamilyOptions
+      : [
+          {
+            value: fontFamily,
+            label: displayFontFamilyName(styles.fontFamily || fontFamily),
+          },
+          ...baseFontFamilyOptions,
+        ];
+  const baseFontWeightOptions = FONT_WEIGHT_OPTIONS.map((option) => ({
+    value: option.value,
+    label: t(`editPanel.fontWeights.${option.key}`),
+  }));
+  // Non-mixed but not one of the nine standard notches (e.g. a variable-font
+  // weight like "550") needs the same synthesized-option treatment as an
+  // unknown font family — otherwise the Select's value matches no item and
+  // renders blank even though the real weight is still applied.
+  const currentFontWeight = styles.fontWeight || "400";
+  const fontWeightOptions =
+    fontWeightIsMixed || isKnownFontWeight(currentFontWeight)
+      ? baseFontWeightOptions
+      : [
+          { value: currentFontWeight, label: currentFontWeight },
+          ...baseFontWeightOptions,
+        ];
+  const textAlign = styles.textAlign || "left";
 
   // M1 · Text resizing mode (auto-width / auto-height / fixed). the design
   // editor's text nodes always expose this segment. Read authored
@@ -240,8 +432,20 @@ export function TypographyProperties({
       : !heightIsAuto && !widthIsAuto
         ? "fixed"
         : "auto-height";
-  const currentWidth = styles.width && !widthIsAuto ? styles.width : "200px";
-  const currentHeight = styles.height && !heightIsAuto ? styles.height : "48px";
+  // Fall back to the element's actual current on-screen size (not an
+  // arbitrary constant) when there's no real authored size yet — converting
+  // auto-width/auto-height text to "fixed" must preserve its current
+  // rendered size instead of visibly snapping it to a hardcoded default.
+  const currentWidth = resolveFixedResizeDimension(
+    styles.width,
+    widthIsAuto,
+    element.boundingRect.width,
+  );
+  const currentHeight = resolveFixedResizeDimension(
+    styles.height,
+    heightIsAuto,
+    element.boundingRect.height,
+  );
   const setResizeMode = (mode: TextResizeMode) => {
     if (mode === "auto-width") {
       onStyleChange("width", "max-content");
@@ -318,6 +522,15 @@ export function TypographyProperties({
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
+            {fontFamilyIsMixed ? (
+              <SelectItem
+                value={MIXED_VALUE}
+                disabled
+                className="!text-[11px] text-muted-foreground"
+              >
+                {MIXED_VALUE}
+              </SelectItem>
+            ) : null}
             {fontFamilyOptions.map((opt) => (
               <SelectItem
                 key={opt.value}
@@ -334,7 +547,7 @@ export function TypographyProperties({
       {/* Row 2: weight + size side by side */}
       <div className="grid grid-cols-2 gap-1.5">
         <Select
-          value={fontWeightIsMixed ? MIXED_VALUE : styles.fontWeight || "400"}
+          value={fontWeightIsMixed ? MIXED_VALUE : currentFontWeight}
           onValueChange={(v) => onStyleChange("fontWeight", v)}
         >
           <SelectTrigger className="h-6 rounded-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-1.5 !text-[11px] shadow-none focus:ring-1 focus:ring-[var(--design-editor-accent-color)]">
@@ -364,7 +577,7 @@ export function TypographyProperties({
         <ScrubInput
           label={t("editPanel.labels.size")}
           ariaLabel={t("editPanel.labels.size")}
-          icon={IconLetterCase}
+          icon={IconTextSize}
           value={
             fontSizeIsMixed
               ? 0
@@ -493,6 +706,15 @@ export function TypographyProperties({
           <TypographyDetailsPopover
             resizeMode={resizeMode}
             onResizeModeChange={setResizeMode}
+            underlineActive={underlineActive}
+            strikethroughActive={strikethroughActive}
+            onToggleUnderline={() => toggleTextDecorationLine("underline")}
+            onToggleStrikethrough={() =>
+              toggleTextDecorationLine("line-through")
+            }
+            textCase={textCase}
+            textCaseIsMixed={textTransformIsMixed}
+            onTextCaseChange={setTextCase}
           />
         </div>
       </div>