feat: demo stage for every devknobs feature

.gitignore

@@ -23,5 +23,8 @@ apps/web/src/paraglide/
 apps/web/src/routeTree.gen.ts
 apps/web/worker-configuration.d.ts
 
+# dev: values saved by the fold tuning panel
+apps/web/.tune/
+
 # os
 .DS_Store

apps/web/messages/en.json

@@ -12,6 +12,107 @@
   "copy_grab_example": "Copy example line",
   "copy_grab_api": "Copy grab options",
   "hero_hint": "The knobs handle on the edge of this page is devknobs itself. Press [[⇧K]] or click it, then pick a phone. Drag it across to move the panel to the other edge.",
+  "stage_title": "See it react",
+  "stage_line": "Open the panel with [[⇧K]] and move a knob. The card with its name shows what the page reads now.",
+  "read_none": "not reported",
+  "knob_scheme": "scheme",
+  "read_scheme": "prefers-color-scheme",
+  "knob_contrast": "contrast",
+  "read_contrast": "prefers-contrast",
+  "contrast_sample": "This gray line gets stronger with more contrast",
+  "knob_transparency": "transparency",
+  "read_transparency": "prefers-reduced-transparency",
+  "transparency_sample": "Half of this line sits under a see-through plate, which turns solid",
+  "knob_vision": "vision",
+  "vision_line": "Pick a vision filter and some of these colors look the same",
+  "knob_text": "text size · text spacing",
+  "text_sample": "This line is set at 1 rem",
+  "read_root_size": "root font size",
+  "read_line_height": "line height",
+  "read_letter_spacing": "letter spacing",
+  "knob_motion": "motion · speed · replay animations",
+  "read_motion": "prefers-reduced-motion",
+  "knob_locale": "locale · direction · pseudo",
+  "read_language": "navigator.language",
+  "read_direction": "direction",
+  "read_date": "date",
+  "read_number": "number",
+  "read_currency": "currency",
+  "read_plural": "plural rules",
+  "read_list": "list",
+  "read_relative": "relative time",
+  "knob_time": "clock · time zone · send to server",
+  "read_time": "time",
+  "read_day": "date",
+  "read_zone": "time zone",
+  "read_opened": "this page opened",
+  "read_midnight": "until midnight",
+  "read_server": "server got",
+  "time_server_none": "no time header",
+  "time_ask": "Ask the server",
+  "knob_location": "geo · geo error",
+  "read_position": "position",
+  "location_idle": "not asked yet",
+  "location_asking": "asking",
+  "location_found": "found",
+  "read_latitude": "latitude",
+  "read_longitude": "longitude",
+  "read_accuracy": "accuracy",
+  "location_ask": "Ask for position",
+  "knob_network": "network · connection · save data",
+  "read_online": "navigator.onLine",
+  "read_connection": "effective type",
+  "read_downlink": "downlink",
+  "read_rtt": "round trip time",
+  "read_save_data": "save data",
+  "knob_viewport": "device · width · dpr · browser · bars",
+  "read_viewport": "viewport",
+  "read_columns": "this page",
+  "viewport_one": "one column",
+  "viewport_two": "two columns",
+  "read_orientation": "orientation",
+  "read_ratio": "device pixel ratio",
+  "read_screen": "screen",
+  "read_safe_area": "safe area insets",
+  "knob_pointer": "device · touch pointer",
+  "read_pointer": "pointer",
+  "read_hover": "hover",
+  "read_touch_points": "touch points",
+  "read_touch_events": "touch events",
+  "read_press": "last press",
+  "pointer_idle": "none yet",
+  "pointer_press": "Press here",
+  "knob_agent": "user agent",
+  "read_user_agent": "user agent",
+  "read_platform": "platform",
+  "read_vendor": "vendor",
+  "read_brands": "brands",
+  "read_mobile": "mobile",
+  "knob_debug": "overflow · outlines",
+  "debug_line": "Push a box past the edge, then turn on overflow to mark it. Outlines draws a line around every box.",
+  "debug_push": "Push a box past the edge",
+  "debug_pull": "Pull it back",
+  "debug_box": "This box is wider than the viewport",
+  "knob_pick": "grab · inspect · grab color",
+  "pick_line": "Press [[⇧G]] for grab, or open inspect, and pick one of these.",
+  "pick_box": "A margin of 12 pixels, a border of 4 and a padding of 12",
+  "pick_font": "AAA is a web font, the rest is its fallback",
+  "pick_pseudo": "starts this line",
+  "pick_media": "This line is gray on a narrow screen and in the full text color on a wide one",
+  "pick_inherit_parent": "This line sets a font and",
+  "pick_inherit_child": "this part inherits it",
+  "knob_requests": "requests",
+  "requests_group_outcomes": "errors and waits",
+  "requests_group_bodies": "bodies",
+  "knob_storage": "storage",
+  "storage_write": "Add one to demo-count in",
+  "storage_local": "localStorage",
+  "storage_session": "sessionStorage",
+  "storage_cookie": "cookie",
+  "storage_database": "IndexedDB",
+  "storage_cache": "Cache",
+  "read_cookies": "cookies",
+  "storage_empty": "empty",
   "how_title": "How it works",
   "how_frame": "Pick a device and your page loads again in a same-origin frame the size of the viewport that device gives a page. Media queries, innerWidth, vw units and fixed elements all see a real viewport.",
   "how_patch": "The other knobs change what your code reads: media queries, matchMedia, Date, Intl, navigator.language, geolocation and the user agent. Your CSS and your JavaScript see the same thing.",
