@satinhq/kit 0.1.0-beta.2 → 0.1.0-beta.3

package/dist/styles.css

@@ -922,7 +922,7 @@ body[data-satin-document='true'],
   gap: 8px;
   margin-top: 16px;
 }
-/* SwiftUI ContentUnavailableView fixture: 40.5pt symbol, 20pt label gap,
+/* ContentUnavailableView geometry: 40.5pt symbol, 20pt label gap,
  * 3pt description gap and 30pt to the 15pt action label. Keep its 44pt hit area. */
 [data-satin-offline='full-screen'] {
   padding: 20px;
@@ -2972,7 +2972,7 @@ body[data-satin-document='true'],
 [data-satin-toolbar-item] {
   display: contents;
 }
-/* SwiftUI ToolbarSpacer: a fixed spacer leaves the standard 12 pt between two items' glass
+/* ToolbarSpacer: a fixed spacer leaves the standard 12 pt between two items' glass
    (iOS 27.0 native reference: 44 pt circles at 320 and 376; bottom bar 48 pt circles at 166 and 226). */
 [data-satin-toolbar-spacer='fixed'] {
   width: 12px;
@@ -3349,14 +3349,14 @@ body[data-satin-document='true'],
   --satin-section-header-size: 17px;
   --satin-section-header-line-height: 20.333333px;
   --satin-section-header-weight: 600;
-  /* SwiftUI secondary foreground is half-opacity primary over the cell fill. */
+  /* Secondary foreground uses half-opacity primary over the cell fill. */
   --satin-list-secondary: rgb(0 0 0 / 50%);
 }
 [data-satin-list] {
   width: 100%;
   color: var(--satin-list-label, #000);
 }
-/* A List is flexible like SwiftUI's: in a stack it takes the remaining space (reference nested-form pair). */
+/* A List is flexible: in a stack it takes the remaining space (reference nested-form pair). */
 :where([data-satin-list]) {
   --satin-list-row-min-height: var(--satin-settings-root-row-height, 52px);
   flex-grow: 1;
@@ -3452,7 +3452,7 @@ body[data-satin-document='true'],
 [data-satin-list='plain'] [data-satin-section-rows='true'] {
   border-radius: 0;
 }
-/* A grouped List paints systemGroupedBackground wherever it is placed, as SwiftUI's does, including a
+/* A grouped List paints systemGroupedBackground wherever it is placed, including a
    Form nested below other content (reference nested-form pairs). The status band samples it. */
 [data-satin-list='insetGrouped']:not(:where([data-satin-scroll-content-background='hidden'])),
 [data-satin-list='grouped']:not(:where([data-satin-scroll-content-background='hidden'])) {
@@ -3465,7 +3465,7 @@ body[data-satin-document='true'],
   background: #000;
 }
 /* Inside a sheet the sheet's own material is the one surface (native iOS 27 native reference, iPhone Form
-   sheet): a grouped List paints no background of its own. At medium the sheet is Liquid Glass and
+   sheet): a grouped List paints no background of its own. At medium the sheet is glass and
    its cells are a grey fill on it (118 118 128: light 216 on 231 at 12%, dark 61 on 46 at 22%),
    separators 195 / 89 and off switch tracks 138 / 112 on them; at large it is opaque and elevated,
    cells 255 on 242 (light) and 44 on 28 (dark), separators 232 / 64, off tracks 197 / 101. All of
@@ -3510,7 +3510,7 @@ body[data-satin-document='true'],
 }
 /* The sheet's own surface is the backdrop of the glass nested in it (glass/presentationFrame.ts):
    the opaque large-detent tone above (242 light, 28 dark). The renderer has no glass-on-glass
-   source, so nested glass on a medium (Liquid Glass) sheet samples this tone too. */
+   source, so nested glass on a medium (glass) sheet samples this tone too. */
 [data-satin-presentation='sheet'] {
   --satin-presentation-backdrop: rgb(242 242 247);
 }
@@ -3643,11 +3643,11 @@ body[data-satin-document='true'],
   border-radius: inherit;
 }
 /* The shared row box above clears row fills; a ListRow keeps its cell or listRowBackground, as a
-   SwiftUI row does in every list style (reference rows pair). */
+   row does in every list style (reference rows pair). */
 [data-satin-list-row-options]:not(:has([data-satin-row], [data-satin-field-style='row'])) {
   background: var(--satin-row-background, var(--satin-list-cell, #fff));
 }
-/* Explicit insets size the row to its content: SwiftUI's defaultMinListRowHeight (44 pt) bounds the
+/* Explicit insets size the row to its content: the minimum row height of 44 pt bounds the
    content inside the insets. iOS 27 native reference rows: a 36 pt capsule with 4 pt insets is a 52 pt row
    (capsule centred, 8 pt above and below); with zero insets it is 44 pt (reference search rows). */
 [data-satin-list-row-options][data-satin-row-insets='explicit']:not(
@@ -3730,6 +3730,12 @@ body[data-satin-document='true'],
   flex: 1;
   overflow-wrap: anywhere;
 }
+/* The sheet Form reference measures plain-text Stepper labels only: 72 1/3 and
+   94 1/3 pt for two/three lines. Do not apply its extra inset to composed List
+   labels or RowLabel stacks; those retain their independently measured pitch. */
+.satin-stepper-row > [data-satin-row-label] {
+  padding-block: 10.166667px;
+}
 [data-satin-row-trailing='true'] {
   display: flex;
   align-items: center;
@@ -4008,11 +4014,15 @@ body[data-satin-document='true'],
   inset: 6px 0;
   z-index: -1;
   border-radius: 18px;
-  background: var(--satin-list-stepper, #eeeef0);
+  background: var(--satin-list-stepper, #eeeeef);
   pointer-events: none;
 }
 [data-satin-stepper='true'] button {
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
   width: 50%;
   min-width: 0;
   min-height: 44px;
@@ -4037,7 +4047,8 @@ body[data-satin-document='true'],
   top: 10px;
   bottom: 10px;
   width: 1px;
-  background: var(--satin-list-separator, #c6c6c8);
+  /* Native divider uses label at 30% over the control, independent of list separators. */
+  background: var(--satin-placeholder-text);
   pointer-events: none;
 }
 [data-satin-stepper='true'] button:disabled {
@@ -4146,7 +4157,7 @@ body[data-satin-document='true'],
   --satin-list-menu: #2c2c2e;
   --satin-list-toggle-off: #5a5a5e;
   --satin-list-toggle-on: #30d158;
-  --satin-list-stepper: #2c2c2e;
+  --satin-list-stepper: #3b3b3d;
   --satin-list-segment-selected: #636366;
 }
 
@@ -4323,6 +4334,16 @@ body[data-satin-document='true'],
 }
 /* A Form editor's first line sits 23 pt below the cell top and its text 5 pt inside the row
    inset (UITextView line-fragment padding); each further line adds 22 pt. Stock iOS 27 pairs. */
+/* Form controls share the 20 pt content inset, including multiline editors. */
+.satin-text-editor[data-satin-field-style='row'] {
+  padding-inline: 20px;
+}
+/* A vertical TextField uses the stock multiline row pitch (22 pt per line + 28 1/3 pt).
+   TextEditor retains its separate UITextView content padding below. */
+.satin-text-editor[data-satin-field-style='row']:has(> [data-satin-field-axis='vertical']) {
+  min-height: 52px;
+  padding-block: 14.166667px;
+}
 [data-satin-field-style='row'] > [data-satin-text-editor] {
   padding: 12px 5px;
 }
@@ -4868,7 +4889,7 @@ html[data-satin-appearance='dark'] .satin-sheet-grabber > span {
   );
 }
 /* reference: the screen owns scrolling geometry. A screen's primary scroll view (ScrollSurface, elected
-   like SwiftUI's: the outermost vertical scroll view that starts the screen's content) extends under
+   the outermost vertical scroll view that starts the screen's content) extends under
    the bar and takes the bar's content inset and large title. Native iOS 27, iPhone 17 Pro Max:
    inline safe top 54 pt below the status band, large 106 pt (54 + a 52 pt title row). */
 :where([data-satin-scroll-navigation]) {
@@ -4928,7 +4949,7 @@ html[data-satin-appearance='dark'] .satin-sheet-grabber > span {
 [data-satin-navigation-chrome][data-satin-navigation-bar-hidden='true'] * {
   pointer-events: none;
 }
-/* inlineLarge (SwiftUI toolbarTitleDisplayMode): the large title stands in the bar row itself
+/* inlineLarge title layout: the large title stands in the bar row itself
    (native reference header-styles r1: frame x20 y63.667 h40.667, 34 pt bold, the owner's Apple Music rest
    pixels) and gives way to the inline title within the first 5 pt of scroll (NavigationChrome). */
 [data-satin-navigation-title-display='inlineLarge'] [data-satin-navigation-title-content] > strong {
@@ -4971,7 +4992,7 @@ html[data-satin-appearance='dark'] .satin-sheet-grabber > span {
   letter-spacing: 0;
 }
 /* Without a primary scroll view the screen's content sits in the safe area below the bar, as a
-   SwiftUI VStack does; a large title stands in the bar's title row. */
+   VStack does; a large title stands in the bar's title row. */
 [data-satin-navigation-motion-layer='true'] {
   box-sizing: border-box;
 }
@@ -5101,7 +5122,7 @@ html[data-satin-appearance='dark'] [data-satin-scroll-indicator-thumb='true'] {
   letter-spacing: 0;
 }
 
-/* Stock SwiftUI iOS 27 Form, same-content rest/scrolled fit, DPR 3.
+/* Native controls iOS 27 Form, same-content rest/scrolled fit, DPR 3.
    Source and residuals: measured-reference-full-bleed-notes.md. These are material
    measurements, not spring values; installed cross-content parity is separate. */
 /* Separate stacking contexts keep WebKit backdrop sampling below both the
@@ -5656,7 +5677,7 @@ html[data-satin-appearance='dark'] [data-satin-navigation-chrome] {
   position: relative;
   top: calc(0.333333px * var(--satin-text-scale, 1));
 }
-/* Stock SwiftUI List allocates a 64 pt row around the 34 pt bordered control. */
+/* Native controls List allocates a 64 pt row around the 34 pt bordered control. */
 [data-satin-section-item]:has(> [data-satin-button-style='borderedProminent']),
 [data-satin-section-item]:has(> [data-satin-button-style='bordered']),
 [data-satin-section-item]:has(
@@ -5853,7 +5874,7 @@ html:is([data-satin-viewport-fit='auto'], [data-satin-viewport-fit='contain'])
 }
 /* A plain glyph (a Menu labelled with a bare symbol) fades back in as its menu's drop dissolves
    into it, measured from the close: hidden to +240 ms, 0.3 at +256, 0.62 at +290, 0.85 at
-   +325 and whole by +400 ms (stock SwiftUI, iOS 27; menuGlyphDropFit.json). The animation
+   +325 and whole by +400 ms (native controls, iOS 27; menuGlyphDropFit.json). The animation
    outranks the emerged state's opacity while the drop is still dissolving. */
 [data-satin-menu-glyph-return='true'] {
   animation: satin-menu-glyph-return 400ms linear both;
@@ -5987,7 +6008,7 @@ html:is([data-satin-viewport-fit='auto'], [data-satin-viewport-fit='contain'])
 [data-satin-row]:has([data-satin-row-label-stack]) {
   padding-block: 5px;
 }
-/* SwiftUI LabeledContent moves its value below the label when their intrinsic
+/* LabeledContent moves its value below the label when their intrinsic
    widths do not fit. Growing the label fills the first line; an unshrunk label
    makes flex wrapping move the value to the leading edge of the next line. */
 [data-satin-row-value-content] {
@@ -6024,13 +6045,15 @@ html:is([data-satin-viewport-fit='auto'], [data-satin-viewport-fit='contain'])
   padding-block: 14.166667px;
 }
 
-/* Layout frames, rather than glyph ink bounds, match SwiftUI Text exports. */
+/* Text measurement uses layout frames rather than glyph ink bounds. */
 [data-satin-row-text] {
   display: inline-block;
+  /* Stock row labels retain authored line breaks, including Stepper labels. */
+  white-space: pre-wrap;
   max-width: 100%;
   vertical-align: top;
   /* Installed 3x reference: the 17 pt WebKit baseline is one device pixel
-   * above SwiftUI. The correction stays one device pixel at each supported DPR. */
+   * above the measured baseline. The correction stays one device pixel at each supported DPR. */
   position: relative;
   top: var(--satin-device-pixel, 1px);
 }
@@ -6067,7 +6090,7 @@ html:is([data-satin-viewport-fit='auto'], [data-satin-viewport-fit='contain'])
   line-height: calc(22px * var(--satin-text-scale, 1));
 }
 
-/* SwiftUI SecureField exports a 21 pt editor, while TextField exports 22 pt.
+/* SecureField has a 21 pt editor, while TextField exports 22 pt.
  * The enclosing native row retains its 52 pt minimum and centers either editor. */
 [data-satin-section-item]
   [data-satin-field-style='row'][data-satin-label-placement='leading']
@@ -6444,8 +6467,8 @@ html:is([data-satin-viewport-fit='auto'], [data-satin-viewport-fit='contain'])
   pointer-events: none;
 }
 
-/* A row's own fill (a ListRow's cell or listRowBackground) follows the card's corners, as a SwiftUI
-   row's background does in an inset-grouped section (reference rows pair: square corners otherwise). */
+/* A row's own fill (a ListRow's cell or listRowBackground) follows the card corners
+   in an inset-grouped section. Other row backgrounds keep square corners. */
 [data-satin-section-rows='true'] > [data-satin-section-item][data-satin-first-row] {
   border-start-start-radius: inherit;
   border-start-end-radius: inherit;
@@ -6610,7 +6633,7 @@ html:is([data-satin-viewport-fit='auto'], [data-satin-viewport-fit='contain'])
   font: inherit;
   line-height: normal;
 }
-/* Stock regular SwiftUI content allocates a 20 1/3 pt line box. */
+/* Stock regular content allocates a 20 1/3 pt line box. */
 [data-satin-button-style='plain'],
 [data-satin-button-style='borderless'] {
   line-height: calc(20.333333px * var(--satin-text-scale, 1));
@@ -6764,7 +6787,7 @@ html:is([data-satin-viewport-fit='auto'], [data-satin-viewport-fit='contain'])
   --satin-control-held-ink: inherit;
   --satin-control-held-ink-opacity: 0.4;
 }
-/* Omitted SwiftUI tint uses a neutral bordered fill; an explicit/inherited
+/* Omitted tint uses a neutral bordered fill; an explicit/inherited
    author tint owns the colored recipe above. Toggle-button selection stays tinted. */
 [data-satin-button-style='bordered']:not([data-satin-control-tinted='true']):not(
     [data-satin-toggle-style]
@@ -6918,7 +6941,7 @@ html:is([data-satin-viewport-fit='auto'], [data-satin-viewport-fit='contain'])
 }
 
 /* The bottom safe-area chain (SafeAreaInset, TabView): tab bar, bottom accessory, app insets and
-   the keyboard, as in SwiftUI.
+   the keyboard.
    - The root boundary sits above the keyboard. The keyboard reaches it on the keyboard's own
      measured curve (keyboard/motion.ts), started as far into that curve as the system keyboard
      already is when WebKit reports it (--satin-keyboard-phase), so the composer and the thread
@@ -7086,7 +7109,7 @@ html:is([data-satin-viewport-fit='auto'], [data-satin-viewport-fit='contain'])
   --satin-inset-band: calc(var(--satin-safe-top, 0px) + var(--satin-inset-parent-top));
   margin-top: var(--satin-inset-band);
 }
-/* SwiftUI's `background` ignores the safe area: the accessory's root background reaches the
+/* The accessory background extends beyond its safe area: the accessory's root background reaches the
    screen's top edge, under the bar (`inset-top`: yellow 0–160.33). */
 :where([data-satin-inset-accessory='top'] > *) {
   position: relative;
@@ -7582,9 +7605,7 @@ html[data-satin-appearance='dark'] [data-satin-tab-sidebar-dim] {
   right: 69px;
 }
 
-/* reference searchable: the navigation bar drawer (search/SearchDrawer.tsx). Geometry from the stock
-   SwiftUI `.searchable(placement: .navigationBarDrawer(displayMode: .always)).searchScopes`
-   reference on iPhone 17 Pro Max, iOS 27.0: at rest the
+/* reference searchable: the navigation bar drawer (search/SearchDrawer.tsx). Measured on iPhone 17 Pro Max, iOS 27.0: at rest the
    field is [20,168,400,44] under a large title and [20,116,400,44] under an inline one; presented,
    the field is [20,62,345,44], the close button [376,62,44,44] and the scope bar [20,116,400,36].
    The drawer is 54 pt tall (field + 10), 90 pt with a presented scope bar, which ends at 152;
@@ -8409,7 +8430,7 @@ html[data-satin-appearance='dark'] [data-satin-tab-sidebar-dim] {
   display: none;
 }
 
-/* A vertical lazy stack accepts the available cross-axis proposal, as SwiftUI does. */
+/* A vertical lazy stack accepts the available cross-axis proposal. */
 [data-satin-content='vstack'][data-satin-lazy-stack='vertical'],
 [data-satin-content='frame'] > [data-satin-content='vstack']:has(> [data-satin-content='divider']),
 [data-satin-content='frame']
@@ -8655,7 +8676,7 @@ html[data-satin-appearance='dark'] [data-satin-tab-sidebar-dim] {
   opacity: 0;
 }
 
-/* List edit mode (reference). Native geometry from the stock SwiftUI native reference (`native list editing fixture`, iPhone 17
+/* List edit mode (reference). Native geometry from the measurement fixture (`native list editing fixture`, iPhone 17
    Pro Max, 3x stills): each leading control sits in a 40 pt column, centred 32 pt (then 72 pt)
    from the row's edge; the 21.33 pt delete circle carries a 10.67 x 1.67 pt bar; the 21.67 pt
    selection circle has a 1.67 pt tertiary-label ring, or the tint with a white check; the 21 x 10.67
@@ -8889,7 +8910,7 @@ html:is([data-satin-viewport-fit='auto'], [data-satin-viewport-fit='contain'])
   height: max(100%, var(--satin-inline-title-content-height, 0px));
 }
 
-/* SwiftUI overlay(alignment:content:): the modified view owns the frame. The overlay consumes
+/* An overlay leaves its modified view in control of the frame. The overlay consumes
    the inset store directly, including the system extension behind bottom accessories. */
 [data-satin-overlay='true'] {
   position: relative;

package/dist/text-input/TextEditor.js

@@ -24,7 +24,11 @@ export const TextEditor = forwardRef(function TextEditor({ value, onChange, labe
             // Only a scroll surface bounds growth. A content-sized parent is the editor's own height,
             // so reading it as a limit would stop the editor from ever growing.
             const containerHeight = surface?.clientHeight ?? Infinity;
-            const visibleHeight = keyboard.viewportHeight > 0
+            // A sheet enters from outside the viewport. Its transformed screen position is
+            // not an editing limit: transforms do not deliver a ResizeObserver notification
+            // when the sheet settles. Only intersect screen geometry for an open keyboard.
+            const keyboardVisible = keyboard.height > 0 && keyboard.viewportHeight > 0;
+            const visibleHeight = keyboardVisible
                 ? keyboard.viewportHeight -
                     Math.max(0, (surface?.getBoundingClientRect().top ?? 0) - keyboard.offsetTop)
                 : containerHeight;
@@ -32,7 +36,7 @@ export const TextEditor = forwardRef(function TextEditor({ value, onChange, labe
             // to measure it: use an isolated, non-focusable copy with the same text layout instead.
             const available = maxLines === undefined
                 ? Math.min(containerHeight, visibleHeight) - 24
-                : Math.min(Math.max(minLines, maxLines) * lineHeight + padding, keyboard.viewportHeight > 0 ? visibleHeight - 24 : Infinity);
+                : Math.min(Math.max(minLines, maxLines) * lineHeight + padding, keyboardVisible ? visibleHeight - 24 : Infinity);
             const height = editorHeight(measureEditorContentHeight(element), minLines, lineHeight, padding, available);
             if (element.style.height === `${height}px`)
                 return;
@@ -65,7 +69,7 @@ export const TextEditor = forwardRef(function TextEditor({ value, onChange, labe
             observer.disconnect();
             element.removeEventListener('input', resize);
         };
-    }, [value, minLines, maxLines, keyboard.viewportHeight, keyboard.offsetTop]);
+    }, [value, minLines, maxLines, keyboard.height, keyboard.viewportHeight, keyboard.offsetTop]);
     useLayoutEffect(() => {
         if (autoFocus && ref.current)
             focusFromFramework(ref.current, { preventScroll: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@satinhq/kit",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.3",
   "type": "module",
   "description": "Opinionated single-target framework for agent-generated personal iOS Home Screen apps.",
   "main": "./dist/index.js",
@@ -96,7 +96,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/satinhq/satin.git",
-    "directory": "packages/pwakit"
+    "directory": "packages/kit"
   },
   "engines": {
     "node": "^22.12.0 || >=24.0.0"
@@ -111,8 +111,8 @@
   "scripts": {
     "build": "node scripts/build.mjs",
     "typecheck": "tsc -p tsconfig.json --pretty false",
-    "lint": "oxlint && node ../pwakit-lint/scripts/check-webgpu-worker.mjs src/glass/webgpu/entry.worker.ts && node ../pwakit-lint/scripts/check-sidebar-artwork.mjs src/navigation/SidebarSymbol.tsx && node ../pwakit-lint/scripts/check-modal-lifecycle.mjs src",
-    "test": "vitest run && node scripts/check-readme-examples.mjs && node scripts/check-public-exports.mjs && node scripts/api-report.mjs && node --test scripts/api-graph.node-test.mjs scripts/public-types.node-test.mjs scripts/swiftui-reference.node-test.mjs scripts/path-spaces.node-test.mjs",
+    "lint": "oxlint && node ../lint/scripts/check-webgpu-worker.mjs src/glass/webgpu/entry.worker.ts && node ../lint/scripts/check-sidebar-artwork.mjs src/navigation/SidebarSymbol.tsx && node ../lint/scripts/check-modal-lifecycle.mjs src",
+    "test": "vitest run && node scripts/check-readme-examples.mjs && node scripts/check-public-exports.mjs && node scripts/api-report.mjs && node --test scripts/api-graph.node-test.mjs scripts/public-types.node-test.mjs scripts/api-reference.node-test.mjs scripts/path-spaces.node-test.mjs",
     "api:write": "node scripts/api-report.mjs --write",
     "api:check": "node scripts/api-report.mjs"
   }