[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-meta-add-gestures":3,"mdc--c8smcj-key":34,"related-repo-meta-add-gestures":1978,"related-org-meta-add-gestures":2073},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":23,"repoUrl":24,"updatedAt":25,"license":26,"forks":27,"topics":28,"repo":29,"sourceUrl":32,"mdContent":33},"add-gestures","handle gesture interactions in webapps","Handle EMG pinch (tap-to-activate) and opt into continuous pinch-and-drag in a Meta Display Glasses webapp. Use when the user wants sliders, drawing, maps, drag interactions, or game-style continuous input.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"meta","Meta Open Source","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fmeta.png","facebook",[13,17,20],{"name":14,"slug":15,"type":16},"Interaction","interaction","tag",{"name":18,"slug":19,"type":16},"Frontend","frontend",{"name":21,"slug":22,"type":16},"Design","design",189,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fmeta-wearables-webapp","2026-09-01T08:30:53.889244",null,33,[],{"repoUrl":24,"stars":23,"forks":27,"topics":30,"description":31},[],"AI-assisted development toolkit for building web applications on Meta Ray-Ban Display glasses.","https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fmeta-wearables-webapp\u002Ftree\u002FHEAD\u002Fplugins\u002Fmeta-wearables-webapp\u002Fskills\u002Fadd-gestures","---\nname: add-gestures\ndescription: >-\n  Handle EMG pinch (tap-to-activate) and opt into continuous pinch-and-drag in\n  a Meta Display Glasses webapp. Use when the user wants sliders, drawing,\n  maps, drag interactions, or game-style continuous input.\nargument-hint: \"[interaction: tap|drag]\"\n---\n\n## Required reading\n\nBefore generating or modifying any code, read both:\n\n- `..\u002F..\u002Freferences\u002Fdisplay-guidelines.md`\n- `..\u002F..\u002Freferences\u002Fperformance-guidelines.md`\n\nThese define the non-negotiable display physics, input model, and performance budgets for Meta Display Glasses webapps. Do not skip — generated UI that ignores these will fail on-device.\n\nIf these reference files are unavailable in an isolated eval, do not search `\u002F`, home directories, or unrelated workspaces. Apply the requirements already present in this skill and continue.\n\n# Add Pinch + Drag Gestures to Meta Display Glasses WebApp\n\nThe EMG wrist band gives the wearer two interactions: a **pinch** (discrete select) and a **drag** (continuous motion). Pinch works everywhere with no code. Drag is **opt-in** at the page level and is for things that need smooth, continuous control — sliders, maps, drawing, simple games.\n\n## Prerequisites\n\n- Existing webapp created via `\u002Fcreate-webapp`\n\n## Pinch = Activate (always on)\n\nA pinch fires **Enter \u002F click on the focused element** — it works like pressing Enter on the highlighted item. It is **not** a positioned click; it targets `document.activeElement`. So you don't write pinch code — you build **focusable, keyboard-activatable** UI and the pinch activates whatever has focus.\n\n- Use real interactive elements: `\u003Cbutton>`, `\u003Ca href>`, or `[tabindex=\"0\"]` with a key\u002Fclick handler.\n- The D-pad moves focus; the pinch activates the focused element.\n- A tap on a focused **text input** opens the on-glasses composer instead of reaching the page — see `\u002Fadd-text-input`.\n\nBuild these focusable elements (e.g. a `\u003Cbutton class=\"focusable\" data-action=\"confirm\">`) with `\u002Fadd-ui`. That's all pinch needs — the rest of this skill is about **drag**.\n\n## Drag = Opt In (page-level)\n\nContinuous drag is **off by default**. Without opting in, there is **no free cursor and no drag** — EMG is D-pad focus + pinch only. To receive the sliding motion, set `touch-action: none` on the **`\u003Cbody>`** in your **initial stylesheet**, then listen to Pointer events.\n\n### ⚠️ Caveats (must-include)\n\n- `touch-action` is read on **`\u003Cbody>` only, once at page load**. Per-element values and post-load JS changes to it are **not** honored. Put it in the initial CSS that ships with the page.\n- Turn drag on for the **whole page**, not per element.\n- **Pointer Lock is not supported** — do **not** call `requestPointerLock`.\n- The exact drag event fields (e.g. `movementX`\u002F`movementY`) are device-side. **Verify on-device** by logging `pointermove` before relying on specific fields; prefer `clientX`\u002F`clientY` deltas you compute yourself.\n- A pinch on a focused text input opens the composer (see `\u002Fadd-text-input`) rather than producing a drag.\n\n## Steps\n\n### 1. Enable Drag in the Initial CSS\n\nIn `styles.css` (shipped with the page — not injected later):\n\n```css\nbody { touch-action: none; }\n```\n\n### 2. Handle the Pointer Stream\n\n```javascript\nvar slider = document.getElementById('slider');\nvar dragging = false;\n\nslider.addEventListener('pointerdown', function (e) {\n  dragging = true;\n  slider.setPointerCapture(e.pointerId);\n});\n\nslider.addEventListener('pointermove', function (e) {\n  if (!dragging) return;\n  update(e.clientX, e.clientY);     \u002F\u002F use client coords; verify deltas on-device\n});\n\nslider.addEventListener('pointerup', function () {\n  dragging = false;\n});\n```\n\n### 3. Keep Pinch Activation Working\n\nEven with drag enabled, keep your focusable elements intact so pinch-to-activate still works for buttons and links. Drag is additive, not a replacement for focus navigation.\n\n## Patterns\n\n### Slider\n\n```javascript\nfunction update(x) {\n  var rect = slider.getBoundingClientRect();\n  var pct = Math.max(0, Math.min(1, (x - rect.left) \u002F rect.width));\n  setValue(pct);\n  \u002F\u002F Reflect `pct` in your slider fill — see \u002Fadd-ui\n}\n```\n\n### Pan \u002F Draw\n\n```javascript\nvar last = null;\ncanvas.addEventListener('pointerdown', function (e) { last = { x: e.clientX, y: e.clientY }; });\ncanvas.addEventListener('pointermove', function (e) {\n  if (!last) return;\n  drawLine(last.x, last.y, e.clientX, e.clientY);\n  last = { x: e.clientX, y: e.clientY };\n});\ncanvas.addEventListener('pointerup', function () { last = null; });\n```\n\n## Verify\n\n- [ ] Pinch activates focused elements (buttons\u002Flinks work with no extra code)\n- [ ] `body { touch-action: none; }` is in the **initial** stylesheet (not injected later)\n- [ ] With drag enabled, the pointer stream arrives (`pointerdown`\u002F`move`\u002F`up`)\n- [ ] Without opt-in, focus + pinch still work (no broken cursor expectation)\n- [ ] No `requestPointerLock` used\n- [ ] Drag event field assumptions verified on-device (logged `pointermove`)\n\n## Related Skills\n\n- `\u002Fadd-ui` — Build the focusable elements pinch activates\n- `\u002Fadd-text-input` — Why a tap on a focused field opens the composer instead of dragging\n",{"data":35,"body":37},{"name":4,"description":6,"argument-hint":36},"[interaction: tap|drag]",{"type":38,"children":39},"root",[40,49,55,79,84,97,104,131,137,151,157,191,248,274,280,325,332,461,467,473,486,542,548,1074,1080,1085,1091,1096,1340,1346,1827,1833,1943,1949,1972],{"type":41,"tag":42,"props":43,"children":45},"element","h2",{"id":44},"required-reading",[46],{"type":47,"value":48},"text","Required reading",{"type":41,"tag":50,"props":51,"children":52},"p",{},[53],{"type":47,"value":54},"Before generating or modifying any code, read both:",{"type":41,"tag":56,"props":57,"children":58},"ul",{},[59,70],{"type":41,"tag":60,"props":61,"children":62},"li",{},[63],{"type":41,"tag":64,"props":65,"children":67},"code",{"className":66},[],[68],{"type":47,"value":69},"..\u002F..\u002Freferences\u002Fdisplay-guidelines.md",{"type":41,"tag":60,"props":71,"children":72},{},[73],{"type":41,"tag":64,"props":74,"children":76},{"className":75},[],[77],{"type":47,"value":78},"..\u002F..\u002Freferences\u002Fperformance-guidelines.md",{"type":41,"tag":50,"props":80,"children":81},{},[82],{"type":47,"value":83},"These define the non-negotiable display physics, input model, and performance budgets for Meta Display Glasses webapps. Do not skip — generated UI that ignores these will fail on-device.",{"type":41,"tag":50,"props":85,"children":86},{},[87,89,95],{"type":47,"value":88},"If these reference files are unavailable in an isolated eval, do not search ",{"type":41,"tag":64,"props":90,"children":92},{"className":91},[],[93],{"type":47,"value":94},"\u002F",{"type":47,"value":96},", home directories, or unrelated workspaces. Apply the requirements already present in this skill and continue.",{"type":41,"tag":98,"props":99,"children":101},"h1",{"id":100},"add-pinch-drag-gestures-to-meta-display-glasses-webapp",[102],{"type":47,"value":103},"Add Pinch + Drag Gestures to Meta Display Glasses WebApp",{"type":41,"tag":50,"props":105,"children":106},{},[107,109,115,117,122,124,129],{"type":47,"value":108},"The EMG wrist band gives the wearer two interactions: a ",{"type":41,"tag":110,"props":111,"children":112},"strong",{},[113],{"type":47,"value":114},"pinch",{"type":47,"value":116}," (discrete select) and a ",{"type":41,"tag":110,"props":118,"children":119},{},[120],{"type":47,"value":121},"drag",{"type":47,"value":123}," (continuous motion). Pinch works everywhere with no code. Drag is ",{"type":41,"tag":110,"props":125,"children":126},{},[127],{"type":47,"value":128},"opt-in",{"type":47,"value":130}," at the page level and is for things that need smooth, continuous control — sliders, maps, drawing, simple games.",{"type":41,"tag":42,"props":132,"children":134},{"id":133},"prerequisites",[135],{"type":47,"value":136},"Prerequisites",{"type":41,"tag":56,"props":138,"children":139},{},[140],{"type":41,"tag":60,"props":141,"children":142},{},[143,145],{"type":47,"value":144},"Existing webapp created via ",{"type":41,"tag":64,"props":146,"children":148},{"className":147},[],[149],{"type":47,"value":150},"\u002Fcreate-webapp",{"type":41,"tag":42,"props":152,"children":154},{"id":153},"pinch-activate-always-on",[155],{"type":47,"value":156},"Pinch = Activate (always on)",{"type":41,"tag":50,"props":158,"children":159},{},[160,162,167,169,174,176,182,184,189],{"type":47,"value":161},"A pinch fires ",{"type":41,"tag":110,"props":163,"children":164},{},[165],{"type":47,"value":166},"Enter \u002F click on the focused element",{"type":47,"value":168}," — it works like pressing Enter on the highlighted item. It is ",{"type":41,"tag":110,"props":170,"children":171},{},[172],{"type":47,"value":173},"not",{"type":47,"value":175}," a positioned click; it targets ",{"type":41,"tag":64,"props":177,"children":179},{"className":178},[],[180],{"type":47,"value":181},"document.activeElement",{"type":47,"value":183},". So you don't write pinch code — you build ",{"type":41,"tag":110,"props":185,"children":186},{},[187],{"type":47,"value":188},"focusable, keyboard-activatable",{"type":47,"value":190}," UI and the pinch activates whatever has focus.",{"type":41,"tag":56,"props":192,"children":193},{},[194,223,228],{"type":41,"tag":60,"props":195,"children":196},{},[197,199,205,207,213,215,221],{"type":47,"value":198},"Use real interactive elements: ",{"type":41,"tag":64,"props":200,"children":202},{"className":201},[],[203],{"type":47,"value":204},"\u003Cbutton>",{"type":47,"value":206},", ",{"type":41,"tag":64,"props":208,"children":210},{"className":209},[],[211],{"type":47,"value":212},"\u003Ca href>",{"type":47,"value":214},", or ",{"type":41,"tag":64,"props":216,"children":218},{"className":217},[],[219],{"type":47,"value":220},"[tabindex=\"0\"]",{"type":47,"value":222}," with a key\u002Fclick handler.",{"type":41,"tag":60,"props":224,"children":225},{},[226],{"type":47,"value":227},"The D-pad moves focus; the pinch activates the focused element.",{"type":41,"tag":60,"props":229,"children":230},{},[231,233,238,240,246],{"type":47,"value":232},"A tap on a focused ",{"type":41,"tag":110,"props":234,"children":235},{},[236],{"type":47,"value":237},"text input",{"type":47,"value":239}," opens the on-glasses composer instead of reaching the page — see ",{"type":41,"tag":64,"props":241,"children":243},{"className":242},[],[244],{"type":47,"value":245},"\u002Fadd-text-input",{"type":47,"value":247},".",{"type":41,"tag":50,"props":249,"children":250},{},[251,253,259,261,267,269,273],{"type":47,"value":252},"Build these focusable elements (e.g. a ",{"type":41,"tag":64,"props":254,"children":256},{"className":255},[],[257],{"type":47,"value":258},"\u003Cbutton class=\"focusable\" data-action=\"confirm\">",{"type":47,"value":260},") with ",{"type":41,"tag":64,"props":262,"children":264},{"className":263},[],[265],{"type":47,"value":266},"\u002Fadd-ui",{"type":47,"value":268},". That's all pinch needs — the rest of this skill is about ",{"type":41,"tag":110,"props":270,"children":271},{},[272],{"type":47,"value":121},{"type":47,"value":247},{"type":41,"tag":42,"props":275,"children":277},{"id":276},"drag-opt-in-page-level",[278],{"type":47,"value":279},"Drag = Opt In (page-level)",{"type":41,"tag":50,"props":281,"children":282},{},[283,285,290,292,297,299,305,307,316,318,323],{"type":47,"value":284},"Continuous drag is ",{"type":41,"tag":110,"props":286,"children":287},{},[288],{"type":47,"value":289},"off by default",{"type":47,"value":291},". Without opting in, there is ",{"type":41,"tag":110,"props":293,"children":294},{},[295],{"type":47,"value":296},"no free cursor and no drag",{"type":47,"value":298}," — EMG is D-pad focus + pinch only. To receive the sliding motion, set ",{"type":41,"tag":64,"props":300,"children":302},{"className":301},[],[303],{"type":47,"value":304},"touch-action: none",{"type":47,"value":306}," on the ",{"type":41,"tag":110,"props":308,"children":309},{},[310],{"type":41,"tag":64,"props":311,"children":313},{"className":312},[],[314],{"type":47,"value":315},"\u003Cbody>",{"type":47,"value":317}," in your ",{"type":41,"tag":110,"props":319,"children":320},{},[321],{"type":47,"value":322},"initial stylesheet",{"type":47,"value":324},", then listen to Pointer events.",{"type":41,"tag":326,"props":327,"children":329},"h3",{"id":328},"️-caveats-must-include",[330],{"type":47,"value":331},"⚠️ Caveats (must-include)",{"type":41,"tag":56,"props":333,"children":334},{},[335,364,376,399,449],{"type":41,"tag":60,"props":336,"children":337},{},[338,344,346,356,358,362],{"type":41,"tag":64,"props":339,"children":341},{"className":340},[],[342],{"type":47,"value":343},"touch-action",{"type":47,"value":345}," is read on ",{"type":41,"tag":110,"props":347,"children":348},{},[349,354],{"type":41,"tag":64,"props":350,"children":352},{"className":351},[],[353],{"type":47,"value":315},{"type":47,"value":355}," only, once at page load",{"type":47,"value":357},". Per-element values and post-load JS changes to it are ",{"type":41,"tag":110,"props":359,"children":360},{},[361],{"type":47,"value":173},{"type":47,"value":363}," honored. Put it in the initial CSS that ships with the page.",{"type":41,"tag":60,"props":365,"children":366},{},[367,369,374],{"type":47,"value":368},"Turn drag on for the ",{"type":41,"tag":110,"props":370,"children":371},{},[372],{"type":47,"value":373},"whole page",{"type":47,"value":375},", not per element.",{"type":41,"tag":60,"props":377,"children":378},{},[379,384,386,390,392,398],{"type":41,"tag":110,"props":380,"children":381},{},[382],{"type":47,"value":383},"Pointer Lock is not supported",{"type":47,"value":385}," — do ",{"type":41,"tag":110,"props":387,"children":388},{},[389],{"type":47,"value":173},{"type":47,"value":391}," call ",{"type":41,"tag":64,"props":393,"children":395},{"className":394},[],[396],{"type":47,"value":397},"requestPointerLock",{"type":47,"value":247},{"type":41,"tag":60,"props":400,"children":401},{},[402,404,410,411,417,419,424,426,432,434,440,441,447],{"type":47,"value":403},"The exact drag event fields (e.g. ",{"type":41,"tag":64,"props":405,"children":407},{"className":406},[],[408],{"type":47,"value":409},"movementX",{"type":47,"value":94},{"type":41,"tag":64,"props":412,"children":414},{"className":413},[],[415],{"type":47,"value":416},"movementY",{"type":47,"value":418},") are device-side. ",{"type":41,"tag":110,"props":420,"children":421},{},[422],{"type":47,"value":423},"Verify on-device",{"type":47,"value":425}," by logging ",{"type":41,"tag":64,"props":427,"children":429},{"className":428},[],[430],{"type":47,"value":431},"pointermove",{"type":47,"value":433}," before relying on specific fields; prefer ",{"type":41,"tag":64,"props":435,"children":437},{"className":436},[],[438],{"type":47,"value":439},"clientX",{"type":47,"value":94},{"type":41,"tag":64,"props":442,"children":444},{"className":443},[],[445],{"type":47,"value":446},"clientY",{"type":47,"value":448}," deltas you compute yourself.",{"type":41,"tag":60,"props":450,"children":451},{},[452,454,459],{"type":47,"value":453},"A pinch on a focused text input opens the composer (see ",{"type":41,"tag":64,"props":455,"children":457},{"className":456},[],[458],{"type":47,"value":245},{"type":47,"value":460},") rather than producing a drag.",{"type":41,"tag":42,"props":462,"children":464},{"id":463},"steps",[465],{"type":47,"value":466},"Steps",{"type":41,"tag":326,"props":468,"children":470},{"id":469},"_1-enable-drag-in-the-initial-css",[471],{"type":47,"value":472},"1. Enable Drag in the Initial CSS",{"type":41,"tag":50,"props":474,"children":475},{},[476,478,484],{"type":47,"value":477},"In ",{"type":41,"tag":64,"props":479,"children":481},{"className":480},[],[482],{"type":47,"value":483},"styles.css",{"type":47,"value":485}," (shipped with the page — not injected later):",{"type":41,"tag":487,"props":488,"children":493},"pre",{"className":489,"code":490,"language":491,"meta":492,"style":492},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","body { touch-action: none; }\n","css","",[494],{"type":41,"tag":64,"props":495,"children":496},{"__ignoreMap":492},[497],{"type":41,"tag":498,"props":499,"children":502},"span",{"class":500,"line":501},"line",1,[503,509,515,521,526,532,537],{"type":41,"tag":498,"props":504,"children":506},{"style":505},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[507],{"type":47,"value":508},"body",{"type":41,"tag":498,"props":510,"children":512},{"style":511},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[513],{"type":47,"value":514}," {",{"type":41,"tag":498,"props":516,"children":518},{"style":517},"--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6",[519],{"type":47,"value":520}," touch-action",{"type":41,"tag":498,"props":522,"children":523},{"style":511},[524],{"type":47,"value":525},":",{"type":41,"tag":498,"props":527,"children":529},{"style":528},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[530],{"type":47,"value":531}," none",{"type":41,"tag":498,"props":533,"children":534},{"style":511},[535],{"type":47,"value":536},";",{"type":41,"tag":498,"props":538,"children":539},{"style":511},[540],{"type":47,"value":541}," }\n",{"type":41,"tag":326,"props":543,"children":545},{"id":544},"_2-handle-the-pointer-stream",[546],{"type":47,"value":547},"2. Handle the Pointer Stream",{"type":41,"tag":487,"props":549,"children":553},{"className":550,"code":551,"language":552,"meta":492,"style":492},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","var slider = document.getElementById('slider');\nvar dragging = false;\n\nslider.addEventListener('pointerdown', function (e) {\n  dragging = true;\n  slider.setPointerCapture(e.pointerId);\n});\n\nslider.addEventListener('pointermove', function (e) {\n  if (!dragging) return;\n  update(e.clientX, e.clientY);     \u002F\u002F use client coords; verify deltas on-device\n});\n\nslider.addEventListener('pointerup', function () {\n  dragging = false;\n});\n","javascript",[554],{"type":41,"tag":64,"props":555,"children":556},{"__ignoreMap":492},[557,621,648,658,722,745,789,806,814,870,908,964,980,988,1038,1058],{"type":41,"tag":498,"props":558,"children":559},{"class":500,"line":501},[560,566,571,576,581,585,591,596,601,607,611,616],{"type":41,"tag":498,"props":561,"children":563},{"style":562},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[564],{"type":47,"value":565},"var",{"type":41,"tag":498,"props":567,"children":568},{"style":528},[569],{"type":47,"value":570}," slider ",{"type":41,"tag":498,"props":572,"children":573},{"style":511},[574],{"type":47,"value":575},"=",{"type":41,"tag":498,"props":577,"children":578},{"style":528},[579],{"type":47,"value":580}," document",{"type":41,"tag":498,"props":582,"children":583},{"style":511},[584],{"type":47,"value":247},{"type":41,"tag":498,"props":586,"children":588},{"style":587},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[589],{"type":47,"value":590},"getElementById",{"type":41,"tag":498,"props":592,"children":593},{"style":528},[594],{"type":47,"value":595},"(",{"type":41,"tag":498,"props":597,"children":598},{"style":511},[599],{"type":47,"value":600},"'",{"type":41,"tag":498,"props":602,"children":604},{"style":603},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[605],{"type":47,"value":606},"slider",{"type":41,"tag":498,"props":608,"children":609},{"style":511},[610],{"type":47,"value":600},{"type":41,"tag":498,"props":612,"children":613},{"style":528},[614],{"type":47,"value":615},")",{"type":41,"tag":498,"props":617,"children":618},{"style":511},[619],{"type":47,"value":620},";\n",{"type":41,"tag":498,"props":622,"children":624},{"class":500,"line":623},2,[625,629,634,638,644],{"type":41,"tag":498,"props":626,"children":627},{"style":562},[628],{"type":47,"value":565},{"type":41,"tag":498,"props":630,"children":631},{"style":528},[632],{"type":47,"value":633}," dragging ",{"type":41,"tag":498,"props":635,"children":636},{"style":511},[637],{"type":47,"value":575},{"type":41,"tag":498,"props":639,"children":641},{"style":640},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[642],{"type":47,"value":643}," false",{"type":41,"tag":498,"props":645,"children":646},{"style":511},[647],{"type":47,"value":620},{"type":41,"tag":498,"props":649,"children":651},{"class":500,"line":650},3,[652],{"type":41,"tag":498,"props":653,"children":655},{"emptyLinePlaceholder":654},true,[656],{"type":47,"value":657},"\n",{"type":41,"tag":498,"props":659,"children":661},{"class":500,"line":660},4,[662,666,670,675,679,683,688,692,697,702,707,713,717],{"type":41,"tag":498,"props":663,"children":664},{"style":528},[665],{"type":47,"value":606},{"type":41,"tag":498,"props":667,"children":668},{"style":511},[669],{"type":47,"value":247},{"type":41,"tag":498,"props":671,"children":672},{"style":587},[673],{"type":47,"value":674},"addEventListener",{"type":41,"tag":498,"props":676,"children":677},{"style":528},[678],{"type":47,"value":595},{"type":41,"tag":498,"props":680,"children":681},{"style":511},[682],{"type":47,"value":600},{"type":41,"tag":498,"props":684,"children":685},{"style":603},[686],{"type":47,"value":687},"pointerdown",{"type":41,"tag":498,"props":689,"children":690},{"style":511},[691],{"type":47,"value":600},{"type":41,"tag":498,"props":693,"children":694},{"style":511},[695],{"type":47,"value":696},",",{"type":41,"tag":498,"props":698,"children":699},{"style":562},[700],{"type":47,"value":701}," function",{"type":41,"tag":498,"props":703,"children":704},{"style":511},[705],{"type":47,"value":706}," (",{"type":41,"tag":498,"props":708,"children":710},{"style":709},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[711],{"type":47,"value":712},"e",{"type":41,"tag":498,"props":714,"children":715},{"style":511},[716],{"type":47,"value":615},{"type":41,"tag":498,"props":718,"children":719},{"style":511},[720],{"type":47,"value":721}," {\n",{"type":41,"tag":498,"props":723,"children":725},{"class":500,"line":724},5,[726,731,736,741],{"type":41,"tag":498,"props":727,"children":728},{"style":528},[729],{"type":47,"value":730},"  dragging",{"type":41,"tag":498,"props":732,"children":733},{"style":511},[734],{"type":47,"value":735}," =",{"type":41,"tag":498,"props":737,"children":738},{"style":640},[739],{"type":47,"value":740}," true",{"type":41,"tag":498,"props":742,"children":743},{"style":511},[744],{"type":47,"value":620},{"type":41,"tag":498,"props":746,"children":748},{"class":500,"line":747},6,[749,754,758,763,768,772,776,781,785],{"type":41,"tag":498,"props":750,"children":751},{"style":528},[752],{"type":47,"value":753},"  slider",{"type":41,"tag":498,"props":755,"children":756},{"style":511},[757],{"type":47,"value":247},{"type":41,"tag":498,"props":759,"children":760},{"style":587},[761],{"type":47,"value":762},"setPointerCapture",{"type":41,"tag":498,"props":764,"children":766},{"style":765},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[767],{"type":47,"value":595},{"type":41,"tag":498,"props":769,"children":770},{"style":528},[771],{"type":47,"value":712},{"type":41,"tag":498,"props":773,"children":774},{"style":511},[775],{"type":47,"value":247},{"type":41,"tag":498,"props":777,"children":778},{"style":528},[779],{"type":47,"value":780},"pointerId",{"type":41,"tag":498,"props":782,"children":783},{"style":765},[784],{"type":47,"value":615},{"type":41,"tag":498,"props":786,"children":787},{"style":511},[788],{"type":47,"value":620},{"type":41,"tag":498,"props":790,"children":792},{"class":500,"line":791},7,[793,798,802],{"type":41,"tag":498,"props":794,"children":795},{"style":511},[796],{"type":47,"value":797},"}",{"type":41,"tag":498,"props":799,"children":800},{"style":528},[801],{"type":47,"value":615},{"type":41,"tag":498,"props":803,"children":804},{"style":511},[805],{"type":47,"value":620},{"type":41,"tag":498,"props":807,"children":809},{"class":500,"line":808},8,[810],{"type":41,"tag":498,"props":811,"children":812},{"emptyLinePlaceholder":654},[813],{"type":47,"value":657},{"type":41,"tag":498,"props":815,"children":817},{"class":500,"line":816},9,[818,822,826,830,834,838,842,846,850,854,858,862,866],{"type":41,"tag":498,"props":819,"children":820},{"style":528},[821],{"type":47,"value":606},{"type":41,"tag":498,"props":823,"children":824},{"style":511},[825],{"type":47,"value":247},{"type":41,"tag":498,"props":827,"children":828},{"style":587},[829],{"type":47,"value":674},{"type":41,"tag":498,"props":831,"children":832},{"style":528},[833],{"type":47,"value":595},{"type":41,"tag":498,"props":835,"children":836},{"style":511},[837],{"type":47,"value":600},{"type":41,"tag":498,"props":839,"children":840},{"style":603},[841],{"type":47,"value":431},{"type":41,"tag":498,"props":843,"children":844},{"style":511},[845],{"type":47,"value":600},{"type":41,"tag":498,"props":847,"children":848},{"style":511},[849],{"type":47,"value":696},{"type":41,"tag":498,"props":851,"children":852},{"style":562},[853],{"type":47,"value":701},{"type":41,"tag":498,"props":855,"children":856},{"style":511},[857],{"type":47,"value":706},{"type":41,"tag":498,"props":859,"children":860},{"style":709},[861],{"type":47,"value":712},{"type":41,"tag":498,"props":863,"children":864},{"style":511},[865],{"type":47,"value":615},{"type":41,"tag":498,"props":867,"children":868},{"style":511},[869],{"type":47,"value":721},{"type":41,"tag":498,"props":871,"children":873},{"class":500,"line":872},10,[874,880,884,889,894,899,904],{"type":41,"tag":498,"props":875,"children":877},{"style":876},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[878],{"type":47,"value":879},"  if",{"type":41,"tag":498,"props":881,"children":882},{"style":765},[883],{"type":47,"value":706},{"type":41,"tag":498,"props":885,"children":886},{"style":511},[887],{"type":47,"value":888},"!",{"type":41,"tag":498,"props":890,"children":891},{"style":528},[892],{"type":47,"value":893},"dragging",{"type":41,"tag":498,"props":895,"children":896},{"style":765},[897],{"type":47,"value":898},") ",{"type":41,"tag":498,"props":900,"children":901},{"style":876},[902],{"type":47,"value":903},"return",{"type":41,"tag":498,"props":905,"children":906},{"style":511},[907],{"type":47,"value":620},{"type":41,"tag":498,"props":909,"children":911},{"class":500,"line":910},11,[912,917,921,925,929,933,937,942,946,950,954,958],{"type":41,"tag":498,"props":913,"children":914},{"style":587},[915],{"type":47,"value":916},"  update",{"type":41,"tag":498,"props":918,"children":919},{"style":765},[920],{"type":47,"value":595},{"type":41,"tag":498,"props":922,"children":923},{"style":528},[924],{"type":47,"value":712},{"type":41,"tag":498,"props":926,"children":927},{"style":511},[928],{"type":47,"value":247},{"type":41,"tag":498,"props":930,"children":931},{"style":528},[932],{"type":47,"value":439},{"type":41,"tag":498,"props":934,"children":935},{"style":511},[936],{"type":47,"value":696},{"type":41,"tag":498,"props":938,"children":939},{"style":528},[940],{"type":47,"value":941}," e",{"type":41,"tag":498,"props":943,"children":944},{"style":511},[945],{"type":47,"value":247},{"type":41,"tag":498,"props":947,"children":948},{"style":528},[949],{"type":47,"value":446},{"type":41,"tag":498,"props":951,"children":952},{"style":765},[953],{"type":47,"value":615},{"type":41,"tag":498,"props":955,"children":956},{"style":511},[957],{"type":47,"value":536},{"type":41,"tag":498,"props":959,"children":961},{"style":960},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[962],{"type":47,"value":963},"     \u002F\u002F use client coords; verify deltas on-device\n",{"type":41,"tag":498,"props":965,"children":967},{"class":500,"line":966},12,[968,972,976],{"type":41,"tag":498,"props":969,"children":970},{"style":511},[971],{"type":47,"value":797},{"type":41,"tag":498,"props":973,"children":974},{"style":528},[975],{"type":47,"value":615},{"type":41,"tag":498,"props":977,"children":978},{"style":511},[979],{"type":47,"value":620},{"type":41,"tag":498,"props":981,"children":983},{"class":500,"line":982},13,[984],{"type":41,"tag":498,"props":985,"children":986},{"emptyLinePlaceholder":654},[987],{"type":47,"value":657},{"type":41,"tag":498,"props":989,"children":991},{"class":500,"line":990},14,[992,996,1000,1004,1008,1012,1017,1021,1025,1029,1034],{"type":41,"tag":498,"props":993,"children":994},{"style":528},[995],{"type":47,"value":606},{"type":41,"tag":498,"props":997,"children":998},{"style":511},[999],{"type":47,"value":247},{"type":41,"tag":498,"props":1001,"children":1002},{"style":587},[1003],{"type":47,"value":674},{"type":41,"tag":498,"props":1005,"children":1006},{"style":528},[1007],{"type":47,"value":595},{"type":41,"tag":498,"props":1009,"children":1010},{"style":511},[1011],{"type":47,"value":600},{"type":41,"tag":498,"props":1013,"children":1014},{"style":603},[1015],{"type":47,"value":1016},"pointerup",{"type":41,"tag":498,"props":1018,"children":1019},{"style":511},[1020],{"type":47,"value":600},{"type":41,"tag":498,"props":1022,"children":1023},{"style":511},[1024],{"type":47,"value":696},{"type":41,"tag":498,"props":1026,"children":1027},{"style":562},[1028],{"type":47,"value":701},{"type":41,"tag":498,"props":1030,"children":1031},{"style":511},[1032],{"type":47,"value":1033}," ()",{"type":41,"tag":498,"props":1035,"children":1036},{"style":511},[1037],{"type":47,"value":721},{"type":41,"tag":498,"props":1039,"children":1041},{"class":500,"line":1040},15,[1042,1046,1050,1054],{"type":41,"tag":498,"props":1043,"children":1044},{"style":528},[1045],{"type":47,"value":730},{"type":41,"tag":498,"props":1047,"children":1048},{"style":511},[1049],{"type":47,"value":735},{"type":41,"tag":498,"props":1051,"children":1052},{"style":640},[1053],{"type":47,"value":643},{"type":41,"tag":498,"props":1055,"children":1056},{"style":511},[1057],{"type":47,"value":620},{"type":41,"tag":498,"props":1059,"children":1061},{"class":500,"line":1060},16,[1062,1066,1070],{"type":41,"tag":498,"props":1063,"children":1064},{"style":511},[1065],{"type":47,"value":797},{"type":41,"tag":498,"props":1067,"children":1068},{"style":528},[1069],{"type":47,"value":615},{"type":41,"tag":498,"props":1071,"children":1072},{"style":511},[1073],{"type":47,"value":620},{"type":41,"tag":326,"props":1075,"children":1077},{"id":1076},"_3-keep-pinch-activation-working",[1078],{"type":47,"value":1079},"3. Keep Pinch Activation Working",{"type":41,"tag":50,"props":1081,"children":1082},{},[1083],{"type":47,"value":1084},"Even with drag enabled, keep your focusable elements intact so pinch-to-activate still works for buttons and links. Drag is additive, not a replacement for focus navigation.",{"type":41,"tag":42,"props":1086,"children":1088},{"id":1087},"patterns",[1089],{"type":47,"value":1090},"Patterns",{"type":41,"tag":326,"props":1092,"children":1093},{"id":606},[1094],{"type":47,"value":1095},"Slider",{"type":41,"tag":487,"props":1097,"children":1099},{"className":550,"code":1098,"language":552,"meta":492,"style":492},"function update(x) {\n  var rect = slider.getBoundingClientRect();\n  var pct = Math.max(0, Math.min(1, (x - rect.left) \u002F rect.width));\n  setValue(pct);\n  \u002F\u002F Reflect `pct` in your slider fill — see \u002Fadd-ui\n}\n",[1100],{"type":41,"tag":64,"props":1101,"children":1102},{"__ignoreMap":492},[1103,1133,1173,1299,1324,1332],{"type":41,"tag":498,"props":1104,"children":1105},{"class":500,"line":501},[1106,1111,1116,1120,1125,1129],{"type":41,"tag":498,"props":1107,"children":1108},{"style":562},[1109],{"type":47,"value":1110},"function",{"type":41,"tag":498,"props":1112,"children":1113},{"style":587},[1114],{"type":47,"value":1115}," update",{"type":41,"tag":498,"props":1117,"children":1118},{"style":511},[1119],{"type":47,"value":595},{"type":41,"tag":498,"props":1121,"children":1122},{"style":709},[1123],{"type":47,"value":1124},"x",{"type":41,"tag":498,"props":1126,"children":1127},{"style":511},[1128],{"type":47,"value":615},{"type":41,"tag":498,"props":1130,"children":1131},{"style":511},[1132],{"type":47,"value":721},{"type":41,"tag":498,"props":1134,"children":1135},{"class":500,"line":623},[1136,1141,1146,1150,1155,1159,1164,1169],{"type":41,"tag":498,"props":1137,"children":1138},{"style":562},[1139],{"type":47,"value":1140},"  var",{"type":41,"tag":498,"props":1142,"children":1143},{"style":528},[1144],{"type":47,"value":1145}," rect",{"type":41,"tag":498,"props":1147,"children":1148},{"style":511},[1149],{"type":47,"value":735},{"type":41,"tag":498,"props":1151,"children":1152},{"style":528},[1153],{"type":47,"value":1154}," slider",{"type":41,"tag":498,"props":1156,"children":1157},{"style":511},[1158],{"type":47,"value":247},{"type":41,"tag":498,"props":1160,"children":1161},{"style":587},[1162],{"type":47,"value":1163},"getBoundingClientRect",{"type":41,"tag":498,"props":1165,"children":1166},{"style":765},[1167],{"type":47,"value":1168},"()",{"type":41,"tag":498,"props":1170,"children":1171},{"style":511},[1172],{"type":47,"value":620},{"type":41,"tag":498,"props":1174,"children":1175},{"class":500,"line":650},[1176,1180,1185,1189,1194,1198,1203,1207,1213,1217,1221,1225,1230,1234,1239,1243,1247,1251,1256,1260,1264,1269,1273,1277,1281,1285,1290,1295],{"type":41,"tag":498,"props":1177,"children":1178},{"style":562},[1179],{"type":47,"value":1140},{"type":41,"tag":498,"props":1181,"children":1182},{"style":528},[1183],{"type":47,"value":1184}," pct",{"type":41,"tag":498,"props":1186,"children":1187},{"style":511},[1188],{"type":47,"value":735},{"type":41,"tag":498,"props":1190,"children":1191},{"style":528},[1192],{"type":47,"value":1193}," Math",{"type":41,"tag":498,"props":1195,"children":1196},{"style":511},[1197],{"type":47,"value":247},{"type":41,"tag":498,"props":1199,"children":1200},{"style":587},[1201],{"type":47,"value":1202},"max",{"type":41,"tag":498,"props":1204,"children":1205},{"style":765},[1206],{"type":47,"value":595},{"type":41,"tag":498,"props":1208,"children":1210},{"style":1209},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[1211],{"type":47,"value":1212},"0",{"type":41,"tag":498,"props":1214,"children":1215},{"style":511},[1216],{"type":47,"value":696},{"type":41,"tag":498,"props":1218,"children":1219},{"style":528},[1220],{"type":47,"value":1193},{"type":41,"tag":498,"props":1222,"children":1223},{"style":511},[1224],{"type":47,"value":247},{"type":41,"tag":498,"props":1226,"children":1227},{"style":587},[1228],{"type":47,"value":1229},"min",{"type":41,"tag":498,"props":1231,"children":1232},{"style":765},[1233],{"type":47,"value":595},{"type":41,"tag":498,"props":1235,"children":1236},{"style":1209},[1237],{"type":47,"value":1238},"1",{"type":41,"tag":498,"props":1240,"children":1241},{"style":511},[1242],{"type":47,"value":696},{"type":41,"tag":498,"props":1244,"children":1245},{"style":765},[1246],{"type":47,"value":706},{"type":41,"tag":498,"props":1248,"children":1249},{"style":528},[1250],{"type":47,"value":1124},{"type":41,"tag":498,"props":1252,"children":1253},{"style":511},[1254],{"type":47,"value":1255}," -",{"type":41,"tag":498,"props":1257,"children":1258},{"style":528},[1259],{"type":47,"value":1145},{"type":41,"tag":498,"props":1261,"children":1262},{"style":511},[1263],{"type":47,"value":247},{"type":41,"tag":498,"props":1265,"children":1266},{"style":528},[1267],{"type":47,"value":1268},"left",{"type":41,"tag":498,"props":1270,"children":1271},{"style":765},[1272],{"type":47,"value":898},{"type":41,"tag":498,"props":1274,"children":1275},{"style":511},[1276],{"type":47,"value":94},{"type":41,"tag":498,"props":1278,"children":1279},{"style":528},[1280],{"type":47,"value":1145},{"type":41,"tag":498,"props":1282,"children":1283},{"style":511},[1284],{"type":47,"value":247},{"type":41,"tag":498,"props":1286,"children":1287},{"style":528},[1288],{"type":47,"value":1289},"width",{"type":41,"tag":498,"props":1291,"children":1292},{"style":765},[1293],{"type":47,"value":1294},"))",{"type":41,"tag":498,"props":1296,"children":1297},{"style":511},[1298],{"type":47,"value":620},{"type":41,"tag":498,"props":1300,"children":1301},{"class":500,"line":660},[1302,1307,1311,1316,1320],{"type":41,"tag":498,"props":1303,"children":1304},{"style":587},[1305],{"type":47,"value":1306},"  setValue",{"type":41,"tag":498,"props":1308,"children":1309},{"style":765},[1310],{"type":47,"value":595},{"type":41,"tag":498,"props":1312,"children":1313},{"style":528},[1314],{"type":47,"value":1315},"pct",{"type":41,"tag":498,"props":1317,"children":1318},{"style":765},[1319],{"type":47,"value":615},{"type":41,"tag":498,"props":1321,"children":1322},{"style":511},[1323],{"type":47,"value":620},{"type":41,"tag":498,"props":1325,"children":1326},{"class":500,"line":724},[1327],{"type":41,"tag":498,"props":1328,"children":1329},{"style":960},[1330],{"type":47,"value":1331},"  \u002F\u002F Reflect `pct` in your slider fill — see \u002Fadd-ui\n",{"type":41,"tag":498,"props":1333,"children":1334},{"class":500,"line":747},[1335],{"type":41,"tag":498,"props":1336,"children":1337},{"style":511},[1338],{"type":47,"value":1339},"}\n",{"type":41,"tag":326,"props":1341,"children":1343},{"id":1342},"pan-draw",[1344],{"type":47,"value":1345},"Pan \u002F Draw",{"type":41,"tag":487,"props":1347,"children":1349},{"className":550,"code":1348,"language":552,"meta":492,"style":492},"var last = null;\ncanvas.addEventListener('pointerdown', function (e) { last = { x: e.clientX, y: e.clientY }; });\ncanvas.addEventListener('pointermove', function (e) {\n  if (!last) return;\n  drawLine(last.x, last.y, e.clientX, e.clientY);\n  last = { x: e.clientX, y: e.clientY };\n});\ncanvas.addEventListener('pointerup', function () { last = null; });\n",[1350],{"type":41,"tag":64,"props":1351,"children":1352},{"__ignoreMap":492},[1353,1374,1507,1562,1594,1675,1740,1755],{"type":41,"tag":498,"props":1354,"children":1355},{"class":500,"line":501},[1356,1360,1365,1369],{"type":41,"tag":498,"props":1357,"children":1358},{"style":562},[1359],{"type":47,"value":565},{"type":41,"tag":498,"props":1361,"children":1362},{"style":528},[1363],{"type":47,"value":1364}," last ",{"type":41,"tag":498,"props":1366,"children":1367},{"style":511},[1368],{"type":47,"value":575},{"type":41,"tag":498,"props":1370,"children":1371},{"style":511},[1372],{"type":47,"value":1373}," null;\n",{"type":41,"tag":498,"props":1375,"children":1376},{"class":500,"line":623},[1377,1382,1386,1390,1394,1398,1402,1406,1410,1414,1418,1422,1426,1430,1435,1439,1443,1448,1452,1456,1460,1464,1468,1473,1477,1481,1485,1489,1494,1499,1503],{"type":41,"tag":498,"props":1378,"children":1379},{"style":528},[1380],{"type":47,"value":1381},"canvas",{"type":41,"tag":498,"props":1383,"children":1384},{"style":511},[1385],{"type":47,"value":247},{"type":41,"tag":498,"props":1387,"children":1388},{"style":587},[1389],{"type":47,"value":674},{"type":41,"tag":498,"props":1391,"children":1392},{"style":528},[1393],{"type":47,"value":595},{"type":41,"tag":498,"props":1395,"children":1396},{"style":511},[1397],{"type":47,"value":600},{"type":41,"tag":498,"props":1399,"children":1400},{"style":603},[1401],{"type":47,"value":687},{"type":41,"tag":498,"props":1403,"children":1404},{"style":511},[1405],{"type":47,"value":600},{"type":41,"tag":498,"props":1407,"children":1408},{"style":511},[1409],{"type":47,"value":696},{"type":41,"tag":498,"props":1411,"children":1412},{"style":562},[1413],{"type":47,"value":701},{"type":41,"tag":498,"props":1415,"children":1416},{"style":511},[1417],{"type":47,"value":706},{"type":41,"tag":498,"props":1419,"children":1420},{"style":709},[1421],{"type":47,"value":712},{"type":41,"tag":498,"props":1423,"children":1424},{"style":511},[1425],{"type":47,"value":615},{"type":41,"tag":498,"props":1427,"children":1428},{"style":511},[1429],{"type":47,"value":514},{"type":41,"tag":498,"props":1431,"children":1432},{"style":528},[1433],{"type":47,"value":1434}," last",{"type":41,"tag":498,"props":1436,"children":1437},{"style":511},[1438],{"type":47,"value":735},{"type":41,"tag":498,"props":1440,"children":1441},{"style":511},[1442],{"type":47,"value":514},{"type":41,"tag":498,"props":1444,"children":1445},{"style":765},[1446],{"type":47,"value":1447}," x",{"type":41,"tag":498,"props":1449,"children":1450},{"style":511},[1451],{"type":47,"value":525},{"type":41,"tag":498,"props":1453,"children":1454},{"style":528},[1455],{"type":47,"value":941},{"type":41,"tag":498,"props":1457,"children":1458},{"style":511},[1459],{"type":47,"value":247},{"type":41,"tag":498,"props":1461,"children":1462},{"style":528},[1463],{"type":47,"value":439},{"type":41,"tag":498,"props":1465,"children":1466},{"style":511},[1467],{"type":47,"value":696},{"type":41,"tag":498,"props":1469,"children":1470},{"style":765},[1471],{"type":47,"value":1472}," y",{"type":41,"tag":498,"props":1474,"children":1475},{"style":511},[1476],{"type":47,"value":525},{"type":41,"tag":498,"props":1478,"children":1479},{"style":528},[1480],{"type":47,"value":941},{"type":41,"tag":498,"props":1482,"children":1483},{"style":511},[1484],{"type":47,"value":247},{"type":41,"tag":498,"props":1486,"children":1487},{"style":528},[1488],{"type":47,"value":446},{"type":41,"tag":498,"props":1490,"children":1491},{"style":511},[1492],{"type":47,"value":1493}," };",{"type":41,"tag":498,"props":1495,"children":1496},{"style":511},[1497],{"type":47,"value":1498}," }",{"type":41,"tag":498,"props":1500,"children":1501},{"style":528},[1502],{"type":47,"value":615},{"type":41,"tag":498,"props":1504,"children":1505},{"style":511},[1506],{"type":47,"value":620},{"type":41,"tag":498,"props":1508,"children":1509},{"class":500,"line":650},[1510,1514,1518,1522,1526,1530,1534,1538,1542,1546,1550,1554,1558],{"type":41,"tag":498,"props":1511,"children":1512},{"style":528},[1513],{"type":47,"value":1381},{"type":41,"tag":498,"props":1515,"children":1516},{"style":511},[1517],{"type":47,"value":247},{"type":41,"tag":498,"props":1519,"children":1520},{"style":587},[1521],{"type":47,"value":674},{"type":41,"tag":498,"props":1523,"children":1524},{"style":528},[1525],{"type":47,"value":595},{"type":41,"tag":498,"props":1527,"children":1528},{"style":511},[1529],{"type":47,"value":600},{"type":41,"tag":498,"props":1531,"children":1532},{"style":603},[1533],{"type":47,"value":431},{"type":41,"tag":498,"props":1535,"children":1536},{"style":511},[1537],{"type":47,"value":600},{"type":41,"tag":498,"props":1539,"children":1540},{"style":511},[1541],{"type":47,"value":696},{"type":41,"tag":498,"props":1543,"children":1544},{"style":562},[1545],{"type":47,"value":701},{"type":41,"tag":498,"props":1547,"children":1548},{"style":511},[1549],{"type":47,"value":706},{"type":41,"tag":498,"props":1551,"children":1552},{"style":709},[1553],{"type":47,"value":712},{"type":41,"tag":498,"props":1555,"children":1556},{"style":511},[1557],{"type":47,"value":615},{"type":41,"tag":498,"props":1559,"children":1560},{"style":511},[1561],{"type":47,"value":721},{"type":41,"tag":498,"props":1563,"children":1564},{"class":500,"line":660},[1565,1569,1573,1577,1582,1586,1590],{"type":41,"tag":498,"props":1566,"children":1567},{"style":876},[1568],{"type":47,"value":879},{"type":41,"tag":498,"props":1570,"children":1571},{"style":765},[1572],{"type":47,"value":706},{"type":41,"tag":498,"props":1574,"children":1575},{"style":511},[1576],{"type":47,"value":888},{"type":41,"tag":498,"props":1578,"children":1579},{"style":528},[1580],{"type":47,"value":1581},"last",{"type":41,"tag":498,"props":1583,"children":1584},{"style":765},[1585],{"type":47,"value":898},{"type":41,"tag":498,"props":1587,"children":1588},{"style":876},[1589],{"type":47,"value":903},{"type":41,"tag":498,"props":1591,"children":1592},{"style":511},[1593],{"type":47,"value":620},{"type":41,"tag":498,"props":1595,"children":1596},{"class":500,"line":724},[1597,1602,1606,1610,1614,1618,1622,1626,1630,1635,1639,1643,1647,1651,1655,1659,1663,1667,1671],{"type":41,"tag":498,"props":1598,"children":1599},{"style":587},[1600],{"type":47,"value":1601},"  drawLine",{"type":41,"tag":498,"props":1603,"children":1604},{"style":765},[1605],{"type":47,"value":595},{"type":41,"tag":498,"props":1607,"children":1608},{"style":528},[1609],{"type":47,"value":1581},{"type":41,"tag":498,"props":1611,"children":1612},{"style":511},[1613],{"type":47,"value":247},{"type":41,"tag":498,"props":1615,"children":1616},{"style":528},[1617],{"type":47,"value":1124},{"type":41,"tag":498,"props":1619,"children":1620},{"style":511},[1621],{"type":47,"value":696},{"type":41,"tag":498,"props":1623,"children":1624},{"style":528},[1625],{"type":47,"value":1434},{"type":41,"tag":498,"props":1627,"children":1628},{"style":511},[1629],{"type":47,"value":247},{"type":41,"tag":498,"props":1631,"children":1632},{"style":528},[1633],{"type":47,"value":1634},"y",{"type":41,"tag":498,"props":1636,"children":1637},{"style":511},[1638],{"type":47,"value":696},{"type":41,"tag":498,"props":1640,"children":1641},{"style":528},[1642],{"type":47,"value":941},{"type":41,"tag":498,"props":1644,"children":1645},{"style":511},[1646],{"type":47,"value":247},{"type":41,"tag":498,"props":1648,"children":1649},{"style":528},[1650],{"type":47,"value":439},{"type":41,"tag":498,"props":1652,"children":1653},{"style":511},[1654],{"type":47,"value":696},{"type":41,"tag":498,"props":1656,"children":1657},{"style":528},[1658],{"type":47,"value":941},{"type":41,"tag":498,"props":1660,"children":1661},{"style":511},[1662],{"type":47,"value":247},{"type":41,"tag":498,"props":1664,"children":1665},{"style":528},[1666],{"type":47,"value":446},{"type":41,"tag":498,"props":1668,"children":1669},{"style":765},[1670],{"type":47,"value":615},{"type":41,"tag":498,"props":1672,"children":1673},{"style":511},[1674],{"type":47,"value":620},{"type":41,"tag":498,"props":1676,"children":1677},{"class":500,"line":747},[1678,1683,1687,1691,1695,1699,1703,1707,1711,1715,1719,1723,1727,1731,1735],{"type":41,"tag":498,"props":1679,"children":1680},{"style":528},[1681],{"type":47,"value":1682},"  last",{"type":41,"tag":498,"props":1684,"children":1685},{"style":511},[1686],{"type":47,"value":735},{"type":41,"tag":498,"props":1688,"children":1689},{"style":511},[1690],{"type":47,"value":514},{"type":41,"tag":498,"props":1692,"children":1693},{"style":765},[1694],{"type":47,"value":1447},{"type":41,"tag":498,"props":1696,"children":1697},{"style":511},[1698],{"type":47,"value":525},{"type":41,"tag":498,"props":1700,"children":1701},{"style":528},[1702],{"type":47,"value":941},{"type":41,"tag":498,"props":1704,"children":1705},{"style":511},[1706],{"type":47,"value":247},{"type":41,"tag":498,"props":1708,"children":1709},{"style":528},[1710],{"type":47,"value":439},{"type":41,"tag":498,"props":1712,"children":1713},{"style":511},[1714],{"type":47,"value":696},{"type":41,"tag":498,"props":1716,"children":1717},{"style":765},[1718],{"type":47,"value":1472},{"type":41,"tag":498,"props":1720,"children":1721},{"style":511},[1722],{"type":47,"value":525},{"type":41,"tag":498,"props":1724,"children":1725},{"style":528},[1726],{"type":47,"value":941},{"type":41,"tag":498,"props":1728,"children":1729},{"style":511},[1730],{"type":47,"value":247},{"type":41,"tag":498,"props":1732,"children":1733},{"style":528},[1734],{"type":47,"value":446},{"type":41,"tag":498,"props":1736,"children":1737},{"style":511},[1738],{"type":47,"value":1739}," };\n",{"type":41,"tag":498,"props":1741,"children":1742},{"class":500,"line":791},[1743,1747,1751],{"type":41,"tag":498,"props":1744,"children":1745},{"style":511},[1746],{"type":47,"value":797},{"type":41,"tag":498,"props":1748,"children":1749},{"style":528},[1750],{"type":47,"value":615},{"type":41,"tag":498,"props":1752,"children":1753},{"style":511},[1754],{"type":47,"value":620},{"type":41,"tag":498,"props":1756,"children":1757},{"class":500,"line":808},[1758,1762,1766,1770,1774,1778,1782,1786,1790,1794,1798,1802,1806,1810,1815,1819,1823],{"type":41,"tag":498,"props":1759,"children":1760},{"style":528},[1761],{"type":47,"value":1381},{"type":41,"tag":498,"props":1763,"children":1764},{"style":511},[1765],{"type":47,"value":247},{"type":41,"tag":498,"props":1767,"children":1768},{"style":587},[1769],{"type":47,"value":674},{"type":41,"tag":498,"props":1771,"children":1772},{"style":528},[1773],{"type":47,"value":595},{"type":41,"tag":498,"props":1775,"children":1776},{"style":511},[1777],{"type":47,"value":600},{"type":41,"tag":498,"props":1779,"children":1780},{"style":603},[1781],{"type":47,"value":1016},{"type":41,"tag":498,"props":1783,"children":1784},{"style":511},[1785],{"type":47,"value":600},{"type":41,"tag":498,"props":1787,"children":1788},{"style":511},[1789],{"type":47,"value":696},{"type":41,"tag":498,"props":1791,"children":1792},{"style":562},[1793],{"type":47,"value":701},{"type":41,"tag":498,"props":1795,"children":1796},{"style":511},[1797],{"type":47,"value":1033},{"type":41,"tag":498,"props":1799,"children":1800},{"style":511},[1801],{"type":47,"value":514},{"type":41,"tag":498,"props":1803,"children":1804},{"style":528},[1805],{"type":47,"value":1434},{"type":41,"tag":498,"props":1807,"children":1808},{"style":511},[1809],{"type":47,"value":735},{"type":41,"tag":498,"props":1811,"children":1812},{"style":511},[1813],{"type":47,"value":1814}," null;",{"type":41,"tag":498,"props":1816,"children":1817},{"style":511},[1818],{"type":47,"value":1498},{"type":41,"tag":498,"props":1820,"children":1821},{"style":528},[1822],{"type":47,"value":615},{"type":41,"tag":498,"props":1824,"children":1825},{"style":511},[1826],{"type":47,"value":620},{"type":41,"tag":42,"props":1828,"children":1830},{"id":1829},"verify",[1831],{"type":47,"value":1832},"Verify",{"type":41,"tag":56,"props":1834,"children":1837},{"className":1835},[1836],"contains-task-list",[1838,1850,1874,1903,1912,1928],{"type":41,"tag":60,"props":1839,"children":1842},{"className":1840},[1841],"task-list-item",[1843,1848],{"type":41,"tag":1844,"props":1845,"children":1847},"input",{"disabled":654,"type":1846},"checkbox",[],{"type":47,"value":1849}," Pinch activates focused elements (buttons\u002Flinks work with no extra code)",{"type":41,"tag":60,"props":1851,"children":1853},{"className":1852},[1841],[1854,1857,1859,1865,1867,1872],{"type":41,"tag":1844,"props":1855,"children":1856},{"disabled":654,"type":1846},[],{"type":47,"value":1858}," ",{"type":41,"tag":64,"props":1860,"children":1862},{"className":1861},[],[1863],{"type":47,"value":1864},"body { touch-action: none; }",{"type":47,"value":1866}," is in the ",{"type":41,"tag":110,"props":1868,"children":1869},{},[1870],{"type":47,"value":1871},"initial",{"type":47,"value":1873}," stylesheet (not injected later)",{"type":41,"tag":60,"props":1875,"children":1877},{"className":1876},[1841],[1878,1881,1883,1888,1889,1895,1896,1902],{"type":41,"tag":1844,"props":1879,"children":1880},{"disabled":654,"type":1846},[],{"type":47,"value":1882}," With drag enabled, the pointer stream arrives (",{"type":41,"tag":64,"props":1884,"children":1886},{"className":1885},[],[1887],{"type":47,"value":687},{"type":47,"value":94},{"type":41,"tag":64,"props":1890,"children":1892},{"className":1891},[],[1893],{"type":47,"value":1894},"move",{"type":47,"value":94},{"type":41,"tag":64,"props":1897,"children":1899},{"className":1898},[],[1900],{"type":47,"value":1901},"up",{"type":47,"value":615},{"type":41,"tag":60,"props":1904,"children":1906},{"className":1905},[1841],[1907,1910],{"type":41,"tag":1844,"props":1908,"children":1909},{"disabled":654,"type":1846},[],{"type":47,"value":1911}," Without opt-in, focus + pinch still work (no broken cursor expectation)",{"type":41,"tag":60,"props":1913,"children":1915},{"className":1914},[1841],[1916,1919,1921,1926],{"type":41,"tag":1844,"props":1917,"children":1918},{"disabled":654,"type":1846},[],{"type":47,"value":1920}," No ",{"type":41,"tag":64,"props":1922,"children":1924},{"className":1923},[],[1925],{"type":47,"value":397},{"type":47,"value":1927}," used",{"type":41,"tag":60,"props":1929,"children":1931},{"className":1930},[1841],[1932,1935,1937,1942],{"type":41,"tag":1844,"props":1933,"children":1934},{"disabled":654,"type":1846},[],{"type":47,"value":1936}," Drag event field assumptions verified on-device (logged ",{"type":41,"tag":64,"props":1938,"children":1940},{"className":1939},[],[1941],{"type":47,"value":431},{"type":47,"value":615},{"type":41,"tag":42,"props":1944,"children":1946},{"id":1945},"related-skills",[1947],{"type":47,"value":1948},"Related Skills",{"type":41,"tag":56,"props":1950,"children":1951},{},[1952,1962],{"type":41,"tag":60,"props":1953,"children":1954},{},[1955,1960],{"type":41,"tag":64,"props":1956,"children":1958},{"className":1957},[],[1959],{"type":47,"value":266},{"type":47,"value":1961}," — Build the focusable elements pinch activates",{"type":41,"tag":60,"props":1963,"children":1964},{},[1965,1970],{"type":41,"tag":64,"props":1966,"children":1968},{"className":1967},[],[1969],{"type":47,"value":245},{"type":47,"value":1971}," — Why a tap on a focused field opens the composer instead of dragging",{"type":41,"tag":1973,"props":1974,"children":1975},"style",{},[1976],{"type":47,"value":1977},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1979,"total":966},[1980,1994,2000,2014,2028,2042,2056],{"slug":1981,"name":1981,"fn":1982,"description":1983,"org":1984,"tags":1985,"stars":23,"repoUrl":24,"updatedAt":1993},"add-device-sensors","integrate device sensor data","Add device sensor data to a Meta Display Glasses webapp — IMU (accelerometer, gyroscope, orientation) via DeviceMotionEvent\u002FDeviceOrientationEvent, and GPS location via navigator.geolocation. Use when the user wants motion tracking, compass, level tool, step counter, shake detection, head tracking, or location.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1986,1987,1990],{"name":18,"slug":19,"type":16},{"name":1988,"slug":1989,"type":16},"Hardware","hardware",{"name":1991,"slug":1992,"type":16},"IoT","iot","2026-09-01T08:30:33.453548",{"slug":4,"name":4,"fn":5,"description":6,"org":1995,"tags":1996,"stars":23,"repoUrl":24,"updatedAt":25},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1997,1998,1999],{"name":21,"slug":22,"type":16},{"name":18,"slug":19,"type":16},{"name":14,"slug":15,"type":16},{"slug":2001,"name":2001,"fn":2002,"description":2003,"org":2004,"tags":2005,"stars":23,"repoUrl":24,"updatedAt":2013},"add-local-storage","add client-side data persistence","Add client-side data persistence to a Meta Display Glasses webapp using the W3C Web Storage API (localStorage and sessionStorage). Use when the user wants to save settings, cache data, persist state, or store user preferences.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2006,2007,2010],{"name":18,"slug":19,"type":16},{"name":2008,"slug":2009,"type":16},"Persistence","persistence",{"name":2011,"slug":2012,"type":16},"Storage","storage","2026-09-01T08:30:31.384362",{"slug":2015,"name":2015,"fn":2016,"description":2017,"org":2018,"tags":2019,"stars":23,"repoUrl":24,"updatedAt":2027},"add-offline","enable offline support for webapps","Make a Meta Display Glasses webapp work offline with a Service Worker + Cache API (precache the app shell, cache-first fetch, online\u002Foffline UI). Use when the user wants offline support or resilience to flaky Wi-Fi.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2020,2021,2024],{"name":18,"slug":19,"type":16},{"name":2022,"slug":2023,"type":16},"Offline","offline",{"name":2025,"slug":2026,"type":16},"Performance","performance","2026-09-01T08:30:33.83287",{"slug":2029,"name":2029,"fn":2030,"description":2031,"org":2032,"tags":2033,"stars":23,"repoUrl":24,"updatedAt":2041},"add-text-input","add text input to webapps","Add text entry to a Meta Display Glasses webapp. Standard HTML inputs open the on-glasses composer (handwriting + voice) when focused and tapped. Use when the user wants a text field, search box, form input, or notes area.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2034,2037,2038],{"name":2035,"slug":2036,"type":16},"Forms","forms",{"name":18,"slug":19,"type":16},{"name":2039,"slug":2040,"type":16},"UI Components","ui-components","2026-09-01T08:30:30.563354",{"slug":2043,"name":2043,"fn":2044,"description":2045,"org":2046,"tags":2047,"stars":23,"repoUrl":24,"updatedAt":2055},"add-ui","add UI components to webapps","Add UI components to a Meta Display Glasses webapp — screens, buttons, lists, cards, forms, toggles, counters, or nav bars. Works with vanilla JS and React apps. Use when the user wants to add any interactive UI element or new screen.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2048,2049,2051,2054],{"name":18,"slug":19,"type":16},{"name":2050,"slug":552,"type":16},"JavaScript",{"name":2052,"slug":2053,"type":16},"React","react",{"name":2039,"slug":2040,"type":16},"2026-09-01T08:30:27.477785",{"slug":2057,"name":2057,"fn":2058,"description":2059,"org":2060,"tags":2061,"stars":23,"repoUrl":24,"updatedAt":2072},"connect-api","connect webapps to REST APIs and WebSockets","Connect a Meta Display Glasses webapp to REST APIs or WebSockets. Use when the user wants to fetch data from an API, add real-time updates, show loading\u002Ferror states, or cache API responses.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2062,2065,2066,2069],{"name":2063,"slug":2064,"type":16},"API Development","api-development",{"name":18,"slug":19,"type":16},{"name":2067,"slug":2068,"type":16},"REST API","rest-api",{"name":2070,"slug":2071,"type":16},"WebSockets","websockets","2026-09-01T08:30:30.968156",{"items":2074,"total":2252},[2075,2095,2107,2128,2147,2164,2175,2189,2202,2215,2230,2242],{"slug":2076,"name":2076,"fn":2077,"description":2078,"org":2079,"tags":2080,"stars":2092,"repoUrl":2093,"updatedAt":2094},"relay-best-practices","write idiomatic Relay code","Best practices for writing idiomatic Relay code. ALWAYS use this skill when writing or modifying React components that use Relay for data fetching. Covers fragments, queries, mutations, pagination, and common anti-patterns. Use when you see `useFragment`, `useLazyLoadQuery`, `usePreloadedQuery`, `useMutation`, `usePaginationFragment`, `graphql` template literals, `react-relay` imports, or `__generated__\u002F*.graphql` files. Also use when asked to explain Relay concepts, debug Relay issues, or review Relay code.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2081,2084,2085,2088,2089],{"name":2082,"slug":2083,"type":16},"Engineering","engineering",{"name":18,"slug":19,"type":16},{"name":2086,"slug":2087,"type":16},"GraphQL","graphql",{"name":2052,"slug":2053,"type":16},{"name":2090,"slug":2091,"type":16},"Relay","relay",18950,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Frelay","2026-04-22T04:58:15.370563",{"slug":2096,"name":2096,"fn":2097,"description":2098,"org":2099,"tags":2100,"stars":2092,"repoUrl":2093,"updatedAt":2106},"relay-performance","optimize Relay application performance","Performance best practices for Relay applications. Use when optimizing data fetching, reducing re-renders, configuring caching, or improving time to first meaningful paint. Covers query placement, @defer, pagination, fetch policies, garbage collection, fragment granularity, and server-side filtering. Companion to the relay-best-practices skill which covers correctness and architecture.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2101,2102,2103,2104,2105],{"name":18,"slug":19,"type":16},{"name":2086,"slug":2087,"type":16},{"name":2025,"slug":2026,"type":16},{"name":2052,"slug":2053,"type":16},{"name":2090,"slug":2091,"type":16},"2026-06-10T07:30:28.726513",{"slug":2108,"name":2108,"fn":2109,"description":2110,"org":2111,"tags":2112,"stars":2125,"repoUrl":2126,"updatedAt":2127},"add-shape-types-to-torch-model","annotate PyTorch models with tensor shapes","Port a PyTorch model to use pyrefly's tensor shape type system (Tensor[[B, C, H, W]], Int[T]). Use this skill whenever the user wants to add shape annotations to a PyTorch model, type a model with tensor dimensions, port a model to use shape tracking, or annotate model forward methods with tensor shapes. Also use when the user mentions tensor shape ports, Int types for PyTorch, or pyrefly shape checking on a model file. Invoke BEFORE starting any model port — the skill's gated workflow prevents common failure modes.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2113,2116,2119,2122],{"name":2114,"slug":2115,"type":16},"Data Modeling","data-modeling",{"name":2117,"slug":2118,"type":16},"Deep Learning","deep-learning",{"name":2120,"slug":2121,"type":16},"Python","python",{"name":2123,"slug":2124,"type":16},"PyTorch","pytorch",6833,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fpyrefly","2026-07-18T05:12:08.515952",{"slug":2129,"name":2129,"fn":2130,"description":2131,"org":2132,"tags":2133,"stars":2144,"repoUrl":2145,"updatedAt":2146},"camera-streaming","configure camera streaming and photo capture","Stream, video frames, photo capture, resolution\u002Fframe rate configuration",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2134,2137,2138,2141],{"name":2135,"slug":2136,"type":16},"Camera","camera",{"name":1988,"slug":1989,"type":16},{"name":2139,"slug":2140,"type":16},"iOS","ios",{"name":2142,"slug":2143,"type":16},"Video","video",488,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fmeta-wearables-dat-ios","2026-08-06T05:38:47.523424",{"slug":2148,"name":2148,"fn":2149,"description":2150,"org":2151,"tags":2152,"stars":2144,"repoUrl":2145,"updatedAt":2163},"dat-conventions","develop iOS applications with DAT SDK","Swift patterns, async\u002Fawait, naming conventions, key types for DAT SDK iOS development",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2153,2154,2157,2160],{"name":2139,"slug":2140,"type":16},{"name":2155,"slug":2156,"type":16},"Mobile","mobile",{"name":2158,"slug":2159,"type":16},"SDK","sdk",{"name":2161,"slug":2162,"type":16},"Swift","swift","2026-08-06T05:38:49.536777",{"slug":2165,"name":2165,"fn":2166,"description":2167,"org":2168,"tags":2169,"stars":2144,"repoUrl":2145,"updatedAt":2174},"debugging","debug wearable device software","Common issues, Developer Mode, version compatibility, state machine diagnosis",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2170,2172,2173],{"name":2171,"slug":2165,"type":16},"Debugging",{"name":2082,"slug":2083,"type":16},{"name":2139,"slug":2140,"type":16},"2026-08-06T05:38:50.51086",{"slug":2176,"name":2176,"fn":2177,"description":2178,"org":2179,"tags":2180,"stars":2144,"repoUrl":2145,"updatedAt":2188},"display-access","manage display capabilities on wearable devices","Display capability setup, display-capable device selection, UI DSL, icons, buttons, images, and video playback",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2181,2182,2185,2186,2187],{"name":21,"slug":22,"type":16},{"name":2183,"slug":2184,"type":16},"Images","images",{"name":14,"slug":15,"type":16},{"name":2039,"slug":2040,"type":16},{"name":2142,"slug":2143,"type":16},"2026-08-06T05:38:53.520488",{"slug":2190,"name":2190,"fn":2191,"description":2192,"org":2193,"tags":2194,"stars":2144,"repoUrl":2145,"updatedAt":2201},"getting-started","set up Meta wearable SDK integration","SDK setup, Swift Package Manager integration, Info.plist configuration, and first connection to Meta glasses",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2195,2198,2199,2200],{"name":2196,"slug":2197,"type":16},"Configuration","configuration",{"name":2139,"slug":2140,"type":16},{"name":2158,"slug":2159,"type":16},{"name":2161,"slug":2162,"type":16},"2026-08-06T05:38:48.514522",{"slug":2203,"name":2203,"fn":2204,"description":2205,"org":2206,"tags":2207,"stars":2144,"repoUrl":2145,"updatedAt":2214},"live-debugging-mcp","debug iOS wearable applications","Use this whenever debugging an iOS DAT app with local DAT Inspector MCP tools, live device events, Meta AI app\u002Fdevice boundary issues, permissions, registration, sessions, streaming, callbacks, or user reports that the app cannot communicate with glasses.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2208,2209,2210,2213],{"name":2171,"slug":2165,"type":16},{"name":2139,"slug":2140,"type":16},{"name":2211,"slug":2212,"type":16},"MCP","mcp",{"name":2155,"slug":2156,"type":16},"2026-08-06T06:09:15.013902",{"slug":2216,"name":2216,"fn":2217,"description":2218,"org":2219,"tags":2220,"stars":2144,"repoUrl":2145,"updatedAt":2229},"mockdevice-testing","test wearable apps with mock devices","MockDeviceKit for testing without physical glasses hardware",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2221,2222,2223,2226],{"name":2139,"slug":2140,"type":16},{"name":2155,"slug":2156,"type":16},{"name":2224,"slug":2225,"type":16},"QA","qa",{"name":2227,"slug":2228,"type":16},"Testing","testing","2026-05-15T06:14:37.406692",{"slug":2231,"name":2231,"fn":2232,"description":2233,"org":2234,"tags":2235,"stars":2144,"repoUrl":2145,"updatedAt":2241},"permissions-registration","register apps with Meta AI","App registration with Meta AI, camera permission flows",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2236,2237,2238],{"name":2135,"slug":2136,"type":16},{"name":2139,"slug":2140,"type":16},{"name":2239,"slug":2240,"type":16},"Permissions","permissions","2026-05-15T06:14:46.030253",{"slug":2243,"name":2243,"fn":2244,"description":2245,"org":2246,"tags":2247,"stars":2144,"repoUrl":2145,"updatedAt":2251},"sample-app-guide","build wearable apps with camera streaming","Building a complete DAT app with camera streaming and photo capture",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2248,2249,2250],{"name":2135,"slug":2136,"type":16},{"name":2139,"slug":2140,"type":16},{"name":2155,"slug":2156,"type":16},"2026-08-06T05:38:51.509255",34]