@@ -29,6 +130,54 @@
   "feature_look_detail": "Dark mode, more contrast, reduced motion and color blindness filters. Slow CSS animations and transitions down, pause them, or replay them from the start.",
   "feature_debug": "Debugging aids",
   "feature_debug_detail": "Mark every box that makes the page scroll sideways. Outline every element. Swap the user agent, or tell the page it is offline.",
+  "layers_line": "The touch pointer stays on top of what the page opens",
+  "layers_dialog_open": "Open a dialog",
+  "layers_popover_open": "Open a popover",
+  "layers_dialog_title": "A dialog in the top layer",
+  "layers_dialog_try": "Pick a phone in the panel and your mouse becomes a touch dot. Move it over this dialog: the dot stays above it.",
+  "layers_dialog_fields": "The dot leaves text fields and sliders to the browser, so you can type and drag here as usual.",
+  "layers_dialog_text": "Type something",
+  "layers_dialog_range": "Drag the slider",
+  "layers_dialog_close": "Close",
+  "layers_popover_text": "A popover is in the top layer too, and a click outside closes it",
+  "requests_group_fetch": "fetch",
+  "requests_group_xhr": "xhr",
+  "requests_group_loads": "page loads",
+  "requests_fetch_json": "fetch json",
+  "requests_post_json": "post json",
+  "requests_post_form": "post form",
+  "requests_put": "put",
+  "requests_patch": "patch",
+  "requests_delete": "delete",
+  "requests_404": "404",
+  "requests_500": "500",
+  "requests_redirect": "redirect",
+  "requests_slow": "slow",
+  "requests_abort": "abort",
+  "requests_network_error": "network error",
+  "requests_cors_blocked": "cors blocked",
+  "requests_no_cors": "no-cors",
+  "requests_big_body": "big body",
+  "requests_text": "text",
+  "requests_html": "html",
+  "requests_binary": "binary",
+  "requests_stream": "stream",
+  "requests_event_stream": "event stream",
+  "requests_headers": "headers",
+  "requests_burst": "burst",
+  "requests_xhr_get": "xhr get",
+  "requests_xhr_post": "xhr post",
+  "requests_xhr_error": "xhr error",
+  "requests_xhr_timeout": "xhr timeout",
+  "requests_image": "image",
+  "requests_stylesheet": "stylesheet",
+  "requests_script": "script",
+  "requests_font": "font",
+  "requests_failed": "failed",
+  "requests_aborted": "aborted",
+  "requests_timeout": "timeout",
+  "requests_opaque": "opaque",
+  "requests_loaded": "loaded",
   "features_panel": "The panel works from the keyboard: open it and type a knob's name. It lists the knobs you set, and its footer shows five shortcuts. Each one can be set to another key in the panel's settings.",
   "hint_panel_key": "⇧K",
   "hint_panel": "panel",
