render-ios-keyboard

render-ios-keyboard

Purpose

Provide a drop-in iOS QWERTY keyboard fragment that pairs with messaging atoms (create-chatgpt-mockup, create-imessage-mockup) when a video needs to show someone typing. Static only: the keyboard sits at the bottom of the screen, the molecule's recorder slides it up/down with transform: translateY(...).

Inputs

const { renderKeyboardHTML, renderKeyboardCSS } = require('./generate');
const html = renderKeyboardHTML({
  suggestions: ['"He"', 'Hey', 'Heating'],   // optional, default ['I', 'The', "I'm"]
  layout: 'qwerty-lower',                    // 'qwerty-lower' | 'qwerty-upper' | 'numbers'
});

The atom returns an HTML fragment (one <div class="ios-keyboard">…</div>) plus the matching CSS. The CSS uses scoped class names so it won't collide with the rest of the page.

Workflow

1. Require the module. const { renderKeyboardHTML, renderKeyboardCSS } = require('./generate'); — no build step, no dependencies beyond Node's fs/path.
2. Pick a layout. renderKeyboardHTML reads opts.layout and looks it up in ROWS: qwerty-lower (default), qwerty-upper, or numbers. An unknown layout silently falls back to qwerty-lower. The molecule decides which state to show; this atom never switches on its own.
3. Pass suggestions. opts.suggestions is an array of up to three strings rendered into the suggestion bar; each value is run through escapeHTML so quotes/angle brackets are safe. Omit it to get the default ['I', 'The', "I'm"].
4. Receive the fragment. The function returns a single root <div class="ios-keyboard" data-layout="…"> containing, in order: the .kb-suggestions bar, three letter rows (row-1 10 keys, row-2 9 keys padded with two 18px spacers, row-3 = shift/#+= modifier + 7 keys + backspace), the row-bottom (123/ABC switch, emoji, wide space, return), and the .kb-system-row globe + mic strip.
5. Inject the CSS once. Call renderKeyboardCSS() (which reads templates/keyboard.css from disk) and place it in a <style> block on the page. The molecule mounts the fragment at the bottom of the stage next to .composer-wrap.
6. Animate externally. The atom emits no JS and never sets a transform. The owning molecule slides the keyboard in/out via transform: translateY(...) on the .ios-keyboard root (the CSS sets will-change: transform for this).
7. (Optional) Preview standalone. render.js wraps the fragment + CSS in a 750×1334 white .stage HTML page and writes it to --out for eyeballing padding/colors.