@ambasada/ui 0.7.4 → 0.8.0

package/README.md

@@ -40,9 +40,14 @@ The shell's insets, for anything you position yourself:
 |---|---|---|
 | `--ambasada-safe-area-top` / `bottom` / `left` / `right` | `env(safe-area-inset-*, 0px)` | set on `<html>` by `@ambasada/miniapp`'s `ready()` |
 | `--ambasada-host-bar` | `0px` | the height of the shell's top bar |
+| `--ambasada-inset-top` / `bottom` / `left` / `right` | `max(--ambasada-safe-area-*, env(safe-area-inset-*))` | what to keep clear: use these |
+
+Use the `--ambasada-inset-*` tokens for anything you place yourself. They take the larger of the shell's report and
+the browser's own inset, so the inset is right inside the app and on the open web and is never counted twice. Keep
+the margin on top of it small (8 px): an empty band above the home indicator is a bug.
 
 ```css
-.my-bar { position: fixed; bottom: 0; padding-bottom: calc(12px + var(--ambasada-safe-area-bottom, 0px)); }
+.my-bar { position: fixed; bottom: 0; padding-bottom: calc(8px + var(--ambasada-inset-bottom)); }
 ```
 
 ## Components
@@ -56,7 +61,8 @@ The shell's insets, for anything you position yourself:
 | `ui-group` (`ui-group-head`, `ui-group-body`) | A list: rows in one bordered block, with a title. |
 | `ui-row` (`row-icon`, `row-text`, `row-title`, `row-sub`, `row-right`, `row-chev`) | List row; `tappable`, `danger`, `muted`; `row-icon accent` / `good` / `bad`. |
 | `ui-pill` | Status pill with a dot: `good`, `bad`, `warn`, `accent`, `pulse`. |
-| `ui-sheet-backdrop` > `ui-sheet` (`ui-sheet-grip`, `-head`, `-body`, `-foot`), `ui-icon-btn` | Bottom sheet; a centred dialog from 640 px. Add `ui-sheet-open` to `<body>` while open. |
+| `ui-sheet-backdrop` > `ui-sheet` (`ui-sheet-handle` > `ui-sheet-grip` + `ui-sheet-head`, `-body`, `-foot`), `ui-icon-btn` | Bottom sheet at every width (no centred dialogs): grip, rounded top, dimmed page, a body that scrolls, the one primary action in the foot. Add `ui-sheet-open` to `<body>` while open. The React `Sheet` also portals to `<body>`, closes on a drag down, and keeps the foot above the keyboard. |
+| `ui-field` (`ui-field-label`, `ui-field-hint`, `.bad`/`.good`), `ui-input` | A form field: label, control, one line of hint or error under it, 8 px apart; compact inside `ui-shell` with a mouse. `ui-input` on `<input>`, `<textarea>`, `<select>` (`mono`, `code`). |
 | `ui-stepper-wrap` > `ui-stepper` (`ui-stepper-value`), `ui-presets` | − value + for amounts, with preset chips (`on`). |
 | `ui-empty` (`ui-empty-icon`) | Empty state: icon, `<strong>` title, hint, action. |
 | `ui-skeleton` | Grey bars (`<span>`s) while loading: skeletons, not spinners. |