@@ -41,29 +190,30 @@
   "hint_reset_key": "⇧⌫",
   "hint_reset": "reset",
   "features_readme": "Every knob and how it works, in the README",
-  "try_title": "Try it on this page",
-  "try_intro": "Each button turns a knob in the panel on this page. Reset puts everything back.",
-  "try_iphone": "On an iPhone 18 Pro",
-  "try_pixel": "On a Pixel 10",
-  "try_duo": "On an iPhone Duo",
-  "try_fold": "Fold and unfold",
-  "try_tomorrow": "Tomorrow at 09:00",
-  "try_scheme": "Switch light and dark",
-  "try_arabic": "In Arabic",
-  "try_mat": "Next mat color",
-  "try_reset": "Reset",
-  "seen_title": "What this page reads now",
-  "seen_width": "Width",
-  "seen_width_value": "{width} pixels",
-  "seen_time": "Time",
-  "seen_zone": "Time zone",
-  "seen_language": "Language",
-  "seen_scheme": "Color scheme",
-  "seen_scheme_dark": "dark",
-  "seen_scheme_light": "light",
-  "seen_pointer": "Pointer",
-  "seen_pointer_touch": "touch",
-  "seen_pointer_mouse": "mouse",
+  "tour_close": "Close the tour",
+  "tour_open": "Open the panel",
+  "tour_settings": "Leave the settings",
+  "tour_add_device": "Add the device knob",
+  "tour_search_device": "Search for device",
+  "tour_entry_device": "Pick device",
+  "tour_row_device": "Open the device row",
+  "tour_filter": "Clear the filter",
+  "tour_duo": "Pick iPhone Duo",
+  "tour_scroll": "Scroll the page",
+  "tour_bars": "Watch the browser's bars",
+  "tour_browser": "Turn on the browser",
+  "tour_unfold": "Unfold it",
+  "tour_iphone": "Pick iPhone 18 Pro",
+  "tour_add_mat": "Add the mat knob",
+  "tour_search_mat": "Search for mat",
+  "tour_entry_mat": "Pick mat",
+  "tour_row_mat": "Open the viewport row",
+  "tour_mat": "Pick a color",
+  "tour_grab": "Turn on grab",
+  "tour_pick": "Pick an element on the page",
+  "tour_copied": "Copied, ready to paste into your AI chat",
+  "tour_end": "Add it to your project",
+  "tour_explore": "Explore other knobs",
   "new_title": "New in 0.1.0",
   "new_duo": "The iPhone Duo, shut on its cover screen or open on its inner one. It folds in 3D, in frames rendered from Apple's own model in a scene adapted from",
   "new_duo_link": "jadon7/iphone-duo",

apps/web/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "vite build",
+    "build": "vite build && node ../../scripts/dev-tools-check.ts",
     "cf-typegen": "wrangler types",
     "deploy": "pnpm build && wrangler deploy",
     "dev": "vite dev",
@@ -30,7 +30,7 @@
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.5",
     "@vitejs/plugin-react": "^6.1.1",
-    "devknobs": "0.1.2",
+    "devknobs": "0.2.0",
     "oxc-transform-react": "^0.148.0",
     "typescript": "^7.0.2",
     "vite": "^8.2.2",

apps/web/src/app.css

@@ -10,3 +10,10 @@ body {
   color: var(--foreground);
   margin: 0;
 }
+
+/* The demo's one-glyph font, for the inspect specimen that shows a web font and its fallback. */
+@font-face {
+  font-family: 'knobs specimen';
+  font-display: swap;
+  src: url('/api/demo/asset.woff2') format('woff2');
+}