From 03a70d27a3432ef6e50c6aa97942f6bc576684c0 Mon Sep 17 00:00:00 2001
From: Senko-san <senko@Senko-sans-Mac-mini.local>
Date: Sat, 11 Jul 2026 16:18:26 +0300
Subject: [PATCH] chore: textfield visuals fixed

---
 src/components/text-field/index.tsx | 55 ++++++++++++++++-------------
 src/stories/TextField.stories.tsx   |  6 +++-
 src/styles/components.css           |  9 ++++-
 3 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/src/components/text-field/index.tsx b/src/components/text-field/index.tsx
index d40da22..de1e49a 100644
--- a/src/components/text-field/index.tsx
+++ b/src/components/text-field/index.tsx
@@ -63,11 +63,16 @@ function diffChars(prev: ReadonlyArray<{ id: number; char: string }>, next: stri
   return { reusedId, keptPrev };
 }
 
+/** Browsers render password glyphs as this bullet; match it in the overlay
+ *  so animated fields don't leak the real characters visually. */
+const PASSWORD_MASK_CHAR = '•';
+
 function useFieldAnimation(
   multiline: boolean,
   externalRef: Ref<FieldElement>,
   controlledValue: ComponentPropsWithoutRef<'input'>['value'],
   initial: ComponentPropsWithoutRef<'input'>['defaultValue'],
+  masked = false,
 ) {
   const innerRef = useRef<FieldElement | null>(null);
   const overlayRef = useRef<HTMLDivElement | null>(null);
@@ -144,33 +149,34 @@ function useFieldAnimation(
 
   const overlay = (
     <div
-      ref={overlayRef}
       aria-hidden="true"
       className={cx('modern-sk-field-overlay', multiline && 'modern-sk-field-overlay--multiline')}
     >
-      {entries.map((e) =>
-        e.leaving ? (
-          <span
-            key={`${idPrefix}-${e.id}`}
-            className="modern-sk-field-char modern-sk-field-char--leaving"
-            style={{ left: e.x, top: e.y }}
-            onAnimationEnd={() => onLeaveEnd(e.id)}
-          >
-            {e.char}
-          </span>
-        ) : (
-          <span
-            key={`${idPrefix}-${e.id}`}
-            ref={(node) => {
-              if (node) spanRefs.current.set(e.id, node);
-              else spanRefs.current.delete(e.id);
-            }}
-            className={cx('modern-sk-field-char', !multiline && 'modern-sk-field-char--composited')}
-          >
-            {e.char}
-          </span>
-        ),
-      )}
+      <div ref={overlayRef} className="modern-sk-field-overlay-content">
+        {entries.map((e) =>
+          e.leaving ? (
+            <span
+              key={`${idPrefix}-${e.id}`}
+              className="modern-sk-field-char modern-sk-field-char--leaving"
+              style={{ left: e.x, top: e.y }}
+              onAnimationEnd={() => onLeaveEnd(e.id)}
+            >
+              {masked ? PASSWORD_MASK_CHAR : e.char}
+            </span>
+          ) : (
+            <span
+              key={`${idPrefix}-${e.id}`}
+              ref={(node) => {
+                if (node) spanRefs.current.set(e.id, node);
+                else spanRefs.current.delete(e.id);
+              }}
+              className={cx('modern-sk-field-char', !multiline && 'modern-sk-field-char--composited')}
+            >
+              {masked ? PASSWORD_MASK_CHAR : e.char}
+            </span>
+          ),
+        )}
+      </div>
     </div>
   );
 
@@ -187,6 +193,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       ref,
       props.value,
       props.defaultValue,
+      props.type === 'password',
     );
     if (!animated) {
       return (
diff --git a/src/stories/TextField.stories.tsx b/src/stories/TextField.stories.tsx
index f81905e..1fd4fc9 100644
--- a/src/stories/TextField.stories.tsx
+++ b/src/stories/TextField.stories.tsx
@@ -34,7 +34,9 @@ export const Playground: Story = {};
 export const Disabled: Story = { args: { disabled: true, value: 'Read only' } };
 
 export const Multiline: Story = {
-  render: () => <TextArea rows={4} placeholder="Multiple lines…" style={{ width: 320 }} />,
+  render: () => (
+    <TextArea rows={4} placeholder="Multiple lines…" style={{ width: 320 }} />
+  ),
 };
 
 export const Search: Story = {
@@ -46,3 +48,5 @@ export const Search: Story = {
     />
   ),
 };
+
+export const Password: Story = { args: { type: 'password', defaultValue: 'hi!' } };
diff --git a/src/styles/components.css b/src/styles/components.css
index dc6b30f..840aeb0 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -215,6 +215,7 @@ textarea.modern-sk-field {
 .modern-sk-search .ph {
   position: absolute;
   left: 11px;
+  z-index: 1;
   color: var(--fg-3);
   font-size: 16px;
   pointer-events: none;
@@ -255,13 +256,19 @@ textarea.modern-sk-field {
   color: var(--fg-1);
   white-space: pre;
   text-align: left;
-  will-change: transform;
 }
 .modern-sk-field-overlay--multiline {
   white-space: pre-wrap;
   overflow-wrap: break-word;
   line-height: 1.5;
 }
+/* Scroll-sync transform lives on this inner div, not the clipping parent above —
+   transforming the overflow:hidden box itself would drag its clip region along
+   with the content and let overflowing lines spill outside the field's border. */
+.modern-sk-field-overlay-content {
+  position: relative;
+  will-change: transform;
+}
 .modern-sk-search .modern-sk-field-overlay {
   padding-left: 34px;
 }