@@ -68,7 +74,7 @@ For tools built for the laptop that still open in the Ambasada app (the Develope
 | `ui-shell` > `ui-shell-side`, `ui-shell-scrim`, `ui-shell-main` > `ui-shell-top` (`ui-shell-menu`), `ui-shell-content` | 240 px sidebar, sticky top bar, content up to 1088 px. Under 900 px the sidebar is a drawer (`ui-shell open`). Clears the host bar and safe areas once. |
 | `ui-nav` (`ui-nav-title`), `ui-nav-item` (`ui-nav-label`, `ui-nav-right`, `on`) | Sidebar navigation; the current item gets a red marker. |
 | `ui-tabs` | Tabs as links under a title (`a.on`); scrolls sideways when narrow. |
-| `ui-field` (`ui-field-label`, `ui-field-hint` `good` / `bad`), `ui-input` | Form field with one line of hint or error. |
+| `ui-field`, `ui-input` | The same field as above, compact here with a mouse (40 px, 14 px text). `<Field label value onChange />` renders the input itself. |
 | `ui-table` (`.num`, `tr.tappable`) | Data table: hairline rows, tabular figures. |
 
 ```html

package/dist/ambasada-ui.css

@@ -1,4 +1,4 @@
-/* @ambasada/ui 0.7.4: fonts, tokens and components in one stylesheet. MIT, CENTYSO. https://ambasada.id */
+/* @ambasada/ui 0.8.0: fonts, tokens and components in one stylesheet. MIT, CENTYSO. https://ambasada.id */
 /*
  * Inter and JetBrains Mono, self-hosted (variable, SIL Open Font License 1.1: fonts/OFL-*.txt). Latin and
  * Latin Extended, so Romanian ț and ș render. The URLs are relative to this file: bundlers copy the files,
@@ -158,7 +158,18 @@
   --ambasada-safe-area-bottom: env(safe-area-inset-bottom, 0px);
   --ambasada-safe-area-left: env(safe-area-inset-left, 0px);
   --ambasada-safe-area-right: env(safe-area-inset-right, 0px);
-  --ambasada-host-bar: 0px; /* height of the shell's top bar (back, app name, "…" menu) */
+  --ambasada-host-bar: 0px; /* height of the shell's top bar (close, app name, "…" menu) */
+
+  /*
+   * What a page actually keeps clear, per side: the larger of the shell's report and the browser's own inset.
+   * A shell that reports 0 while its WebView runs under the home indicator, and a browser that knows nothing of
+   * the shell, both come out right, and an inset is never counted twice (docs/MINI-APPS.md §15, decision 11).
+   * Use these (plus --ambasada-host-bar at the top), never env() or the raw --ambasada-safe-area-* directly.
+   */
+  --ambasada-inset-top: max(var(--ambasada-safe-area-top), env(safe-area-inset-top, 0px));
+  --ambasada-inset-bottom: max(var(--ambasada-safe-area-bottom), env(safe-area-inset-bottom, 0px));
+  --ambasada-inset-left: max(var(--ambasada-safe-area-left), env(safe-area-inset-left, 0px));
+  --ambasada-inset-right: max(var(--ambasada-safe-area-right), env(safe-area-inset-right, 0px));
 }
 
 /*
@@ -198,10 +209,10 @@
   max-width: var(--page-max);
   margin: 0 auto;
   padding:
-    calc(var(--space-4) + var(--ambasada-safe-area-top, 0px) + var(--ambasada-host-bar, 0px))
-    calc(var(--space-4) + var(--ambasada-safe-area-right, 0px))
-    calc(var(--space-8) + var(--ambasada-safe-area-bottom, 0px))
-    calc(var(--space-4) + var(--ambasada-safe-area-left, 0px));
+    calc(var(--space-4) + var(--ambasada-inset-top) + var(--ambasada-host-bar, 0px))
+    calc(var(--space-4) + var(--ambasada-inset-right))
+    calc(var(--space-8) + var(--ambasada-inset-bottom))
+    calc(var(--space-4) + var(--ambasada-inset-left));
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
@@ -438,73 +449,110 @@
 }
 
 /* ── bottom sheet ───────────────────────────────────────────────────────────
- * Forms and details open in a sheet, not a new page. A centred dialog from 640px up. */
+ * Anything that opens over a page is a bottom sheet, at every width: never a centred dialog (docs/MINI-APPS.md
+ * §15, decision 12). A grip and a head you can drag down, a body that scrolls, a foot with the one primary
+ * action. The React Sheet portals it to <body> (so no transformed ancestor can trap it) and sizes the backdrop
+ * to the visual viewport (--ui-vv-top, --ui-vv-height, --ui-keyboard), so the foot stays above the keyboard. */
 
 body.ui-sheet-open { overflow: hidden; }
 .ui-sheet-backdrop {
   position: fixed;
-  inset: 0;
+  left: 0;
+  right: 0;
+  top: var(--ui-vv-top, 0px);
+  height: var(--ui-vv-height, 100%);
   z-index: 50;
-  background: var(--color-backdrop);
   display: flex;
-  align-items: flex-end;
-  justify-content: center;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  padding-top: calc(var(--ambasada-inset-top) + var(--ambasada-host-bar, 0px) + var(--space-2));
+  background: var(--color-backdrop);
   animation: ui-fade var(--duration) var(--ease);
 }
 .ui-sheet {
   width: 100%;
   max-width: var(--page-max);
-  max-height: 92dvh;
+  max-height: 100%;
+  min-height: 0;
   display: flex;
   flex-direction: column;
   background: var(--color-bg);
   border-radius: var(--radius-hero) var(--radius-hero) 0 0;
   box-shadow: var(--shadow-raised);
-  animation: ui-rise 260ms var(--ease);
-  padding-bottom: var(--ambasada-safe-area-bottom, 0px);
+  animation: ui-rise 320ms var(--ease);
+  /* The home indicator stays clear; with the keyboard up it is covered anyway, so the inset goes. */
+  padding-bottom: max(0px, calc(var(--ambasada-inset-bottom) - var(--ui-keyboard, 0px)));
+  padding-left: var(--ambasada-inset-left);
+  padding-right: var(--ambasada-inset-right);
+  will-change: transform;
+}
+.ui-sheet-backdrop.leaving { animation: ui-fade-out 200ms var(--ease) both; }
+.ui-sheet-backdrop.leaving .ui-sheet { animation: ui-sink 200ms var(--ease) both; }
+/* Grip and head: the drag handle. touch-action none so a drag moves the sheet, not the page. */
+.ui-sheet-handle {
+  flex: none;
+  touch-action: none;
+  cursor: grab;
+  -webkit-user-select: none;
+  user-select: none;
 }
 .ui-sheet-grip {
   width: 36px;
-  height: 4px;
-  margin: 8px auto 0;
-  border-radius: 2px;
+  height: 5px;
+  margin: var(--space-2) auto 0;
+  border-radius: 3px;
   background: var(--color-line-strong);
 }
 .ui-sheet-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-3) var(--space-4) 0 var(--space-5);
+  gap: var(--space-3);
+  min-height: 52px;
+  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-5);
 }
 .ui-sheet-head h2 {
+  flex: 1;
+  min-width: 0;
   margin: 0;
   font-size: var(--text-xl);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-tight);
+  line-height: 1.2;
+  overflow-wrap: anywhere;
 }
+.ui-sheet-head .ui-icon-btn { flex: none; }
 .ui-sheet-body {
+  flex: 1 1 auto;
+  min-height: 0;
   overflow-y: auto;
-  padding: var(--space-4) var(--space-5);
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  padding: var(--space-3) var(--space-5) var(--space-5);
   display: flex;
   flex-direction: column;
-  gap: var(--space-4);
+  gap: var(--space-5);
 }
+.ui-sheet-body > * { flex: none; }
 .ui-sheet-foot {
-  padding: var(--space-3) var(--space-5) var(--space-4);
+  flex: none;
+  padding: var(--space-3) var(--space-5);
   border-top: 1px solid var(--color-line);
   display: flex;
   gap: var(--space-2);
 }
 .ui-sheet-foot > button,
-.ui-sheet-foot > .ui-button { flex: 1; }
-@keyframes ui-rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
+.ui-sheet-foot > a,
+.ui-sheet-foot > .ui-button { flex: 1; min-height: 48px; }
+@keyframes ui-rise { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }
+@keyframes ui-sink { from { transform: none; } to { transform: translate3d(0, 100%, 0); } }
 @keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
-@media (min-width: 640px) {
-  .ui-sheet-backdrop { align-items: center; padding: var(--space-6); }
-  .ui-sheet { border-radius: var(--radius-hero); max-height: 86dvh; }
-  .ui-sheet-grip { display: none; }
-}
+@keyframes ui-fade-out { from { opacity: 1; } to { opacity: 0; } }
 
-/* Round icon button (the sheet's close). */
+/* Round icon button (the sheet's close): a 36px circle in a 44px target. */
 .ui-icon-btn {
+  position: relative;
   width: var(--tap);
   height: var(--tap);
   min-height: 0;
@@ -512,12 +560,77 @@ body.ui-sheet-open { overflow: hidden; }
   display: grid;
   place-items: center;
   border-radius: 50%;
-  background: var(--color-surface-2);
+  background: none;
   color: var(--color-ink-2);
   border: 0;
   cursor: pointer;
+  isolation: isolate;
+}
+.ui-icon-btn::before {
+  content: "";
+  position: absolute;
+  inset: 4px;
+  z-index: -1;
+  border-radius: 50%;
+  background: var(--color-surface-2);
+  transition: background-color var(--duration) var(--ease);
 }
 .ui-icon-btn:hover { filter: none; color: var(--color-ink); }
+.ui-icon-btn:hover::before { background: var(--color-line); }
+
+/* ── fields ─────────────────────────────────────────────────────────────────
+ * A label, the control, one line of hint or error (.bad) under it, 8px apart. Inputs are 16px so iOS does not zoom into them. */
+
+.ui-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+}
+.ui-field-label {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  color: var(--color-ink);
+  line-height: 1.3;
+}
+.ui-field-hint {
+  font-size: var(--text-xs);
+  color: var(--color-ink-3);
+  line-height: 1.45;
+}
+.ui-field-hint.bad { color: var(--color-danger); }
+.ui-field-hint.good { color: var(--color-success); }
+.ui-input {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: 48px;
+  margin: 0;
+  padding: 12px 14px;
+  font: inherit;
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  letter-spacing: normal;
+  line-height: 1.4;
+  color: var(--color-ink);
+  background: var(--color-surface);
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-md);
+  -webkit-appearance: none;
+  appearance: none;
+  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
+}
+.ui-input::placeholder { color: var(--color-ink-3); opacity: 1; }
+.ui-input:hover { border-color: var(--color-line-strong); }
+.ui-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
+}
+.ui-input:disabled { background: var(--color-surface-2); color: var(--color-ink-2); border-color: var(--color-line); }
+.ui-input.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
+.ui-input.code { font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
+textarea.ui-input { resize: vertical; min-height: 104px; }
 
 /* ── stepper ────────────────────────────────────────────────────────────────
  * − value + for amounts, with optional preset chips underneath. */
@@ -527,19 +640,20 @@ body.ui-sheet-open { overflow: hidden; }
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: 48px;
   border: 1px solid var(--color-line);
   border-radius: var(--radius-md);
   background: var(--color-surface);
-  padding: 4px;
+  padding: 3px;
 }
 .ui-stepper button {
-  width: 48px;
-  height: 44px;
+  width: 52px;
+  height: 40px;
   min-height: 0;
   padding: 0;
   display: grid;
   place-items: center;
-  border-radius: 9px;
+  border-radius: var(--radius-sm);
   background: var(--color-surface-2);
   color: var(--color-ink);
   border: 0;
@@ -553,10 +667,11 @@ body.ui-sheet-open { overflow: hidden; }
   font-variant-numeric: tabular-nums;
 }
 .ui-stepper-value small { font-size: var(--text-xs); color: var(--color-ink-3); font-weight: var(--weight-regular); }
-.ui-presets { display: flex; gap: 6px; flex-wrap: wrap; }
+.ui-presets { display: flex; gap: var(--space-2); flex-wrap: wrap; }
 .ui-presets button {
-  min-height: 34px;
-  padding: 4px 12px;
+  min-width: 48px;
+  min-height: 36px;
+  padding: 4px 14px;
   border-radius: var(--radius-pill);
   background: var(--color-surface);
   color: var(--color-ink-2);
@@ -811,48 +926,21 @@ body.ui-sheet-open { overflow: hidden; }
   border-bottom-color: var(--color-ink);
 }
 
-/* Form field: label, the input, one line of hint or error under it. */
-.ui-field {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.ui-field-label {
-  font-size: var(--text-sm);
-  font-weight: var(--weight-medium);
-}
-.ui-field-hint {
-  font-size: var(--text-xs);
-  color: var(--color-ink-3);
-}
-.ui-field-hint.bad {
-  color: var(--color-danger);
-}
-.ui-field-hint.good {
-  color: var(--color-success);
-}
-.ui-input {
-  width: 100%;
-  min-height: 40px;
-  padding: 8px 12px;
-  border: 1px solid var(--color-line);
-  border-radius: var(--radius-sm);
-  background: var(--color-surface);
-  color: var(--color-ink);
-  font: inherit;
-  font-size: var(--text-sm);
-}
-.ui-input:hover {
-  border-color: var(--color-line-strong);
-}
-.ui-input:focus {
-  outline: none;
-  border-color: var(--color-ink);
-  box-shadow: 0 0 0 3px var(--color-surface-2);
-}
-.ui-input:disabled {
-  background: var(--color-surface-2);
-  color: var(--color-ink-3);
+/* Fields inside a desktop tool are compact with a mouse. On a phone they stay 48 px and 16 px, so iOS does not zoom. */
+@media (pointer: fine) {
+  .ui-shell .ui-field {
+    gap: 6px;
+  }
+  .ui-shell .ui-input {
+    min-height: 40px;
+    padding: 8px 12px;
+    font-size: var(--text-sm);
+    border-radius: var(--radius-sm);
+  }
+  .ui-shell .ui-input:focus {
+    border-color: var(--color-ink);
+    box-shadow: 0 0 0 3px var(--color-surface-2);
+  }
 }
 
 /* Data table: hairline rows, numbers right-aligned in tabular figures (`.num`). */
@@ -892,6 +980,8 @@ body.ui-sheet-open { overflow: hidden; }
 @media (prefers-reduced-motion: reduce) {
   .ui-sheet,
   .ui-sheet-backdrop,
+  .ui-sheet-backdrop.leaving,
+  .ui-sheet-backdrop.leaving .ui-sheet,
   .ui-pill.pulse i,
   .ui-skeleton span {
     animation: none;

package/dist/components.css

@@ -35,10 +35,10 @@
   max-width: var(--page-max);
   margin: 0 auto;
   padding:
-    calc(var(--space-4) + var(--ambasada-safe-area-top, 0px) + var(--ambasada-host-bar, 0px))
-    calc(var(--space-4) + var(--ambasada-safe-area-right, 0px))
-    calc(var(--space-8) + var(--ambasada-safe-area-bottom, 0px))
-    calc(var(--space-4) + var(--ambasada-safe-area-left, 0px));
+    calc(var(--space-4) + var(--ambasada-inset-top) + var(--ambasada-host-bar, 0px))
+    calc(var(--space-4) + var(--ambasada-inset-right))
+    calc(var(--space-8) + var(--ambasada-inset-bottom))
+    calc(var(--space-4) + var(--ambasada-inset-left));
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
@@ -275,73 +275,110 @@
 }
 
 /* ── bottom sheet ───────────────────────────────────────────────────────────
- * Forms and details open in a sheet, not a new page. A centred dialog from 640px up. */
+ * Anything that opens over a page is a bottom sheet, at every width: never a centred dialog (docs/MINI-APPS.md
+ * §15, decision 12). A grip and a head you can drag down, a body that scrolls, a foot with the one primary
+ * action. The React Sheet portals it to <body> (so no transformed ancestor can trap it) and sizes the backdrop
+ * to the visual viewport (--ui-vv-top, --ui-vv-height, --ui-keyboard), so the foot stays above the keyboard. */
 
 body.ui-sheet-open { overflow: hidden; }
 .ui-sheet-backdrop {
   position: fixed;
-  inset: 0;
+  left: 0;
+  right: 0;
+  top: var(--ui-vv-top, 0px);
+  height: var(--ui-vv-height, 100%);
   z-index: 50;
-  background: var(--color-backdrop);
   display: flex;
-  align-items: flex-end;
-  justify-content: center;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  padding-top: calc(var(--ambasada-inset-top) + var(--ambasada-host-bar, 0px) + var(--space-2));
+  background: var(--color-backdrop);
   animation: ui-fade var(--duration) var(--ease);
 }
 .ui-sheet {
   width: 100%;
   max-width: var(--page-max);
-  max-height: 92dvh;
+  max-height: 100%;
+  min-height: 0;
   display: flex;
   flex-direction: column;
   background: var(--color-bg);
   border-radius: var(--radius-hero) var(--radius-hero) 0 0;
   box-shadow: var(--shadow-raised);
-  animation: ui-rise 260ms var(--ease);
-  padding-bottom: var(--ambasada-safe-area-bottom, 0px);
+  animation: ui-rise 320ms var(--ease);
+  /* The home indicator stays clear; with the keyboard up it is covered anyway, so the inset goes. */
+  padding-bottom: max(0px, calc(var(--ambasada-inset-bottom) - var(--ui-keyboard, 0px)));
+  padding-left: var(--ambasada-inset-left);
+  padding-right: var(--ambasada-inset-right);
+  will-change: transform;
+}
+.ui-sheet-backdrop.leaving { animation: ui-fade-out 200ms var(--ease) both; }
+.ui-sheet-backdrop.leaving .ui-sheet { animation: ui-sink 200ms var(--ease) both; }
+/* Grip and head: the drag handle. touch-action none so a drag moves the sheet, not the page. */
+.ui-sheet-handle {
+  flex: none;
+  touch-action: none;
+  cursor: grab;
+  -webkit-user-select: none;
+  user-select: none;
 }
 .ui-sheet-grip {
   width: 36px;
-  height: 4px;
-  margin: 8px auto 0;
-  border-radius: 2px;
+  height: 5px;
+  margin: var(--space-2) auto 0;
+  border-radius: 3px;
   background: var(--color-line-strong);
 }
 .ui-sheet-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-3) var(--space-4) 0 var(--space-5);
+  gap: var(--space-3);
+  min-height: 52px;
+  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-5);
 }
 .ui-sheet-head h2 {
+  flex: 1;
+  min-width: 0;
   margin: 0;
   font-size: var(--text-xl);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-tight);
+  line-height: 1.2;
+  overflow-wrap: anywhere;
 }
+.ui-sheet-head .ui-icon-btn { flex: none; }
 .ui-sheet-body {
+  flex: 1 1 auto;
+  min-height: 0;
   overflow-y: auto;
-  padding: var(--space-4) var(--space-5);
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  padding: var(--space-3) var(--space-5) var(--space-5);
   display: flex;
   flex-direction: column;
-  gap: var(--space-4);
+  gap: var(--space-5);
 }
+.ui-sheet-body > * { flex: none; }
 .ui-sheet-foot {
-  padding: var(--space-3) var(--space-5) var(--space-4);
+  flex: none;
+  padding: var(--space-3) var(--space-5);
   border-top: 1px solid var(--color-line);
   display: flex;
   gap: var(--space-2);
 }
 .ui-sheet-foot > button,
-.ui-sheet-foot > .ui-button { flex: 1; }
-@keyframes ui-rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
+.ui-sheet-foot > a,
+.ui-sheet-foot > .ui-button { flex: 1; min-height: 48px; }
+@keyframes ui-rise { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }
+@keyframes ui-sink { from { transform: none; } to { transform: translate3d(0, 100%, 0); } }
 @keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
-@media (min-width: 640px) {
-  .ui-sheet-backdrop { align-items: center; padding: var(--space-6); }
-  .ui-sheet { border-radius: var(--radius-hero); max-height: 86dvh; }
-  .ui-sheet-grip { display: none; }
-}
+@keyframes ui-fade-out { from { opacity: 1; } to { opacity: 0; } }
 
-/* Round icon button (the sheet's close). */
+/* Round icon button (the sheet's close): a 36px circle in a 44px target. */
 .ui-icon-btn {
+  position: relative;
   width: var(--tap);
   height: var(--tap);
   min-height: 0;
@@ -349,12 +386,77 @@ body.ui-sheet-open { overflow: hidden; }
   display: grid;
   place-items: center;
   border-radius: 50%;
-  background: var(--color-surface-2);
+  background: none;
   color: var(--color-ink-2);
   border: 0;
   cursor: pointer;
+  isolation: isolate;
+}
+.ui-icon-btn::before {
+  content: "";
+  position: absolute;
+  inset: 4px;
+  z-index: -1;
+  border-radius: 50%;
+  background: var(--color-surface-2);
+  transition: background-color var(--duration) var(--ease);
 }
 .ui-icon-btn:hover { filter: none; color: var(--color-ink); }
+.ui-icon-btn:hover::before { background: var(--color-line); }
+
+/* ── fields ─────────────────────────────────────────────────────────────────
+ * A label, the control, one line of hint or error (.bad) under it, 8px apart. Inputs are 16px so iOS does not zoom into them. */
+
+.ui-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+}
+.ui-field-label {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  color: var(--color-ink);
+  line-height: 1.3;
+}
+.ui-field-hint {
+  font-size: var(--text-xs);
+  color: var(--color-ink-3);
+  line-height: 1.45;
+}
+.ui-field-hint.bad { color: var(--color-danger); }
+.ui-field-hint.good { color: var(--color-success); }
+.ui-input {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: 48px;
+  margin: 0;
+  padding: 12px 14px;
+  font: inherit;
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  letter-spacing: normal;
+  line-height: 1.4;
+  color: var(--color-ink);
+  background: var(--color-surface);
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-md);
+  -webkit-appearance: none;
+  appearance: none;
+  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
+}
+.ui-input::placeholder { color: var(--color-ink-3); opacity: 1; }
+.ui-input:hover { border-color: var(--color-line-strong); }
+.ui-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
+}
+.ui-input:disabled { background: var(--color-surface-2); color: var(--color-ink-2); border-color: var(--color-line); }
+.ui-input.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
+.ui-input.code { font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
+textarea.ui-input { resize: vertical; min-height: 104px; }
 
 /* ── stepper ────────────────────────────────────────────────────────────────
  * − value + for amounts, with optional preset chips underneath. */
@@ -364,19 +466,20 @@ body.ui-sheet-open { overflow: hidden; }
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: 48px;
   border: 1px solid var(--color-line);
   border-radius: var(--radius-md);
   background: var(--color-surface);
-  padding: 4px;
+  padding: 3px;
 }
 .ui-stepper button {
-  width: 48px;
-  height: 44px;
+  width: 52px;
+  height: 40px;
   min-height: 0;
   padding: 0;
   display: grid;
   place-items: center;
-  border-radius: 9px;
+  border-radius: var(--radius-sm);
   background: var(--color-surface-2);
   color: var(--color-ink);
   border: 0;
@@ -390,10 +493,11 @@ body.ui-sheet-open { overflow: hidden; }
   font-variant-numeric: tabular-nums;
 }
 .ui-stepper-value small { font-size: var(--text-xs); color: var(--color-ink-3); font-weight: var(--weight-regular); }
-.ui-presets { display: flex; gap: 6px; flex-wrap: wrap; }
+.ui-presets { display: flex; gap: var(--space-2); flex-wrap: wrap; }
 .ui-presets button {
-  min-height: 34px;
-  padding: 4px 12px;
+  min-width: 48px;
+  min-height: 36px;
+  padding: 4px 14px;
   border-radius: var(--radius-pill);
   background: var(--color-surface);
   color: var(--color-ink-2);
@@ -648,48 +752,21 @@ body.ui-sheet-open { overflow: hidden; }
   border-bottom-color: var(--color-ink);
 }
 
-/* Form field: label, the input, one line of hint or error under it. */
-.ui-field {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.ui-field-label {
-  font-size: var(--text-sm);
-  font-weight: var(--weight-medium);
-}
-.ui-field-hint {
-  font-size: var(--text-xs);
-  color: var(--color-ink-3);
-}
-.ui-field-hint.bad {
-  color: var(--color-danger);
-}
-.ui-field-hint.good {
-  color: var(--color-success);
-}
-.ui-input {
-  width: 100%;
-  min-height: 40px;
-  padding: 8px 12px;
-  border: 1px solid var(--color-line);
-  border-radius: var(--radius-sm);
-  background: var(--color-surface);
-  color: var(--color-ink);
-  font: inherit;
-  font-size: var(--text-sm);
-}
-.ui-input:hover {
-  border-color: var(--color-line-strong);
-}
-.ui-input:focus {
-  outline: none;
-  border-color: var(--color-ink);
-  box-shadow: 0 0 0 3px var(--color-surface-2);
-}
-.ui-input:disabled {
-  background: var(--color-surface-2);
-  color: var(--color-ink-3);
+/* Fields inside a desktop tool are compact with a mouse. On a phone they stay 48 px and 16 px, so iOS does not zoom. */
+@media (pointer: fine) {
+  .ui-shell .ui-field {
+    gap: 6px;
+  }
+  .ui-shell .ui-input {
+    min-height: 40px;
+    padding: 8px 12px;
+    font-size: var(--text-sm);
+    border-radius: var(--radius-sm);
+  }
+  .ui-shell .ui-input:focus {
+    border-color: var(--color-ink);
+    box-shadow: 0 0 0 3px var(--color-surface-2);
+  }
 }
 
 /* Data table: hairline rows, numbers right-aligned in tabular figures (`.num`). */
@@ -729,6 +806,8 @@ body.ui-sheet-open { overflow: hidden; }
 @media (prefers-reduced-motion: reduce) {
   .ui-sheet,
   .ui-sheet-backdrop,
+  .ui-sheet-backdrop.leaving,
+  .ui-sheet-backdrop.leaving .ui-sheet,
   .ui-pill.pulse i,
   .ui-skeleton span {
     animation: none;

package/dist/react.d.ts

@@ -38,7 +38,12 @@ export declare function Pill({ tone, children, pulse }: {
     children: ReactNode;
     pulse?: boolean;
 }): import("react").JSX.Element;
-/** Bottom sheet (a centred dialog on wide screens). Closes on backdrop tap and Escape; the page behind does not scroll. */
+/**
+ * Bottom sheet, at every width (never a centred dialog). Closes on a tap on the dim, the close button, Escape or a
+ * drag down on the grip and title, sliding out first; the page behind does not scroll. Rendered into <body>, so a
+ * transformed or clipped ancestor cannot trap it, and fitted to the visual viewport, so the foot (put the one
+ * primary action there) stays above the on-screen keyboard on iOS and Android.
+ */
 export declare function Sheet({ open, onClose, title, children, footer }: {
     open: boolean;
     onClose: () => void;
@@ -46,6 +51,19 @@ export declare function Sheet({ open, onClose, title, children, footer }: {
     children: ReactNode;
     footer?: ReactNode;
 }): import("react").JSX.Element | null;
+export type FieldProps = InputHTMLAttributes<HTMLInputElement> & {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    tone?: "good" | "bad";
+    htmlFor?: string;
+    children?: ReactNode;
+};
+/**
+ * Label, control, one line of hint (or `error`, which wins) under it. Without children it is the input itself (the
+ * other props go to the <input>); with children it wraps them: a textarea, a Stepper, … (give inputs className="ui-input").
+ */
+export declare function Field({ label, hint, error, tone, htmlFor, children, className, ...input }: FieldProps): import("react").JSX.Element;
 export type StepperProps = {
     value: number;
     onChange: (v: number) => void;
@@ -106,10 +124,3 @@ export declare function Tabs({ tabs, current, onClick, label }: {
     onClick?: MouseEventHandler<HTMLAnchorElement>;
     label?: string;
 }): import("react").JSX.Element;
-/** Label, input, one line of hint (or `error`, which wins) under it. */
-export declare function Field({ label, hint, error, tone, className, ...input }: InputHTMLAttributes<HTMLInputElement> & {
-    label: ReactNode;
-    hint?: ReactNode;
-    error?: ReactNode;
-    tone?: "good" | "bad";
-}): import("react").JSX.Element;

package/dist/react.js

@@ -1,7 +1,8 @@
 "use client";
 
 // ../ui/src/react.tsx
-import { useEffect, useId } from "react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var cx = (...names) => names.filter(Boolean).join(" ");
 var fmt = (v) => v.toLocaleString("en-US", { maximumFractionDigits: 2 });
@@ -49,28 +50,103 @@ function Pill({ tone = "muted", children, pulse }) {
     children
   ] });
 }
+var reducedMotion = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+var OUT_MS = 200;
 function Sheet({ open, onClose, title, children, footer }) {
   const id = useId();
+  const backdrop = useRef(null);
+  const sheet = useRef(null);
+  const drag = useRef(null);
+  const close = useRef(onClose);
+  close.current = onClose;
+  const [leaving, setLeaving] = useState(false);
+  const dismiss = useCallback(() => reducedMotion() ? close.current() : setLeaving(true), []);
+  useEffect(() => {
+    if (!leaving) return;
+    const t = setTimeout(() => {
+      setLeaving(false);
+      close.current();
+    }, OUT_MS);
+    return () => clearTimeout(t);
+  }, [leaving]);
+  useEffect(() => {
+    if (!open) setLeaving(false);
+  }, [open]);
   useEffect(() => {
     if (!open) return;
-    const onKey = (e) => e.key === "Escape" && onClose();
+    const onKey = (e) => e.key === "Escape" && dismiss();
     document.addEventListener("keydown", onKey);
     document.body.classList.add("ui-sheet-open");
+    const vv = window.visualViewport;
+    const fit = () => {
+      const el = backdrop.current;
+      if (!vv || !el) return;
+      const keyboard = Math.max(0, Math.round(window.innerHeight - vv.height - vv.offsetTop));
+      el.style.setProperty("--ui-vv-top", `${vv.offsetTop}px`);
+      el.style.setProperty("--ui-vv-height", `${vv.height}px`);
+      el.style.setProperty("--ui-keyboard", `${keyboard}px`);
+      const focused = document.activeElement;
+      if (keyboard > 0 && focused instanceof HTMLElement && sheet.current?.contains(focused)) focused.scrollIntoView({ block: "nearest" });
+    };
+    fit();
+    vv?.addEventListener("resize", fit);
+    vv?.addEventListener("scroll", fit);
     return () => {
       document.removeEventListener("keydown", onKey);
       document.body.classList.remove("ui-sheet-open");
+      vv?.removeEventListener("resize", fit);
+      vv?.removeEventListener("scroll", fit);
     };
-  }, [open, onClose]);
+  }, [open, dismiss]);
+  const onDown = (e) => {
+    if (e.button !== 0 || e.target.closest("button, a, input, textarea, select")) return;
+    drag.current = { y: e.clientY, t: e.timeStamp, dy: 0 };
+    e.currentTarget.setPointerCapture(e.pointerId);
+    if (sheet.current) sheet.current.style.transition = "none";
+  };
+  const onMove = (e) => {
+    const d = drag.current;
+    if (!d || !sheet.current) return;
+    d.dy = Math.max(0, e.clientY - d.y);
+    sheet.current.style.transform = d.dy ? `translate3d(0, ${d.dy}px, 0)` : "";
+  };
+  const onUp = (e) => {
+    const d = drag.current;
+    const el = sheet.current;
+    drag.current = null;
+    if (!d || !el) return;
+    const flick = d.dy > 24 && d.dy / Math.max(1, e.timeStamp - d.t) > 0.5;
+    el.style.transition = `transform ${OUT_MS}ms cubic-bezier(0.2, 0, 0, 1)`;
+    if (flick || d.dy > Math.min(160, el.offsetHeight / 3)) {
+      el.style.transform = "translate3d(0, 100%, 0)";
+      if (backdrop.current) Object.assign(backdrop.current.style, { transition: `opacity ${OUT_MS}ms`, opacity: "0" });
+      setTimeout(() => close.current(), OUT_MS);
+    } else el.style.transform = "";
+  };
   if (!open) return null;
-  return /* @__PURE__ */ jsx("div", { className: "ui-sheet-backdrop", onClick: onClose, children: /* @__PURE__ */ jsxs("div", { className: "ui-sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? id : void 0, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsx("div", { className: "ui-sheet-grip" }),
-    title && /* @__PURE__ */ jsxs("div", { className: "ui-sheet-head", children: [
-      /* @__PURE__ */ jsx("h2", { id, children: title }),
-      /* @__PURE__ */ jsx("button", { type: "button", className: "ui-icon-btn", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx(Icon, { d: "M6 6l12 12M18 6 6 18" }) })
+  const node = /* @__PURE__ */ jsx("div", { ref: backdrop, className: cx("ui-sheet-backdrop", leaving && "leaving"), onClick: dismiss, children: /* @__PURE__ */ jsxs("div", { ref: sheet, className: "ui-sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? id : void 0, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs("div", { className: "ui-sheet-handle", onPointerDown: onDown, onPointerMove: onMove, onPointerUp: onUp, onPointerCancel: onUp, children: [
+      /* @__PURE__ */ jsx("div", { className: "ui-sheet-grip" }),
+      title && /* @__PURE__ */ jsxs("div", { className: "ui-sheet-head", children: [
+        /* @__PURE__ */ jsx("h2", { id, children: title }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "ui-icon-btn", "aria-label": "Close", onClick: dismiss, children: /* @__PURE__ */ jsx(Icon, { d: "M6 6l12 12M18 6 6 18", size: 20 }) })
+      ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "ui-sheet-body", children }),
     footer && /* @__PURE__ */ jsx("div", { className: "ui-sheet-foot", children: footer })
   ] }) });
+  return typeof document === "undefined" ? node : createPortal(node, document.body);
+}
+function Field({ label, hint, error, tone, htmlFor, children, className, ...input }) {
+  const auto = useId();
+  const id = children === void 0 ? input.id ?? auto : htmlFor;
+  const note = error ?? hint;
+  const noteId = id && `${id}-hint`;
+  return /* @__PURE__ */ jsxs("div", { className: "ui-field", children: [
+    label && (id ? /* @__PURE__ */ jsx("label", { className: "ui-field-label", htmlFor: id, children: label }) : /* @__PURE__ */ jsx("span", { className: "ui-field-label", children: label })),
+    children ?? /* @__PURE__ */ jsx("input", { ...input, id, className: cx("ui-input", className), "aria-invalid": error ? true : void 0, "aria-describedby": note ? noteId : void 0 }),
+    note && /* @__PURE__ */ jsx("span", { id: noteId, className: cx("ui-field-hint", error ? "bad" : tone), role: error ? "alert" : void 0, children: note })
+  ] });
 }
 function Stepper({ value, onChange, min = 0, max = 1e5, step = 1, unit, presets, format = fmt }) {
   const clamp = (v) => Math.min(max, Math.max(min, Math.round(v * 100) / 100));
@@ -138,15 +214,6 @@ function NavItem({ icon, label, right, href, onClick, current }) {
 function Tabs({ tabs, current, onClick, label }) {
   return /* @__PURE__ */ jsx("nav", { className: "ui-tabs", "aria-label": label, children: tabs.map((t) => /* @__PURE__ */ jsx("a", { href: t.href, onClick, className: t.id === current ? "on" : void 0, "aria-current": t.id === current ? "page" : void 0, children: t.label }, t.id)) });
 }
-function Field({ label, hint, error, tone, className, ...input }) {
-  const id = useId();
-  const note = error ?? hint;
-  return /* @__PURE__ */ jsxs("div", { className: "ui-field", children: [
-    /* @__PURE__ */ jsx("label", { className: "ui-field-label", htmlFor: input.id ?? id, children: label }),
-    /* @__PURE__ */ jsx("input", { id, ...input, className: cx("ui-input", className), "aria-invalid": error ? true : void 0, "aria-describedby": note ? `${input.id ?? id}-hint` : void 0 }),
-    note && /* @__PURE__ */ jsx("span", { id: `${input.id ?? id}-hint`, className: cx("ui-field-hint", error ? "bad" : tone), children: note })
-  ] });
-}
 export {
   Button,
   Card,

package/dist/tokens.css

@@ -117,5 +117,16 @@
   --ambasada-safe-area-bottom: env(safe-area-inset-bottom, 0px);
   --ambasada-safe-area-left: env(safe-area-inset-left, 0px);
   --ambasada-safe-area-right: env(safe-area-inset-right, 0px);
-  --ambasada-host-bar: 0px; /* height of the shell's top bar (back, app name, "…" menu) */
+  --ambasada-host-bar: 0px; /* height of the shell's top bar (close, app name, "…" menu) */
+
+  /*
+   * What a page actually keeps clear, per side: the larger of the shell's report and the browser's own inset.
+   * A shell that reports 0 while its WebView runs under the home indicator, and a browser that knows nothing of
+   * the shell, both come out right, and an inset is never counted twice (docs/MINI-APPS.md §15, decision 11).
+   * Use these (plus --ambasada-host-bar at the top), never env() or the raw --ambasada-safe-area-* directly.
+   */
+  --ambasada-inset-top: max(var(--ambasada-safe-area-top), env(safe-area-inset-top, 0px));
+  --ambasada-inset-bottom: max(var(--ambasada-safe-area-bottom), env(safe-area-inset-bottom, 0px));
+  --ambasada-inset-left: max(var(--ambasada-safe-area-left), env(safe-area-inset-left, 0px));
+  --ambasada-inset-right: max(var(--ambasada-safe-area-right), env(safe-area-inset-right, 0px));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ambasada/ui",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "description": "The Ambasada look for mini apps: design tokens (colours, Inter + JetBrains Mono, radii, spacing, safe areas) and a small component set in plain CSS, with optional React wrappers. One stylesheet to <link>.",
   "type": "module",
   "license": "MIT",
@@ -27,11 +27,15 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "peerDependenciesMeta": {
     "react": {
       "optional": true
+    },
+    "react-dom": {
+      "optional": true
     }
   },
   "devDependencies": {