48:I[307436,["/_next/static/immutable/chunks/1gchium7nww9r.js","/_next/static/immutable/chunks/2d7gr10yud7ll.js","/_next/static/immutable/chunks/2kyb8oum4hifz.js","/_next/static/immutable/chunks/17bc5e9cm9a-q.js","/_next/static/immutable/chunks/42sqmxmk3cnps.js","/_next/static/immutable/chunks/2-g5j69xga-j-.js","/_next/static/immutable/chunks/1vqnea-qk-oh0.js","/_next/static/immutable/chunks/0457ji1bpobon.js","/_next/static/immutable/chunks/2kc7ecqs15k_7.js","/_next/static/immutable/chunks/0a937jsg96ehe.js","/_next/static/immutable/chunks/1x71wnz52c5-i.js","/_next/static/immutable/chunks/3bmj1ccyv_bzu.js","/_next/static/immutable/chunks/3zyborr59s_3k.js","/_next/static/immutable/chunks/2iprwyxekay_3.js"],"Copy"] 25:["$","span",null,{"className":"device-lens"}] 26:["$","div",null,{"className":"device-status","children":[["$","span",null,{"children":"9:41"}],["$","span",null,{"className":"radios","children":[["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 17 11","width":"17","height":"11","children":["$","g",null,{"fill":"currentColor","children":[["$","rect",null,{"x":"0","y":"7","width":"3","height":"4","rx":"1"}],["$","rect",null,{"x":"4.5","y":"5","width":"3","height":"6","rx":"1"}],["$","rect",null,{"x":"9","y":"2.5","width":"3","height":"8.5","rx":"1"}],["$","rect",null,{"x":"13.5","y":"0","width":"3","height":"11","rx":"1"}]]}]}],["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 26 11","width":"26","height":"11","children":[["$","rect",null,{"x":"0.6","y":"0.6","width":"21","height":"9.8","rx":"2.8","fill":"none","stroke":"currentColor","strokeWidth":"1.2","opacity":"0.5"}],["$","rect",null,{"x":"23.4","y":"3.6","width":"2","height":"3.8","rx":"1","fill":"currentColor","opacity":"0.5"}],["$","rect",null,{"x":"2.2","y":"2.2","width":"14","height":"6.6","rx":"1.6","fill":"currentColor"}]]}]]}]]}] 27:["$","div",null,{"role":"img","aria-label":"iPhone, a contact file opened from Safari: Benjamin Franklin, with a phone number, an email, a link, an address, a note, to save with done","data-slot":"contacts-app","data-view":"preview","className":"@container absolute inset-0 overflow-hidden font-[family-name:-apple-system,BlinkMacSystemFont,system-ui,sans-serif] antialiased select-none bg-black","style":{"--ag-contacts-safe-top":"15.423cqw","--ag-contacts-safe-bottom":"8.458cqw","--ag-contacts-margin":"3.980cqw","--ag-contacts-row-y":"3.234cqw","--ag-contacts-radius":"5.473cqw","--ag-contacts-gap":"3.483cqw","--ag-contacts-trail":"5.224cqw","--ag-contacts-bar":"11.940cqw","--ag-contacts-bar-x":"4.478cqw","--ag-contacts-chevron":"6.468cqw","--ag-contacts-close":"4.975cqw","--ag-contacts-photo":"46.269cqw","--ag-contacts-monogram":"17.910cqw","--ag-contacts-photo-gap":"4.975cqw","--ag-contacts-title":"8.458cqw","--ag-contacts-title-leading":"9.950cqw","--ag-contacts-action":"15.423cqw","--ag-contacts-icon":"6.468cqw","--ag-contacts-action-gap":"2.985cqw","--ag-contacts-head-gap":"5.473cqw","--ag-contacts-label":"3.980cqw","--ag-contacts-label-leading":"5.224cqw","--ag-contacts-value":"4.726cqw","--ag-contacts-value-leading":"5.970cqw","--ag-contacts-sub":"4.229cqw","--ag-contacts-sub-leading":"5.473cqw","--ag-contacts-tab":"15.920cqw","--ag-contacts-tab-bottom":"6.468cqw","--ag-contacts-tab-gap":"2.488cqw","--ag-contacts-tab-icon":"6.468cqw","--ag-contacts-tab-word":"2.736cqw","--ag-contacts-behind-top":"13.930cqw","--ag-contacts-behind-x":"3.980cqw","--ag-contacts-behind-radius":"2.985cqw","--ag-contacts-sheet-top":"16.418cqw","--ag-contacts-sheet-radius":"9.453cqw","--ag-contacts-sheet-bar-top":"3.980cqw","--ag-contacts-home":"34.826cqw","--ag-contacts-home-h":"1.244cqw","--ag-contacts-home-bottom":"1.990cqw","--ag-contacts-head-page":"31.841cqw","--ag-contacts-head-sheet":"20.398cqw","--ag-contacts-tint":"oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h)","--ag-contacts-top":"color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), white 10%)","--ag-contacts-off":"color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), white 38%)","--ag-contacts-poster":"linear-gradient(180deg, color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), white 10%), oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h) 45%, color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), black 22%))"},"children":["$","div",null,{"aria-hidden":true,"className":"absolute inset-0","children":[["$","div",null,{"data-slot":"contacts-app-sheet","className":"absolute inset-x-0 top-(--ag-contacts-sheet-top) bottom-0 rounded-t-(--ag-contacts-sheet-radius) bg-(image:--ag-contacts-poster) [clip-path:inset(0_round_var(--ag-contacts-sheet-radius)_var(--ag-contacts-sheet-radius)_0_0)]","style":{"--ag-contacts-photo":"58.706cqw"},"children":[["$","div",null,{"data-slot":"contacts-app-card","className":"absolute inset-x-0 flex min-h-full flex-col gap-(--ag-contacts-gap)","style":{"top":"0%","transform":"translateY(0%)","paddingTop":"20.398cqw","paddingBottom":"11.940cqw"},"children":[["$","div",null,{"className":"flex flex-col items-center","children":[["$","div",null,{"data-slot":"contacts-app-photo","className":"grid size-(--ag-contacts-photo) shrink-0 place-items-center overflow-hidden rounded-full bg-white/20 font-semibold text-(length:--ag-contacts-monogram) text-white","children":["$","$L24",null,{"src":"/benjamin-franklin.png","alt":"","className":"size-full object-cover"}]}],["$","div",null,{"className":"mt-(--ag-contacts-photo-gap) px-(--ag-contacts-margin) text-center font-bold text-(length:--ag-contacts-title) leading-(--ag-contacts-title-leading) tracking-[-0.01em] text-white [text-shadow:0_1px_8px_rgb(0_0_0/0.18)]","children":"Benjamin Franklin"}],"$L30","$L31"]}],"$L32"]}],"$L33","$L34"]}],"$L35"]}]}] 28:["$","span",null,{"aria-hidden":true,"className":"device-glass-edge"}] 29:["$","div",null,{"className":"w-52 max-sm:hidden","children":["$","div",null,{"style":{"--device-status-ink":"#fff","--device-screen-background":"color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), white 10%)"},"data-device":"iphone","className":"device-frame","children":[[["$","span",null,{"className":"device-button action"}],["$","span",null,{"className":"device-button vol-up"}],["$","span",null,{"className":"device-button vol-down"}],["$","span",null,{"className":"device-button power"}],["$","span",null,{"aria-hidden":true,"className":"device-earpiece"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna left top"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna right top"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna left bottom"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna right bottom"}]],["$","div",null,{"className":"device-screen","children":[["$","div",null,{"aria-hidden":"true","children":[["$","div",null,{"className":"device-island","children":["$","span",null,{"className":"device-lens"}]}],["$","div",null,{"className":"device-status","children":[["$","span",null,{"children":"9:41"}],["$","span",null,{"className":"radios","children":[["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 17 11","width":"17","height":"11","children":["$","g",null,{"fill":"currentColor","children":[["$","rect",null,{"x":"0","y":"7","width":"3","height":"4","rx":"1"}],["$","rect",null,{"x":"4.5","y":"5","width":"3","height":"6","rx":"1"}],["$","rect",null,{"x":"9","y":"2.5","width":"3","height":"8.5","rx":"1"}],["$","rect",null,{"x":"13.5","y":"0","width":"3","height":"11","rx":"1"}]]}]}],["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 26 11","width":"26","height":"11","children":[["$","rect",null,{"x":"0.6","y":"0.6","width":"21","height":"9.8","rx":"2.8","fill":"none","stroke":"currentColor","strokeWidth":"1.2","opacity":"0.5"}],["$","rect",null,{"x":"23.4","y":"3.6","width":"2","height":"3.8","rx":"1","fill":"currentColor","opacity":"0.5"}],["$","rect",null,{"x":"2.2","y":"2.2","width":"14","height":"6.6","rx":"1.6","fill":"currentColor"}]]}]]}]]}]]}],["$","div",null,{"role":"img","aria-label":"iPhone Contacts: the card of Benjamin Franklin, with a phone number, an email, a link, an address, a note","data-slot":"contacts-app","data-view":"contact","className":"@container absolute inset-0 overflow-hidden font-[family-name:-apple-system,BlinkMacSystemFont,system-ui,sans-serif] antialiased select-none bg-(image:--ag-contacts-poster)","style":{"--ag-contacts-safe-top":"15.423cqw","--ag-contacts-safe-bottom":"8.458cqw","--ag-contacts-margin":"3.980cqw","--ag-contacts-row-y":"3.234cqw","--ag-contacts-radius":"5.473cqw","--ag-contacts-gap":"3.483cqw","--ag-contacts-trail":"5.224cqw","--ag-contacts-bar":"11.940cqw","--ag-contacts-bar-x":"4.478cqw","--ag-contacts-chevron":"6.468cqw","--ag-contacts-close":"4.975cqw","--ag-contacts-photo":"46.269cqw","--ag-contacts-monogram":"17.910cqw","--ag-contacts-photo-gap":"4.975cqw","--ag-contacts-title":"8.458cqw","--ag-contacts-title-leading":"9.950cqw","--ag-contacts-action":"15.423cqw","--ag-contacts-icon":"6.468cqw","--ag-contacts-action-gap":"2.985cqw","--ag-contacts-head-gap":"5.473cqw","--ag-contacts-label":"3.980cqw","--ag-contacts-label-leading":"5.224cqw","--ag-contacts-value":"4.726cqw","--ag-contacts-value-leading":"5.970cqw","--ag-contacts-sub":"4.229cqw","--ag-contacts-sub-leading":"5.473cqw","--ag-contacts-tab":"15.920cqw","--ag-contacts-tab-bottom":"6.468cqw","--ag-contacts-tab-gap":"2.488cqw","--ag-contacts-tab-icon":"6.468cqw","--ag-contacts-tab-word":"2.736cqw","--ag-contacts-behind-top":"13.930cqw","--ag-contacts-behind-x":"3.980cqw","--ag-contacts-behind-radius":"2.985cqw","--ag-contacts-sheet-top":"16.418cqw","--ag-contacts-sheet-radius":"9.453cqw","--ag-contacts-sheet-bar-top":"3.980cqw","--ag-contacts-home":"34.826cqw","--ag-contacts-home-h":"1.244cqw","--ag-contacts-home-bottom":"1.990cqw","--ag-contacts-head-page":"31.841cqw","--ag-contacts-head-sheet":"20.398cqw","--ag-contacts-tint":"oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h)","--ag-contacts-top":"color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), white 10%)","--ag-contacts-off":"color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), white 38%)","--ag-contacts-poster":"linear-gradient(180deg, color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), white 10%), oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h) 45%, color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), black 22%))"},"children":"$L36"}]]}],"$L37"]}]}] 2a:["$","$L22",null,{"name":"save","glance":"large","title":"a .vcf opened, then saved","description":"the import sheet the instant Create New Contact is pressed, and the card it saves","with":"franklin average","children":["$","div",null,{"className":"flex justify-center gap-8","children":[["$","div",null,{"className":"w-52","children":["$","div",null,{"style":{"--device-status-ink":"#fff","--device-screen-background":"#000"},"data-device":"iphone","className":"device-frame","children":[[["$","span",null,{"className":"device-button action"}],["$","span",null,{"className":"device-button vol-up"}],["$","span",null,{"className":"device-button vol-down"}],["$","span",null,{"className":"device-button power"}],["$","span",null,{"aria-hidden":true,"className":"device-earpiece"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna left top"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna right top"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna left bottom"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna right bottom"}]],["$","div",null,{"className":"device-screen","children":[["$","div",null,{"aria-hidden":"true","children":[["$","div",null,{"className":"device-island","children":["$","span",null,{"className":"device-lens"}]}],["$","div",null,{"className":"device-status","children":[["$","span",null,{"children":"9:41"}],["$","span",null,{"className":"radios","children":[["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 17 11","width":"17","height":"11","children":["$","g",null,{"fill":"currentColor","children":[["$","rect",null,{"x":"0","y":"7","width":"3","height":"4","rx":"1"}],["$","rect",null,{"x":"4.5","y":"5","width":"3","height":"6","rx":"1"}],["$","rect",null,{"x":"9","y":"2.5","width":"3","height":"8.5","rx":"1"}],["$","rect",null,{"x":"13.5","y":"0","width":"3","height":"11","rx":"1"}]]}]}],["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 26 11","width":"26","height":"11","children":[["$","rect",null,{"x":"0.6","y":"0.6","width":"21","height":"9.8","rx":"2.8","fill":"none","stroke":"currentColor","strokeWidth":"1.2","opacity":"0.5"}],["$","rect",null,{"x":"23.4","y":"3.6","width":"2","height":"3.8","rx":"1","fill":"currentColor","opacity":"0.5"}],["$","rect",null,{"x":"2.2","y":"2.2","width":"14","height":"6.6","rx":"1.6","fill":"currentColor"}]]}]]}]]}]]}],["$","div",null,{"role":"img","aria-label":"iPhone, a contact file opened: Benjamin Franklin, with a phone number, an email, a link, an address, a note, offering Create New Contact, pressed or Add to Existing Contact","data-slot":"contacts-app","data-view":"import","className":"@container absolute inset-0 overflow-hidden font-[family-name:-apple-system,BlinkMacSystemFont,system-ui,sans-serif] antialiased select-none bg-black","style":{"--ag-contacts-safe-top":"15.423cqw","--ag-contacts-safe-bottom":"8.458cqw","--ag-contacts-margin":"3.980cqw","--ag-contacts-row-y":"3.234cqw","--ag-contacts-radius":"5.473cqw","--ag-contacts-gap":"3.483cqw","--ag-contacts-trail":"5.224cqw","--ag-contacts-bar":"11.940cqw","--ag-contacts-bar-x":"4.478cqw","--ag-contacts-chevron":"6.468cqw","--ag-contacts-close":"4.975cqw","--ag-contacts-photo":"46.269cqw","--ag-contacts-monogram":"17.910cqw","--ag-contacts-photo-gap":"4.975cqw","--ag-contacts-title":"8.458cqw","--ag-contacts-title-leading":"9.950cqw","--ag-contacts-action":"15.423cqw","--ag-contacts-icon":"6.468cqw","--ag-contacts-action-gap":"2.985cqw","--ag-contacts-head-gap":"5.473cqw","--ag-contacts-label":"3.980cqw","--ag-contacts-label-leading":"5.224cqw","--ag-contacts-value":"4.726cqw","--ag-contacts-value-leading":"5.970cqw","--ag-contacts-sub":"4.229cqw","--ag-contacts-sub-leading":"5.473cqw","--ag-contacts-tab":"15.920cqw","--ag-contacts-tab-bottom":"6.468cqw","--ag-contacts-tab-gap":"2.488cqw","--ag-contacts-tab-icon":"6.468cqw","--ag-contacts-tab-word":"2.736cqw","--ag-contacts-behind-top":"13.930cqw","--ag-contacts-behind-x":"3.980cqw","--ag-contacts-behind-radius":"2.985cqw","--ag-contacts-sheet-top":"16.418cqw","--ag-contacts-sheet-radius":"9.453cqw","--ag-contacts-sheet-bar-top":"3.980cqw","--ag-contacts-home":"34.826cqw","--ag-contacts-home-h":"1.244cqw","--ag-contacts-home-bottom":"1.990cqw","--ag-contacts-head-page":"31.841cqw","--ag-contacts-head-sheet":"20.398cqw","--ag-contacts-tint":"oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h)","--ag-contacts-top":"color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), white 10%)","--ag-contacts-off":"color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), white 38%)","--ag-contacts-poster":"linear-gradient(180deg, color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), white 10%), oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h) 45%, color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), black 22%))"},"children":"$L38"}]]}],"$L39"]}]}],"$L3a"]}]}] 2b:["$","$L22",null,{"name":"averages","title":"the poster in the photo's colour","description":"three photos' averages, a pale one among them: each settles deep enough for white, a grey stays grey","with":"franklin","children":["$","div",null,{"className":"flex flex-wrap justify-center gap-10","children":[["$","div","#5b7fbf",{"className":"w-72","children":["$","div",null,{"style":{"--device-status-ink":"#fff","--device-screen-background":"color-mix(in oklab, oklch(from #5b7fbf clamp(0.4, l, 0.56) min(c, 0.12) h), white 10%)"},"data-device":"iphone","className":"device-frame","children":[[["$","span",null,{"className":"device-button action"}],["$","span",null,{"className":"device-button vol-up"}],["$","span",null,{"className":"device-button vol-down"}],["$","span",null,{"className":"device-button power"}],["$","span",null,{"aria-hidden":true,"className":"device-earpiece"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna left top"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna right top"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna left bottom"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna right bottom"}]],["$","div",null,{"className":"device-screen","children":[["$","div",null,{"aria-hidden":"true","children":[["$","div",null,{"className":"device-island","children":["$","span",null,{"className":"device-lens"}]}],["$","div",null,{"className":"device-status","children":[["$","span",null,{"children":"9:41"}],["$","span",null,{"className":"radios","children":[["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 17 11","width":"17","height":"11","children":["$","g",null,{"fill":"currentColor","children":[["$","rect",null,{"x":"0","y":"7","width":"3","height":"4","rx":"1"}],["$","rect",null,{"x":"4.5","y":"5","width":"3","height":"6","rx":"1"}],["$","rect",null,{"x":"9","y":"2.5","width":"3","height":"8.5","rx":"1"}],["$","rect",null,{"x":"13.5","y":"0","width":"3","height":"11","rx":"1"}]]}]}],["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 26 11","width":"26","height":"11","children":[["$","rect",null,{"x":"0.6","y":"0.6","width":"21","height":"9.8","rx":"2.8","fill":"none","stroke":"currentColor","strokeWidth":"1.2","opacity":"0.5"}],["$","rect",null,{"x":"23.4","y":"3.6","width":"2","height":"3.8","rx":"1","fill":"currentColor","opacity":"0.5"}],["$","rect",null,{"x":"2.2","y":"2.2","width":"14","height":"6.6","rx":"1.6","fill":"currentColor"}]]}]]}]]}]]}],["$","div",null,{"role":"img","aria-label":"iPhone Contacts: the card of Benjamin Franklin, with a phone number, an email, a link, an address, a note","data-slot":"contacts-app","data-view":"contact","className":"@container absolute inset-0 overflow-hidden font-[family-name:-apple-system,BlinkMacSystemFont,system-ui,sans-serif] antialiased select-none bg-(image:--ag-contacts-poster)","style":{"--ag-contacts-safe-top":"15.423cqw","--ag-contacts-safe-bottom":"8.458cqw","--ag-contacts-margin":"3.980cqw","--ag-contacts-row-y":"3.234cqw","--ag-contacts-radius":"5.473cqw","--ag-contacts-gap":"3.483cqw","--ag-contacts-trail":"5.224cqw","--ag-contacts-bar":"11.940cqw","--ag-contacts-bar-x":"4.478cqw","--ag-contacts-chevron":"6.468cqw","--ag-contacts-close":"4.975cqw","--ag-contacts-photo":"46.269cqw","--ag-contacts-monogram":"17.910cqw","--ag-contacts-photo-gap":"4.975cqw","--ag-contacts-title":"8.458cqw","--ag-contacts-title-leading":"9.950cqw","--ag-contacts-action":"15.423cqw","--ag-contacts-icon":"6.468cqw","--ag-contacts-action-gap":"2.985cqw","--ag-contacts-head-gap":"5.473cqw","--ag-contacts-label":"3.980cqw","--ag-contacts-label-leading":"5.224cqw","--ag-contacts-value":"4.726cqw","--ag-contacts-value-leading":"5.970cqw","--ag-contacts-sub":"4.229cqw","--ag-contacts-sub-leading":"5.473cqw","--ag-contacts-tab":"15.920cqw","--ag-contacts-tab-bottom":"6.468cqw","--ag-contacts-tab-gap":"2.488cqw","--ag-contacts-tab-icon":"6.468cqw","--ag-contacts-tab-word":"2.736cqw","--ag-contacts-behind-top":"13.930cqw","--ag-contacts-behind-x":"3.980cqw","--ag-contacts-behind-radius":"2.985cqw","--ag-contacts-sheet-top":"16.418cqw","--ag-contacts-sheet-radius":"9.453cqw","--ag-contacts-sheet-bar-top":"3.980cqw","--ag-contacts-home":"34.826cqw","--ag-contacts-home-h":"1.244cqw","--ag-contacts-home-bottom":"1.990cqw","--ag-contacts-head-page":"31.841cqw","--ag-contacts-head-sheet":"20.398cqw","--ag-contacts-tint":"oklch(from #5b7fbf clamp(0.4, l, 0.56) min(c, 0.12) h)","--ag-contacts-top":"color-mix(in oklab, oklch(from #5b7fbf clamp(0.4, l, 0.56) min(c, 0.12) h), white 10%)","--ag-contacts-off":"color-mix(in oklab, oklch(from #5b7fbf clamp(0.4, l, 0.56) min(c, 0.12) h), white 38%)","--ag-contacts-poster":"linear-gradient(180deg, color-mix(in oklab, oklch(from #5b7fbf clamp(0.4, l, 0.56) min(c, 0.12) h), white 10%), oklch(from #5b7fbf clamp(0.4, l, 0.56) min(c, 0.12) h) 45%, color-mix(in oklab, oklch(from #5b7fbf clamp(0.4, l, 0.56) min(c, 0.12) h), black 22%))"},"children":"$L3b"}]]}],"$L3c"]}]}],"$L3d","$L3e"]}]}] 2c:["$","$L22",null,{"name":"scroll","title":"the card scrolled","description":"top, halfway, foot: `scroll` from a story's progress","with":"franklin average","children":["$","div",null,{"className":"flex flex-wrap justify-center gap-10","children":[["$","div","0",{"className":"w-60","children":["$","div",null,{"style":{"--device-status-ink":"#fff","--device-screen-background":"color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), white 10%)"},"data-device":"iphone","className":"device-frame","children":[[["$","span",null,{"className":"device-button action"}],["$","span",null,{"className":"device-button vol-up"}],["$","span",null,{"className":"device-button vol-down"}],["$","span",null,{"className":"device-button power"}],["$","span",null,{"aria-hidden":true,"className":"device-earpiece"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna left top"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna right top"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna left bottom"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna right bottom"}]],["$","div",null,{"className":"device-screen","children":[["$","div",null,{"aria-hidden":"true","children":[["$","div",null,{"className":"device-island","children":["$","span",null,{"className":"device-lens"}]}],["$","div",null,{"className":"device-status","children":[["$","span",null,{"children":"9:41"}],["$","span",null,{"className":"radios","children":[["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 17 11","width":"17","height":"11","children":["$","g",null,{"fill":"currentColor","children":[["$","rect",null,{"x":"0","y":"7","width":"3","height":"4","rx":"1"}],["$","rect",null,{"x":"4.5","y":"5","width":"3","height":"6","rx":"1"}],["$","rect",null,{"x":"9","y":"2.5","width":"3","height":"8.5","rx":"1"}],["$","rect",null,{"x":"13.5","y":"0","width":"3","height":"11","rx":"1"}]]}]}],["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 26 11","width":"26","height":"11","children":[["$","rect",null,{"x":"0.6","y":"0.6","width":"21","height":"9.8","rx":"2.8","fill":"none","stroke":"currentColor","strokeWidth":"1.2","opacity":"0.5"}],["$","rect",null,{"x":"23.4","y":"3.6","width":"2","height":"3.8","rx":"1","fill":"currentColor","opacity":"0.5"}],["$","rect",null,{"x":"2.2","y":"2.2","width":"14","height":"6.6","rx":"1.6","fill":"currentColor"}]]}]]}]]}]]}],["$","div",null,{"role":"img","aria-label":"iPhone Contacts: the card of Benjamin Franklin, with a phone number, an email, a link, an address, a note","data-slot":"contacts-app","data-view":"contact","className":"@container absolute inset-0 overflow-hidden font-[family-name:-apple-system,BlinkMacSystemFont,system-ui,sans-serif] antialiased select-none bg-(image:--ag-contacts-poster)","style":{"--ag-contacts-safe-top":"15.423cqw","--ag-contacts-safe-bottom":"8.458cqw","--ag-contacts-margin":"3.980cqw","--ag-contacts-row-y":"3.234cqw","--ag-contacts-radius":"5.473cqw","--ag-contacts-gap":"3.483cqw","--ag-contacts-trail":"5.224cqw","--ag-contacts-bar":"11.940cqw","--ag-contacts-bar-x":"4.478cqw","--ag-contacts-chevron":"6.468cqw","--ag-contacts-close":"4.975cqw","--ag-contacts-photo":"46.269cqw","--ag-contacts-monogram":"17.910cqw","--ag-contacts-photo-gap":"4.975cqw","--ag-contacts-title":"8.458cqw","--ag-contacts-title-leading":"9.950cqw","--ag-contacts-action":"15.423cqw","--ag-contacts-icon":"6.468cqw","--ag-contacts-action-gap":"2.985cqw","--ag-contacts-head-gap":"5.473cqw","--ag-contacts-label":"3.980cqw","--ag-contacts-label-leading":"5.224cqw","--ag-contacts-value":"4.726cqw","--ag-contacts-value-leading":"5.970cqw","--ag-contacts-sub":"4.229cqw","--ag-contacts-sub-leading":"5.473cqw","--ag-contacts-tab":"15.920cqw","--ag-contacts-tab-bottom":"6.468cqw","--ag-contacts-tab-gap":"2.488cqw","--ag-contacts-tab-icon":"6.468cqw","--ag-contacts-tab-word":"2.736cqw","--ag-contacts-behind-top":"13.930cqw","--ag-contacts-behind-x":"3.980cqw","--ag-contacts-behind-radius":"2.985cqw","--ag-contacts-sheet-top":"16.418cqw","--ag-contacts-sheet-radius":"9.453cqw","--ag-contacts-sheet-bar-top":"3.980cqw","--ag-contacts-home":"34.826cqw","--ag-contacts-home-h":"1.244cqw","--ag-contacts-home-bottom":"1.990cqw","--ag-contacts-head-page":"31.841cqw","--ag-contacts-head-sheet":"20.398cqw","--ag-contacts-tint":"oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h)","--ag-contacts-top":"color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), white 10%)","--ag-contacts-off":"color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), white 38%)","--ag-contacts-poster":"linear-gradient(180deg, color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), white 10%), oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h) 45%, color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), black 22%))"},"children":"$L3f"}]]}],"$L40"]}]}],"$L41","$L42"]}]}] 2d:["$","$L22",null,{"name":"import","title":"the import sheet","description":"a long card is shown scrolled to its foot, where the two commands are, as a finger would have to","with":"franklin average","children":["$","div",null,{"className":"flex justify-center","children":["$","div",null,{"className":"w-80","children":["$","div",null,{"style":{"--device-status-ink":"#fff","--device-screen-background":"#000"},"data-device":"iphone","className":"device-frame","children":[[["$","span",null,{"className":"device-button action"}],["$","span",null,{"className":"device-button vol-up"}],["$","span",null,{"className":"device-button vol-down"}],["$","span",null,{"className":"device-button power"}],["$","span",null,{"aria-hidden":true,"className":"device-earpiece"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna left top"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna right top"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna left bottom"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna right bottom"}]],["$","div",null,{"className":"device-screen","children":[["$","div",null,{"aria-hidden":"true","children":[["$","div",null,{"className":"device-island","children":["$","span",null,{"className":"device-lens"}]}],["$","div",null,{"className":"device-status","children":[["$","span",null,{"children":"9:41"}],["$","span",null,{"className":"radios","children":[["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 17 11","width":"17","height":"11","children":["$","g",null,{"fill":"currentColor","children":[["$","rect",null,{"x":"0","y":"7","width":"3","height":"4","rx":"1"}],["$","rect",null,{"x":"4.5","y":"5","width":"3","height":"6","rx":"1"}],["$","rect",null,{"x":"9","y":"2.5","width":"3","height":"8.5","rx":"1"}],["$","rect",null,{"x":"13.5","y":"0","width":"3","height":"11","rx":"1"}]]}]}],["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 26 11","width":"26","height":"11","children":[["$","rect",null,{"x":"0.6","y":"0.6","width":"21","height":"9.8","rx":"2.8","fill":"none","stroke":"currentColor","strokeWidth":"1.2","opacity":"0.5"}],["$","rect",null,{"x":"23.4","y":"3.6","width":"2","height":"3.8","rx":"1","fill":"currentColor","opacity":"0.5"}],["$","rect",null,{"x":"2.2","y":"2.2","width":"14","height":"6.6","rx":"1.6","fill":"currentColor"}]]}]]}]]}]]}],["$","div",null,{"role":"img","aria-label":"iPhone, a contact file opened: Benjamin Franklin, with a phone number, an email, a link, an address, a note, offering Create New Contact or Add to Existing Contact","data-slot":"contacts-app","data-view":"import","className":"@container absolute inset-0 overflow-hidden font-[family-name:-apple-system,BlinkMacSystemFont,system-ui,sans-serif] antialiased select-none bg-black","style":{"--ag-contacts-safe-top":"15.423cqw","--ag-contacts-safe-bottom":"8.458cqw","--ag-contacts-margin":"3.980cqw","--ag-contacts-row-y":"3.234cqw","--ag-contacts-radius":"5.473cqw","--ag-contacts-gap":"3.483cqw","--ag-contacts-trail":"5.224cqw","--ag-contacts-bar":"11.940cqw","--ag-contacts-bar-x":"4.478cqw","--ag-contacts-chevron":"6.468cqw","--ag-contacts-close":"4.975cqw","--ag-contacts-photo":"46.269cqw","--ag-contacts-monogram":"17.910cqw","--ag-contacts-photo-gap":"4.975cqw","--ag-contacts-title":"8.458cqw","--ag-contacts-title-leading":"9.950cqw","--ag-contacts-action":"15.423cqw","--ag-contacts-icon":"6.468cqw","--ag-contacts-action-gap":"2.985cqw","--ag-contacts-head-gap":"5.473cqw","--ag-contacts-label":"3.980cqw","--ag-contacts-label-leading":"5.224cqw","--ag-contacts-value":"4.726cqw","--ag-contacts-value-leading":"5.970cqw","--ag-contacts-sub":"4.229cqw","--ag-contacts-sub-leading":"5.473cqw","--ag-contacts-tab":"15.920cqw","--ag-contacts-tab-bottom":"6.468cqw","--ag-contacts-tab-gap":"2.488cqw","--ag-contacts-tab-icon":"6.468cqw","--ag-contacts-tab-word":"2.736cqw","--ag-contacts-behind-top":"13.930cqw","--ag-contacts-behind-x":"3.980cqw","--ag-contacts-behind-radius":"2.985cqw","--ag-contacts-sheet-top":"16.418cqw","--ag-contacts-sheet-radius":"9.453cqw","--ag-contacts-sheet-bar-top":"3.980cqw","--ag-contacts-home":"34.826cqw","--ag-contacts-home-h":"1.244cqw","--ag-contacts-home-bottom":"1.990cqw","--ag-contacts-head-page":"31.841cqw","--ag-contacts-head-sheet":"20.398cqw","--ag-contacts-tint":"oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h)","--ag-contacts-top":"color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), white 10%)","--ag-contacts-off":"color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), white 38%)","--ag-contacts-poster":"linear-gradient(180deg, color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), white 10%), oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h) 45%, color-mix(in oklab, oklch(from rgb(78 69 57) clamp(0.4, l, 0.56) min(c, 0.12) h), black 22%))"},"children":"$L43"}]]}],"$L44"]}]}]}]}] 2e:["$","$L22",null,{"name":"sparse","title":"a short card","description":"no photo: the monogram on iOS's grey; a channel the card lacks is dimmed","with":"twain","children":["$","div",null,{"className":"flex flex-wrap justify-center gap-10","children":[["$","div",null,{"className":"w-80","children":["$","div",null,{"style":{"--device-status-ink":"#fff","--device-screen-background":"#000"},"data-device":"iphone","className":"device-frame","children":[[["$","span",null,{"className":"device-button action"}],["$","span",null,{"className":"device-button vol-up"}],["$","span",null,{"className":"device-button vol-down"}],["$","span",null,{"className":"device-button power"}],["$","span",null,{"aria-hidden":true,"className":"device-earpiece"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna left top"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna right top"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna left bottom"}],["$","span",null,{"aria-hidden":true,"className":"device-antenna right bottom"}]],["$","div",null,{"className":"device-screen","children":[["$","div",null,{"aria-hidden":"true","children":[["$","div",null,{"className":"device-island","children":["$","span",null,{"className":"device-lens"}]}],["$","div",null,{"className":"device-status","children":[["$","span",null,{"children":"9:41"}],["$","span",null,{"className":"radios","children":[["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 17 11","width":"17","height":"11","children":["$","g",null,{"fill":"currentColor","children":[["$","rect",null,{"x":"0","y":"7","width":"3","height":"4","rx":"1"}],["$","rect",null,{"x":"4.5","y":"5","width":"3","height":"6","rx":"1"}],["$","rect",null,{"x":"9","y":"2.5","width":"3","height":"8.5","rx":"1"}],["$","rect",null,{"x":"13.5","y":"0","width":"3","height":"11","rx":"1"}]]}]}],["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 26 11","width":"26","height":"11","children":[["$","rect",null,{"x":"0.6","y":"0.6","width":"21","height":"9.8","rx":"2.8","fill":"none","stroke":"currentColor","strokeWidth":"1.2","opacity":"0.5"}],["$","rect",null,{"x":"23.4","y":"3.6","width":"2","height":"3.8","rx":"1","fill":"currentColor","opacity":"0.5"}],["$","rect",null,{"x":"2.2","y":"2.2","width":"14","height":"6.6","rx":"1.6","fill":"currentColor"}]]}]]}]]}]]}],["$","div",null,{"role":"img","aria-label":"iPhone, a contact file opened: Mark Twain, with an email, a link, offering Create New Contact or Add to Existing Contact","data-slot":"contacts-app","data-view":"import","className":"@container absolute inset-0 overflow-hidden font-[family-name:-apple-system,BlinkMacSystemFont,system-ui,sans-serif] antialiased select-none bg-black","style":{"--ag-contacts-safe-top":"15.423cqw","--ag-contacts-safe-bottom":"8.458cqw","--ag-contacts-margin":"3.980cqw","--ag-contacts-row-y":"3.234cqw","--ag-contacts-radius":"5.473cqw","--ag-contacts-gap":"3.483cqw","--ag-contacts-trail":"5.224cqw","--ag-contacts-bar":"11.940cqw","--ag-contacts-bar-x":"4.478cqw","--ag-contacts-chevron":"6.468cqw","--ag-contacts-close":"4.975cqw","--ag-contacts-photo":"46.269cqw","--ag-contacts-monogram":"17.910cqw","--ag-contacts-photo-gap":"4.975cqw","--ag-contacts-title":"8.458cqw","--ag-contacts-title-leading":"9.950cqw","--ag-contacts-action":"15.423cqw","--ag-contacts-icon":"6.468cqw","--ag-contacts-action-gap":"2.985cqw","--ag-contacts-head-gap":"5.473cqw","--ag-contacts-label":"3.980cqw","--ag-contacts-label-leading":"5.224cqw","--ag-contacts-value":"4.726cqw","--ag-contacts-value-leading":"5.970cqw","--ag-contacts-sub":"4.229cqw","--ag-contacts-sub-leading":"5.473cqw","--ag-contacts-tab":"15.920cqw","--ag-contacts-tab-bottom":"6.468cqw","--ag-contacts-tab-gap":"2.488cqw","--ag-contacts-tab-icon":"6.468cqw","--ag-contacts-tab-word":"2.736cqw","--ag-contacts-behind-top":"13.930cqw","--ag-contacts-behind-x":"3.980cqw","--ag-contacts-behind-radius":"2.985cqw","--ag-contacts-sheet-top":"16.418cqw","--ag-contacts-sheet-radius":"9.453cqw","--ag-contacts-sheet-bar-top":"3.980cqw","--ag-contacts-home":"34.826cqw","--ag-contacts-home-h":"1.244cqw","--ag-contacts-home-bottom":"1.990cqw","--ag-contacts-head-page":"31.841cqw","--ag-contacts-head-sheet":"20.398cqw","--ag-contacts-tint":"oklch(from #7c8494 clamp(0.4, l, 0.56) min(c, 0.12) h)","--ag-contacts-top":"color-mix(in oklab, oklch(from #7c8494 clamp(0.4, l, 0.56) min(c, 0.12) h), white 10%)","--ag-contacts-off":"color-mix(in oklab, oklch(from #7c8494 clamp(0.4, l, 0.56) min(c, 0.12) h), white 38%)","--ag-contacts-poster":"linear-gradient(180deg, color-mix(in oklab, oklch(from #7c8494 clamp(0.4, l, 0.56) min(c, 0.12) h), white 10%), oklch(from #7c8494 clamp(0.4, l, 0.56) min(c, 0.12) h) 45%, color-mix(in oklab, oklch(from #7c8494 clamp(0.4, l, 0.56) min(c, 0.12) h), black 22%))"},"children":"$L45"}]]}],"$L46"]}]}],"$L47"]}]}] 49:T9fa,// A contact as a phone writes it: a photo by address, Apple's labelled links, an // escape in the note. const FRANKLIN = [ "BEGIN:VCARD", "VERSION:3.0", "FN:Benjamin Franklin", "N:Franklin;Benjamin;;;", "NICKNAME:ben", "ORG:Philadelphia Post Office", "PHOTO;VALUE=uri:/benjamin-franklin.png", "item1.URL:https://e-id.to/franklin", "item1.X-ABLabel:e-ID", "item2.URL:https://en.wikipedia.org/wiki/Benjamin_Franklin", "item2.X-ABLabel:_$!!$_", "EMAIL;TYPE=INTERNET:ben@example.com", "TEL;TYPE=CELL:+1 215 555 0176", "ADR;TYPE=HOME:;;;Philadelphia;;;United States", "NOTE:Printer\\, writer\\, inventor.", "END:VCARD", ].join("\r\n") // The poster's colour is the photo's mean, measured where its pixels are: the // portrait's sidecar holds it (prepare-media's `average`). const [r, g, b] = ( JSON.parse( readFileSync(join(process.cwd(), "public/benjamin-franklin.json"), "utf8"), ) as { average: [number, number, number] } ).average const FRANKLIN_AVERAGE = `rgb(${r} ${g} ${b})` // A profile page as Safari shows it on the phone, with the button that serves its // .vcf: what a person presses before iOS raises the preview. function Profile() { return (

Benjamin Franklin

printer, writer, inventor

save contact

) }

4a:T5919,

// A contact as a phone writes it: a photo by address, Apple's labelled links, an
// escape in the note.
const FRANKLIN = [
  "BEGIN:VCARD",
  "VERSION:3.0",
  "FN:Benjamin Franklin",
  "N:Franklin;Benjamin;;;",
  "NICKNAME:ben",
  "ORG:Philadelphia Post Office",
  "PHOTO;VALUE=uri:/benjamin-franklin.png",
  "item1.URL:https://e-id.to/franklin",
  "item1.X-ABLabel:e-ID",
  "item2.URL:https://en.wikipedia.org/wiki/Benjamin_Franklin",
  "item2.X-ABLabel:_$!<HomePage>!$_",
  "EMAIL;TYPE=INTERNET:ben@example.com",
  "TEL;TYPE=CELL:+1 215 555 0176",
  "ADR;TYPE=HOME:;;;Philadelphia;;;United States",
  "NOTE:Printer\\, writer\\, inventor.",
  "END:VCARD",
].join("\r\n")

// The poster's colour is the photo's mean, measured where its pixels are: the
// portrait's sidecar holds it (prepare-media's `average`).
const [r, g, b] = (
  JSON.parse(
    readFileSync(join(process.cwd(), "public/benjamin-franklin.json"), "utf8"),
  ) as { average: [number, number, number] }
).average
const FRANKLIN_AVERAGE = `rgb(${r} ${g} ${b})`

// A profile page as Safari shows it on the phone, with the button that serves its
// .vcf: what a person presses before iOS raises the preview.
function Profile() {
  return (
    <div className="flex min-h-full flex-col items-center gap-[4cqw] bg-[#111] px-[6cqw] py-[8cqw] text-white">
      <Image
        src="/benjamin-franklin.png"
        alt=""
        className="size-[34cqw] rounded-[5cqw] object-cover"
      />
      <p className="font-semibold text-[7cqw]">Benjamin Franklin</p>
      <p className="text-[4cqw] text-white/60">printer, writer, inventor</p>
      <span className="rounded-full border border-white/25 px-[5cqw] py-[2.4cqw] text-[4.2cqw]">
        save contact
      </span>
    </div>
  )
}

<div className="flex flex-wrap justify-center gap-8">
  <div className="w-52">
    <IphoneFrame>
      <Browser
        look="safari-ios"
        material="glass"
        scheme="dark"
        url="https://e-id.to/franklin"
        full
      >
        <Profile />
      </Browser>
    </IphoneFrame>
  </div>
  <div className="w-52">
    <IphoneFrame style={contactsAppScreen("preview", FRANKLIN_AVERAGE)}>
      <ContactsApp
        vcard={FRANKLIN}
        view="preview"
        average={FRANKLIN_AVERAGE}
      />
    </IphoneFrame>
  </div>
  <div className="w-52 max-sm:hidden">
    <IphoneFrame style={contactsAppScreen("contact", FRANKLIN_AVERAGE)}>
      <ContactsApp
        vcard={FRANKLIN}
        view="contact"
        average={FRANKLIN_AVERAGE}
      />
    </IphoneFrame>
  </div>
</div>

20:["$","div","safari",{"data-slot":"code","data-material":"plain","data-compact":"$undefined","className":"ag-code","children":[["$","div",null,{"className":"ag-code-bar","children":[["$","span",null,{"className":"ag-code-name","children":"tsx"}],["$","$L48",null,{"value":"$49","label":true}]]}],["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$4a"}}],false]}]