[{"data":1,"prerenderedAt":1999},["ShallowReactive",2],{"docs-/docs/development/view-components":3},{"id":4,"title":5,"body":6,"description":1993,"extension":581,"meta":1994,"navigation":61,"path":1995,"seo":1996,"stem":1997,"__hash__":1998},"docs/docs/development/view-components.md","View components API",{"type":7,"value":8,"toc":1972},"minimark",[9,13,27,268,273,293,345,374,378,383,497,601,605,703,716,739,743,804,836,840,891,905,910,981,1003,1008,1058,1069,1074,1124,1150,1159,1254,1277,1282,1355,1370,1375,1425,1430,1435,1574,1593,1630,1650,1683,1696,1812,1847,1851,1861,1923,1927,1961,1968],[10,11,5],"h1",{"id":12},"view-components-api",[14,15,16,17,21,22,26],"p",{},"Custom views can use the ",[18,19,20],"strong",{},"same components the artifuncs app is built from"," — the ones\nshowcased on the kitchen-sink page — through the ",[23,24,25],"code",{},"af-*"," elements. They're registered by the\nhost page, so there's nothing to import or install: write the tag, and the real component\nrenders, fully styled and theme-aware in light/dark.",[28,29,34],"pre",{"className":30,"code":31,"language":32,"meta":33,"style":33},"language-tsx shiki shiki-themes github-light github-dark","import { useState } from \"react\"\n\nexport default function View() {\n  const [range, setRange] = useState([40, 50])\n  return (\n    \u003Cdiv className=\"grid gap-4 p-4\">\n      \u003Caf-slider label=\"Height range\" value={range} onChange={(e: any) => setRange(e.detail[0])} />\n      \u003Caf-button label=\"Run\" variant=\"primary\" onClick={go} />\n    \u003C/div>\n  )\n}\n","tsx","",[23,35,36,56,63,82,124,133,154,215,246,256,262],{"__ignoreMap":33},[37,38,41,45,49,52],"span",{"class":39,"line":40},"line",1,[37,42,44],{"class":43},"szBVR","import",[37,46,48],{"class":47},"sVt8B"," { useState } ",[37,50,51],{"class":43},"from",[37,53,55],{"class":54},"sZZnC"," \"react\"\n",[37,57,59],{"class":39,"line":58},2,[37,60,62],{"emptyLinePlaceholder":61},true,"\n",[37,64,66,69,72,75,79],{"class":39,"line":65},3,[37,67,68],{"class":43},"export",[37,70,71],{"class":43}," default",[37,73,74],{"class":43}," function",[37,76,78],{"class":77},"sScJk"," View",[37,80,81],{"class":47},"() {\n",[37,83,85,88,91,95,98,101,104,107,110,113,116,118,121],{"class":39,"line":84},4,[37,86,87],{"class":43},"  const",[37,89,90],{"class":47}," [",[37,92,94],{"class":93},"sj4cs","range",[37,96,97],{"class":47},", ",[37,99,100],{"class":93},"setRange",[37,102,103],{"class":47},"] ",[37,105,106],{"class":43},"=",[37,108,109],{"class":77}," useState",[37,111,112],{"class":47},"([",[37,114,115],{"class":93},"40",[37,117,97],{"class":47},[37,119,120],{"class":93},"50",[37,122,123],{"class":47},"])\n",[37,125,127,130],{"class":39,"line":126},5,[37,128,129],{"class":43},"  return",[37,131,132],{"class":47}," (\n",[37,134,136,139,143,146,148,151],{"class":39,"line":135},6,[37,137,138],{"class":47},"    \u003C",[37,140,142],{"class":141},"s9eBZ","div",[37,144,145],{"class":77}," className",[37,147,106],{"class":43},[37,149,150],{"class":54},"\"grid gap-4 p-4\"",[37,152,153],{"class":47},">\n",[37,155,157,160,163,166,168,171,174,176,179,182,184,187,191,194,197,200,203,206,209,212],{"class":39,"line":156},7,[37,158,159],{"class":47},"      \u003C",[37,161,162],{"class":93},"af-slider",[37,164,165],{"class":77}," label",[37,167,106],{"class":43},[37,169,170],{"class":54},"\"Height range\"",[37,172,173],{"class":77}," value",[37,175,106],{"class":43},[37,177,178],{"class":47},"{range} ",[37,180,181],{"class":77},"onChange",[37,183,106],{"class":43},[37,185,186],{"class":47},"{(",[37,188,190],{"class":189},"s4XuR","e",[37,192,193],{"class":43},":",[37,195,196],{"class":93}," any",[37,198,199],{"class":47},") ",[37,201,202],{"class":43},"=>",[37,204,205],{"class":77}," setRange",[37,207,208],{"class":47},"(e.detail[",[37,210,211],{"class":93},"0",[37,213,214],{"class":47},"])} />\n",[37,216,218,220,223,225,227,230,233,235,238,241,243],{"class":39,"line":217},8,[37,219,159],{"class":47},[37,221,222],{"class":93},"af-button",[37,224,165],{"class":77},[37,226,106],{"class":43},[37,228,229],{"class":54},"\"Run\"",[37,231,232],{"class":77}," variant",[37,234,106],{"class":43},[37,236,237],{"class":54},"\"primary\"",[37,239,240],{"class":77}," onClick",[37,242,106],{"class":43},[37,244,245],{"class":47},"{go} />\n",[37,247,249,252,254],{"class":39,"line":248},9,[37,250,251],{"class":47},"    \u003C/",[37,253,142],{"class":141},[37,255,153],{"class":47},[37,257,259],{"class":39,"line":258},10,[37,260,261],{"class":47},"  )\n",[37,263,265],{"class":39,"line":264},11,[37,266,267],{"class":47},"}\n",[269,270,272],"h2",{"id":271},"the-value-change-contract","The value / change contract",[14,274,275,276,282,283,289,290,193],{},"Every input element takes its state through the ",[18,277,278,281],{},[23,279,280],{},"value"," property"," and reports changes via\na ",[18,284,285,288],{},[23,286,287],{},"change"," event"," with the new value in ",[23,291,292],{},"e.detail[0]",[28,294,296],{"className":30,"code":295,"language":32,"meta":33,"style":33},"\u003Caf-text-field label=\"Name\" value={name} onChange={(e: any) => setName(e.detail[0])} />\n",[23,297,298],{"__ignoreMap":33},[37,299,300,303,306,308,310,313,315,317,320,322,324,326,328,330,332,334,336,339,341,343],{"class":39,"line":40},[37,301,302],{"class":47},"\u003C",[37,304,305],{"class":93},"af-text-field",[37,307,165],{"class":77},[37,309,106],{"class":43},[37,311,312],{"class":54},"\"Name\"",[37,314,173],{"class":77},[37,316,106],{"class":43},[37,318,319],{"class":47},"{name} ",[37,321,181],{"class":77},[37,323,106],{"class":43},[37,325,186],{"class":47},[37,327,190],{"class":189},[37,329,193],{"class":43},[37,331,196],{"class":93},[37,333,199],{"class":47},[37,335,202],{"class":43},[37,337,338],{"class":77}," setName",[37,340,208],{"class":47},[37,342,211],{"class":93},[37,344,214],{"class":47},[14,346,347,348,97,350,353,354,357,358,360,361,364,365,369,370,373],{},"Text controls (",[23,349,305],{},[23,351,352],{},"af-textarea",") additionally emit ",[23,355,356],{},"input"," on every keystroke\nwith the same payload. ",[23,359,222],{}," needs no bridge — its click is a normal DOM click\n(",[23,362,363],{},"onClick","). Complex values (arrays, objects) work because JSX sets DOM ",[366,367,368],"em",{},"properties",":\n",[23,371,372],{},"value={[40, 50]}"," passes the tuple as-is.",[269,375,377],{"id":376},"elements","Elements",[379,380,381],"h3",{"id":222},[23,382,222],{},[28,384,386],{"className":30,"code":385,"language":32,"meta":33,"style":33},"\u003Caf-button label=\"Run\" variant=\"primary\" onClick={go} />\n\u003Caf-button label=\"Cancel\" variant=\"outline\" size=\"sm\" />\n\u003Caf-button label=\"Delete\" variant=\"danger\" disabled={busy} />\n\u003Caf-button label=\"Working…\" variant=\"primary\" loading={busy} />\n",[23,387,388,412,443,471],{"__ignoreMap":33},[37,389,390,392,394,396,398,400,402,404,406,408,410],{"class":39,"line":40},[37,391,302],{"class":47},[37,393,222],{"class":93},[37,395,165],{"class":77},[37,397,106],{"class":43},[37,399,229],{"class":54},[37,401,232],{"class":77},[37,403,106],{"class":43},[37,405,237],{"class":54},[37,407,240],{"class":77},[37,409,106],{"class":43},[37,411,245],{"class":47},[37,413,414,416,418,420,422,425,427,429,432,435,437,440],{"class":39,"line":58},[37,415,302],{"class":47},[37,417,222],{"class":93},[37,419,165],{"class":77},[37,421,106],{"class":43},[37,423,424],{"class":54},"\"Cancel\"",[37,426,232],{"class":77},[37,428,106],{"class":43},[37,430,431],{"class":54},"\"outline\"",[37,433,434],{"class":77}," size",[37,436,106],{"class":43},[37,438,439],{"class":54},"\"sm\"",[37,441,442],{"class":47}," />\n",[37,444,445,447,449,451,453,456,458,460,463,466,468],{"class":39,"line":65},[37,446,302],{"class":47},[37,448,222],{"class":93},[37,450,165],{"class":77},[37,452,106],{"class":43},[37,454,455],{"class":54},"\"Delete\"",[37,457,232],{"class":77},[37,459,106],{"class":43},[37,461,462],{"class":54},"\"danger\"",[37,464,465],{"class":77}," disabled",[37,467,106],{"class":43},[37,469,470],{"class":47},"{busy} />\n",[37,472,473,475,477,479,481,484,486,488,490,493,495],{"class":39,"line":84},[37,474,302],{"class":47},[37,476,222],{"class":93},[37,478,165],{"class":77},[37,480,106],{"class":43},[37,482,483],{"class":54},"\"Working…\"",[37,485,232],{"class":77},[37,487,106],{"class":43},[37,489,237],{"class":54},[37,491,492],{"class":77}," loading",[37,494,106],{"class":43},[37,496,470],{"class":47},[498,499,500,513],"table",{},[501,502,503],"thead",{},[504,505,506,510],"tr",{},[507,508,509],"th",{},"Prop",[507,511,512],{},"Values",[514,515,516,527,564,585],"tbody",{},[504,517,518,524],{},[519,520,521],"td",{},[23,522,523],{},"label",[519,525,526],{},"button text",[504,528,529,534],{},[519,530,531],{},[23,532,533],{},"variant",[519,535,536,539,540,97,543,97,546,97,549,97,552,97,555,97,558,97,561],{},[23,537,538],{},"primary"," (default), ",[23,541,542],{},"secondary",[23,544,545],{},"outline",[23,547,548],{},"ghost",[23,550,551],{},"link",[23,553,554],{},"danger",[23,556,557],{},"danger-outline",[23,559,560],{},"success",[23,562,563],{},"warn",[504,565,566,571],{},[519,567,568],{},[23,569,570],{},"size",[519,572,573,97,576,97,579,539,582],{},[23,574,575],{},"xs",[23,577,578],{},"sm",[23,580,581],{},"md",[23,583,584],{},"lg",[504,586,587,598],{},[519,588,589,97,592,97,595],{},[23,590,591],{},"loading",[23,593,594],{},"disabled",[23,596,597],{},"icon-only",[519,599,600],{},"booleans",[379,602,603],{"id":162},[23,604,162],{},[28,606,608],{"className":30,"code":607,"language":32,"meta":33,"style":33},"\u003Caf-slider label=\"Volume\" value={vol} min={0} max={100} step={1} unit=\"%\"\n  onChange={(e: any) => setVol(e.detail[0])} />\n",[23,609,610,675],{"__ignoreMap":33},[37,611,612,614,616,618,620,623,625,627,630,633,635,638,640,643,646,648,650,653,655,658,660,662,665,667,670,672],{"class":39,"line":40},[37,613,302],{"class":47},[37,615,162],{"class":93},[37,617,165],{"class":77},[37,619,106],{"class":43},[37,621,622],{"class":54},"\"Volume\"",[37,624,173],{"class":77},[37,626,106],{"class":43},[37,628,629],{"class":47},"{vol} ",[37,631,632],{"class":77},"min",[37,634,106],{"class":43},[37,636,637],{"class":47},"{",[37,639,211],{"class":93},[37,641,642],{"class":47},"} ",[37,644,645],{"class":77},"max",[37,647,106],{"class":43},[37,649,637],{"class":47},[37,651,652],{"class":93},"100",[37,654,642],{"class":47},[37,656,657],{"class":77},"step",[37,659,106],{"class":43},[37,661,637],{"class":47},[37,663,664],{"class":93},"1",[37,666,642],{"class":47},[37,668,669],{"class":77},"unit",[37,671,106],{"class":43},[37,673,674],{"class":54},"\"%\"\n",[37,676,677,680,682,684,686,688,690,692,694,697,699,701],{"class":39,"line":58},[37,678,679],{"class":77},"  onChange",[37,681,106],{"class":43},[37,683,186],{"class":47},[37,685,190],{"class":189},[37,687,193],{"class":43},[37,689,196],{"class":93},[37,691,199],{"class":47},[37,693,202],{"class":43},[37,695,696],{"class":77}," setVol",[37,698,208],{"class":47},[37,700,211],{"class":93},[37,702,214],{"class":47},[14,704,705,708,709,711,712,715],{},[18,706,707],{},"Range mode",": pass a tuple — ",[23,710,372],{}," — and you get two draggable thumbs; the\nchange payload stays an ordered ",[23,713,714],{},"[lo, hi]"," pair (thumbs can't cross).",[14,717,718,719,97,721,723,724,726,727,729,730,732,733,97,736,738],{},"Props: ",[23,720,523],{},[23,722,632],{}," (0), ",[23,725,645],{}," (100), ",[23,728,657],{}," (1, floats OK), ",[23,731,669],{}," (readout suffix),\n",[23,734,735],{},"hint",[23,737,594],{},".",[379,740,741],{"id":305},[23,742,305],{},[28,744,746],{"className":30,"code":745,"language":32,"meta":33,"style":33},"\u003Caf-text-field label=\"API key\" placeholder=\"sk-…\" value={key}\n  onInput={(e: any) => setKey(e.detail[0])} />\n",[23,747,748,776],{"__ignoreMap":33},[37,749,750,752,754,756,758,761,764,766,769,771,773],{"class":39,"line":40},[37,751,302],{"class":47},[37,753,305],{"class":93},[37,755,165],{"class":77},[37,757,106],{"class":43},[37,759,760],{"class":54},"\"API key\"",[37,762,763],{"class":77}," placeholder",[37,765,106],{"class":43},[37,767,768],{"class":54},"\"sk-…\"",[37,770,173],{"class":77},[37,772,106],{"class":43},[37,774,775],{"class":47},"{key}\n",[37,777,778,781,783,785,787,789,791,793,795,798,800,802],{"class":39,"line":58},[37,779,780],{"class":77},"  onInput",[37,782,106],{"class":43},[37,784,186],{"class":47},[37,786,190],{"class":189},[37,788,193],{"class":43},[37,790,196],{"class":93},[37,792,199],{"class":47},[37,794,202],{"class":43},[37,796,797],{"class":77}," setKey",[37,799,208],{"class":47},[37,801,211],{"class":93},[37,803,214],{"class":47},[14,805,718,806,97,808,97,811,97,813,816,817,820,821,97,823,826,827,830,831,833,834,738],{},[23,807,523],{},[23,809,810],{},"placeholder",[23,812,735],{},[23,814,815],{},"type"," (e.g. ",[23,818,819],{},"\"password\"","), ",[23,822,594],{},[23,824,825],{},"readonly",",\n",[23,828,829],{},"error",". Events: ",[23,832,356],{}," (per keystroke), ",[23,835,287],{},[379,837,838],{"id":352},[23,839,352],{},[28,841,843],{"className":30,"code":842,"language":32,"meta":33,"style":33},"\u003Caf-textarea label=\"Prompt\" value={prompt} onInput={(e: any) => setPrompt(e.detail[0])} />\n",[23,844,845],{"__ignoreMap":33},[37,846,847,849,851,853,855,858,860,862,865,868,870,872,874,876,878,880,882,885,887,889],{"class":39,"line":40},[37,848,302],{"class":47},[37,850,352],{"class":93},[37,852,165],{"class":77},[37,854,106],{"class":43},[37,856,857],{"class":54},"\"Prompt\"",[37,859,173],{"class":77},[37,861,106],{"class":43},[37,863,864],{"class":47},"{prompt} ",[37,866,867],{"class":77},"onInput",[37,869,106],{"class":43},[37,871,186],{"class":47},[37,873,190],{"class":189},[37,875,193],{"class":43},[37,877,196],{"class":93},[37,879,199],{"class":47},[37,881,202],{"class":43},[37,883,884],{"class":77}," setPrompt",[37,886,208],{"class":47},[37,888,211],{"class":93},[37,890,214],{"class":47},[14,892,718,893,97,895,97,897,97,899,97,901,97,903,738],{},[23,894,523],{},[23,896,810],{},[23,898,735],{},[23,900,594],{},[23,902,825],{},[23,904,829],{},[379,906,908],{"id":907},"af-select",[23,909,907],{},[28,911,913],{"className":30,"code":912,"language":32,"meta":33,"style":33},"\u003Caf-select label=\"Mode\" items={[\"fast\", \"thorough\"]} value={mode}\n  onChange={(e: any) => setMode(e.detail[0])} />\n",[23,914,915,954],{"__ignoreMap":33},[37,916,917,919,921,923,925,928,931,933,936,939,941,944,947,949,951],{"class":39,"line":40},[37,918,302],{"class":47},[37,920,907],{"class":93},[37,922,165],{"class":77},[37,924,106],{"class":43},[37,926,927],{"class":54},"\"Mode\"",[37,929,930],{"class":77}," items",[37,932,106],{"class":43},[37,934,935],{"class":47},"{[",[37,937,938],{"class":54},"\"fast\"",[37,940,97],{"class":47},[37,942,943],{"class":54},"\"thorough\"",[37,945,946],{"class":47},"]} ",[37,948,280],{"class":77},[37,950,106],{"class":43},[37,952,953],{"class":47},"{mode}\n",[37,955,956,958,960,962,964,966,968,970,972,975,977,979],{"class":39,"line":58},[37,957,679],{"class":77},[37,959,106],{"class":43},[37,961,186],{"class":47},[37,963,190],{"class":189},[37,965,193],{"class":43},[37,967,196],{"class":93},[37,969,199],{"class":47},[37,971,202],{"class":43},[37,973,974],{"class":77}," setMode",[37,976,208],{"class":47},[37,978,211],{"class":93},[37,980,214],{"class":47},[14,982,983,986,987,990,991,994,995,97,997,97,999,826,1001,738],{},[23,984,985],{},"items"," accepts an array property (objects too — set ",[23,988,989],{},"item-title"," / ",[23,992,993],{},"item-value"," for the\ndisplay/value keys) or a JSON string attribute. Props: ",[23,996,523],{},[23,998,810],{},[23,1000,735],{},[23,1002,594],{},[379,1004,1006],{"id":1005},"af-checkbox",[23,1007,1005],{},[28,1009,1011],{"className":30,"code":1010,"language":32,"meta":33,"style":33},"\u003Caf-checkbox label=\"Enable feature\" value={on} onChange={(e: any) => setOn(e.detail[0])} />\n",[23,1012,1013],{"__ignoreMap":33},[37,1014,1015,1017,1019,1021,1023,1026,1028,1030,1033,1035,1037,1039,1041,1043,1045,1047,1049,1052,1054,1056],{"class":39,"line":40},[37,1016,302],{"class":47},[37,1018,1005],{"class":93},[37,1020,165],{"class":77},[37,1022,106],{"class":43},[37,1024,1025],{"class":54},"\"Enable feature\"",[37,1027,173],{"class":77},[37,1029,106],{"class":43},[37,1031,1032],{"class":47},"{on} ",[37,1034,181],{"class":77},[37,1036,106],{"class":43},[37,1038,186],{"class":47},[37,1040,190],{"class":189},[37,1042,193],{"class":43},[37,1044,196],{"class":93},[37,1046,199],{"class":47},[37,1048,202],{"class":43},[37,1050,1051],{"class":77}," setOn",[37,1053,208],{"class":47},[37,1055,211],{"class":93},[37,1057,214],{"class":47},[14,1059,718,1060,97,1062,97,1064,97,1066,1068],{},[23,1061,523],{},[23,1063,735],{},[23,1065,594],{},[23,1067,825],{},". Value: boolean.",[379,1070,1072],{"id":1071},"af-date",[23,1073,1071],{},[28,1075,1077],{"className":30,"code":1076,"language":32,"meta":33,"style":33},"\u003Caf-date label=\"Due date\" value={date} onChange={(e: any) => setDate(e.detail[0])} />\n",[23,1078,1079],{"__ignoreMap":33},[37,1080,1081,1083,1085,1087,1089,1092,1094,1096,1099,1101,1103,1105,1107,1109,1111,1113,1115,1118,1120,1122],{"class":39,"line":40},[37,1082,302],{"class":47},[37,1084,1071],{"class":93},[37,1086,165],{"class":77},[37,1088,106],{"class":43},[37,1090,1091],{"class":54},"\"Due date\"",[37,1093,173],{"class":77},[37,1095,106],{"class":43},[37,1097,1098],{"class":47},"{date} ",[37,1100,181],{"class":77},[37,1102,106],{"class":43},[37,1104,186],{"class":47},[37,1106,190],{"class":189},[37,1108,193],{"class":43},[37,1110,196],{"class":93},[37,1112,199],{"class":47},[37,1114,202],{"class":43},[37,1116,1117],{"class":77}," setDate",[37,1119,208],{"class":47},[37,1121,211],{"class":93},[37,1123,214],{"class":47},[14,1125,1126,1127,1130,1131,1134,1135,1138,1139,826,1141,97,1143,97,1145,97,1147,738],{},"Value in ",[18,1128,1129],{},"and"," out is a ",[23,1132,1133],{},"YYYY-MM-DD"," string — JSON-friendly for ",[23,1136,1137],{},"run()",". Props: ",[23,1140,523],{},[23,1142,735],{},[23,1144,594],{},[23,1146,825],{},[23,1148,1149],{},"clearable",[379,1151,1153,990,1156],{"id":1152},"af-color-af-color-palette",[23,1154,1155],{},"af-color",[23,1157,1158],{},"af-color-palette",[28,1160,1162],{"className":30,"code":1161,"language":32,"meta":33,"style":33},"\u003Caf-color label=\"Accent\" value={hex} onChange={(e: any) => setHex(e.detail[0])} />\n\u003Caf-color-palette label=\"Palette\" value={colors} onChange={(e: any) => setColors(e.detail[0])} />\n",[23,1163,1164,1209],{"__ignoreMap":33},[37,1165,1166,1168,1170,1172,1174,1177,1179,1181,1184,1186,1188,1190,1192,1194,1196,1198,1200,1203,1205,1207],{"class":39,"line":40},[37,1167,302],{"class":47},[37,1169,1155],{"class":93},[37,1171,165],{"class":77},[37,1173,106],{"class":43},[37,1175,1176],{"class":54},"\"Accent\"",[37,1178,173],{"class":77},[37,1180,106],{"class":43},[37,1182,1183],{"class":47},"{hex} ",[37,1185,181],{"class":77},[37,1187,106],{"class":43},[37,1189,186],{"class":47},[37,1191,190],{"class":189},[37,1193,193],{"class":43},[37,1195,196],{"class":93},[37,1197,199],{"class":47},[37,1199,202],{"class":43},[37,1201,1202],{"class":77}," setHex",[37,1204,208],{"class":47},[37,1206,211],{"class":93},[37,1208,214],{"class":47},[37,1210,1211,1213,1215,1217,1219,1222,1224,1226,1229,1231,1233,1235,1237,1239,1241,1243,1245,1248,1250,1252],{"class":39,"line":58},[37,1212,302],{"class":47},[37,1214,1158],{"class":93},[37,1216,165],{"class":77},[37,1218,106],{"class":43},[37,1220,1221],{"class":54},"\"Palette\"",[37,1223,173],{"class":77},[37,1225,106],{"class":43},[37,1227,1228],{"class":47},"{colors} ",[37,1230,181],{"class":77},[37,1232,106],{"class":43},[37,1234,186],{"class":47},[37,1236,190],{"class":189},[37,1238,193],{"class":43},[37,1240,196],{"class":93},[37,1242,199],{"class":47},[37,1244,202],{"class":43},[37,1246,1247],{"class":77}," setColors",[37,1249,208],{"class":47},[37,1251,211],{"class":93},[37,1253,214],{"class":47},[14,1255,1256,1258,1259,1262,1263,1266,1267,1270,1271,1273,1274,738],{},[23,1257,1155],{}," holds one hex string (",[23,1260,1261],{},"show-swatches"," for preset swatches; ",[23,1264,1265],{},"show-text-field","\ndefaults on; ",[23,1268,1269],{},"variant=\"minimal\""," renders just the rounded-square swatch — no hex text).\n",[23,1272,1158],{}," holds a hex ",[23,1275,1276],{},"string[]",[379,1278,1280],{"id":1279},"af-multi-select",[23,1281,1279],{},[28,1283,1285],{"className":30,"code":1284,"language":32,"meta":33,"style":33},"\u003Caf-multi-select label=\"Formats\" items={[\"png\", \"jpg\", \"webp\"]} value={formats}\n  onChange={(e: any) => setFormats(e.detail[0])} />\n",[23,1286,1287,1328],{"__ignoreMap":33},[37,1288,1289,1291,1293,1295,1297,1300,1302,1304,1306,1309,1311,1314,1316,1319,1321,1323,1325],{"class":39,"line":40},[37,1290,302],{"class":47},[37,1292,1279],{"class":93},[37,1294,165],{"class":77},[37,1296,106],{"class":43},[37,1298,1299],{"class":54},"\"Formats\"",[37,1301,930],{"class":77},[37,1303,106],{"class":43},[37,1305,935],{"class":47},[37,1307,1308],{"class":54},"\"png\"",[37,1310,97],{"class":47},[37,1312,1313],{"class":54},"\"jpg\"",[37,1315,97],{"class":47},[37,1317,1318],{"class":54},"\"webp\"",[37,1320,946],{"class":47},[37,1322,280],{"class":77},[37,1324,106],{"class":43},[37,1326,1327],{"class":47},"{formats}\n",[37,1329,1330,1332,1334,1336,1338,1340,1342,1344,1346,1349,1351,1353],{"class":39,"line":58},[37,1331,679],{"class":77},[37,1333,106],{"class":43},[37,1335,186],{"class":47},[37,1337,190],{"class":189},[37,1339,193],{"class":43},[37,1341,196],{"class":93},[37,1343,199],{"class":47},[37,1345,202],{"class":43},[37,1347,1348],{"class":77}," setFormats",[37,1350,208],{"class":47},[37,1352,211],{"class":93},[37,1354,214],{"class":47},[14,1356,1357,1358,1360,1361,1363,1364,1366,1367,1369],{},"Like ",[23,1359,907],{}," but the value is an array. Same ",[23,1362,985],{}," handling (",[23,1365,989],{},"/",[23,1368,993],{},"\nfor object items).",[379,1371,1373],{"id":1372},"af-tags-input",[23,1374,1372],{},[28,1376,1378],{"className":30,"code":1377,"language":32,"meta":33,"style":33},"\u003Caf-tags-input label=\"Tags\" value={tags} onChange={(e: any) => setTags(e.detail[0])} />\n",[23,1379,1380],{"__ignoreMap":33},[37,1381,1382,1384,1386,1388,1390,1393,1395,1397,1400,1402,1404,1406,1408,1410,1412,1414,1416,1419,1421,1423],{"class":39,"line":40},[37,1383,302],{"class":47},[37,1385,1372],{"class":93},[37,1387,165],{"class":77},[37,1389,106],{"class":43},[37,1391,1392],{"class":54},"\"Tags\"",[37,1394,173],{"class":77},[37,1396,106],{"class":43},[37,1398,1399],{"class":47},"{tags} ",[37,1401,181],{"class":77},[37,1403,106],{"class":43},[37,1405,186],{"class":47},[37,1407,190],{"class":189},[37,1409,193],{"class":43},[37,1411,196],{"class":93},[37,1413,199],{"class":47},[37,1415,202],{"class":43},[37,1417,1418],{"class":77}," setTags",[37,1420,208],{"class":47},[37,1422,211],{"class":93},[37,1424,214],{"class":47},[14,1426,1427,1428,738],{},"Free-text tag entry; value is a ",[23,1429,1276],{},[379,1431,1433],{"id":1432},"af-file-field",[23,1434,1432],{},[28,1436,1438],{"className":30,"code":1437,"language":32,"meta":33,"style":33},"const [file, setFile] = useState\u003CFile | null>(null)\n\n\u003Caf-file-field label=\"Upload\" accept=\".pdf,.png\" onChange={(e: any) => setFile(e.detail[0])} />\n\u003Caf-button label=\"Process\" onClick={async () => setOut(await run({ upload: file }))} />\n",[23,1439,1440,1481,1485,1532],{"__ignoreMap":33},[37,1441,1442,1445,1447,1450,1452,1455,1457,1459,1461,1463,1466,1469,1472,1475,1478],{"class":39,"line":40},[37,1443,1444],{"class":43},"const",[37,1446,90],{"class":47},[37,1448,1449],{"class":93},"file",[37,1451,97],{"class":47},[37,1453,1454],{"class":93},"setFile",[37,1456,103],{"class":47},[37,1458,106],{"class":43},[37,1460,109],{"class":77},[37,1462,302],{"class":47},[37,1464,1465],{"class":77},"File",[37,1467,1468],{"class":43}," |",[37,1470,1471],{"class":93}," null",[37,1473,1474],{"class":47},">(",[37,1476,1477],{"class":93},"null",[37,1479,1480],{"class":47},")\n",[37,1482,1483],{"class":39,"line":58},[37,1484,62],{"emptyLinePlaceholder":61},[37,1486,1487,1489,1491,1493,1495,1498,1501,1503,1506,1509,1511,1513,1515,1517,1519,1521,1523,1526,1528,1530],{"class":39,"line":65},[37,1488,302],{"class":47},[37,1490,1432],{"class":93},[37,1492,165],{"class":77},[37,1494,106],{"class":43},[37,1496,1497],{"class":54},"\"Upload\"",[37,1499,1500],{"class":77}," accept",[37,1502,106],{"class":43},[37,1504,1505],{"class":54},"\".pdf,.png\"",[37,1507,1508],{"class":77}," onChange",[37,1510,106],{"class":43},[37,1512,186],{"class":47},[37,1514,190],{"class":189},[37,1516,193],{"class":43},[37,1518,196],{"class":93},[37,1520,199],{"class":47},[37,1522,202],{"class":43},[37,1524,1525],{"class":77}," setFile",[37,1527,208],{"class":47},[37,1529,211],{"class":93},[37,1531,214],{"class":47},[37,1533,1534,1536,1538,1540,1542,1545,1547,1549,1551,1554,1557,1559,1562,1565,1568,1571],{"class":39,"line":84},[37,1535,302],{"class":47},[37,1537,222],{"class":93},[37,1539,165],{"class":77},[37,1541,106],{"class":43},[37,1543,1544],{"class":54},"\"Process\"",[37,1546,240],{"class":77},[37,1548,106],{"class":43},[37,1550,637],{"class":47},[37,1552,1553],{"class":43},"async",[37,1555,1556],{"class":47}," () ",[37,1558,202],{"class":43},[37,1560,1561],{"class":77}," setOut",[37,1563,1564],{"class":47},"(",[37,1566,1567],{"class":43},"await",[37,1569,1570],{"class":77}," run",[37,1572,1573],{"class":47},"({ upload: file }))} />\n",[14,1575,1576,1577,1581,1582,1585,1586,1589,1590,193],{},"The value is a browser ",[18,1578,1579],{},[23,1580,1465],{}," (or ",[23,1583,1584],{},"File[]"," with ",[23,1587,1588],{},"multiple","). Two ways to get it to\n",[23,1591,1592],{},"process()",[1594,1595,1596,1618],"ol",{},[1597,1598,1599,1604,1605,1607,1608,1610,1611,1614,1615,1617],"li",{},[18,1600,1601,1602],{},"Just pass it to ",[23,1603,1137],{}," — any ",[23,1606,1465],{}," in the input is uploaded automatically and\nreplaced with its filename, so ",[23,1609,1592],{}," receives ",[23,1612,1613],{},"input[\"upload\"]"," as a filename string\n(identical to declared ",[23,1616,1449],{}," fields).",[1597,1619,1620,1623,1624,1627,1628,738],{},[18,1621,1622],{},"Eager upload"," — ",[23,1625,1626],{},"const { name } = await files.upload(file, { onProgress })"," uploads\nimmediately (e.g. on select, with a progress bar) and gives you the filename to pass in a\nlater ",[23,1629,1137],{},[14,1631,718,1632,97,1634,97,1636,97,1639,97,1641,1644,1645,97,1648,738],{},[23,1633,523],{},[23,1635,735],{},[23,1637,1638],{},"accept",[23,1640,1588],{},[23,1642,1643],{},"max-size"," (bytes), ",[23,1646,1647],{},"max-files",[23,1649,594],{},[14,1651,1652,1653,1655,1656,1661,1662,1665,1666,97,1669,97,1672,1675,1676,820,1679,1682],{},"Reading files ",[23,1654,1592],{}," wrote (see ",[1657,1658,1660],"a",{"href":1659},"/docs/development/custom-views","custom views"," for the\nfull ",[23,1663,1664],{},"files"," API): ",[23,1667,1668],{},"files.text(name)",[23,1670,1671],{},"files.blob(name)",[23,1673,1674],{},"files.url(name)"," (object URL —\ndrop into ",[23,1677,1678],{},"\u003Cimg src>",[23,1680,1681],{},"files.save(name)"," (browser download).",[379,1684,1686,1687,97,1690,97,1693],{"id":1685},"display-elements-af-code-block-af-tag-af-timeline","Display elements — ",[23,1688,1689],{},"af-code-block",[23,1691,1692],{},"af-tag",[23,1694,1695],{},"af-timeline",[28,1697,1699],{"className":30,"code":1698,"language":32,"meta":33,"style":33},"\u003Caf-code-block code={result.json} language=\"json\" filename=\"result.json\" />\n\u003Caf-tag label=\"nlp\" />\n\u003Caf-timeline steps={[\n  { state: \"done\", title: \"Fetched\" },\n  { state: \"active\", title: \"Processing\" },\n  { state: \"pending\", title: \"Render\" },\n]} />\n",[23,1700,1701,1733,1748,1762,1779,1793,1807],{"__ignoreMap":33},[37,1702,1703,1705,1707,1710,1712,1715,1718,1720,1723,1726,1728,1731],{"class":39,"line":40},[37,1704,302],{"class":47},[37,1706,1689],{"class":93},[37,1708,1709],{"class":77}," code",[37,1711,106],{"class":43},[37,1713,1714],{"class":47},"{result.json} ",[37,1716,1717],{"class":77},"language",[37,1719,106],{"class":43},[37,1721,1722],{"class":54},"\"json\"",[37,1724,1725],{"class":77}," filename",[37,1727,106],{"class":43},[37,1729,1730],{"class":54},"\"result.json\"",[37,1732,442],{"class":47},[37,1734,1735,1737,1739,1741,1743,1746],{"class":39,"line":58},[37,1736,302],{"class":47},[37,1738,1692],{"class":93},[37,1740,165],{"class":77},[37,1742,106],{"class":43},[37,1744,1745],{"class":54},"\"nlp\"",[37,1747,442],{"class":47},[37,1749,1750,1752,1754,1757,1759],{"class":39,"line":65},[37,1751,302],{"class":47},[37,1753,1695],{"class":93},[37,1755,1756],{"class":77}," steps",[37,1758,106],{"class":43},[37,1760,1761],{"class":47},"{[\n",[37,1763,1764,1767,1770,1773,1776],{"class":39,"line":84},[37,1765,1766],{"class":47},"  { state: ",[37,1768,1769],{"class":54},"\"done\"",[37,1771,1772],{"class":47},", title: ",[37,1774,1775],{"class":54},"\"Fetched\"",[37,1777,1778],{"class":47}," },\n",[37,1780,1781,1783,1786,1788,1791],{"class":39,"line":126},[37,1782,1766],{"class":47},[37,1784,1785],{"class":54},"\"active\"",[37,1787,1772],{"class":47},[37,1789,1790],{"class":54},"\"Processing\"",[37,1792,1778],{"class":47},[37,1794,1795,1797,1800,1802,1805],{"class":39,"line":135},[37,1796,1766],{"class":47},[37,1798,1799],{"class":54},"\"pending\"",[37,1801,1772],{"class":47},[37,1803,1804],{"class":54},"\"Render\"",[37,1806,1778],{"class":47},[37,1808,1809],{"class":39,"line":156},[37,1810,1811],{"class":47},"]} />\n",[14,1813,1814,1816,1817,97,1819,97,1821,97,1824,97,1827,1830,1831,369,1833,97,1835,1830,1838,1816,1840,1843,1844,738],{},[23,1815,1689],{},": ",[23,1818,23],{},[23,1820,1717],{},[23,1822,1823],{},"filename",[23,1825,1826],{},"show-copy",[23,1828,1829],{},"show-header",". ",[23,1832,1692],{},[23,1834,523],{},[23,1836,1837],{},"hash",[23,1839,1695],{},[23,1841,1842],{},"steps"," array of\n",[23,1845,1846],{},"{ state: 'done'|'active'|'pending'|'failed', title, body?, substeps?, collapsible?, defaultOpen? }",[269,1848,1850],{"id":1849},"typescript-note","TypeScript note",[14,1852,1853,1854,1856,1857,1860],{},"The ",[23,1855,25],{}," tags aren't in preact's JSX types — either type the event handlers' arg as ",[23,1858,1859],{},"any","\n(as above) or add a one-liner to your view:",[28,1862,1866],{"className":1863,"code":1864,"language":1865,"meta":33,"style":33},"language-ts shiki shiki-themes github-light github-dark","declare module \"react\" { namespace JSX { interface IntrinsicElements { [tag: `af-${string}`]: any } } }\n","ts",[23,1867,1868],{"__ignoreMap":33},[37,1869,1870,1873,1876,1879,1882,1885,1888,1890,1893,1896,1899,1902,1904,1907,1910,1913,1916,1918,1920],{"class":39,"line":40},[37,1871,1872],{"class":43},"declare",[37,1874,1875],{"class":43}," module",[37,1877,1878],{"class":54}," \"react\"",[37,1880,1881],{"class":47}," { ",[37,1883,1884],{"class":43},"namespace",[37,1886,1887],{"class":77}," JSX",[37,1889,1881],{"class":47},[37,1891,1892],{"class":43},"interface",[37,1894,1895],{"class":77}," IntrinsicElements",[37,1897,1898],{"class":47}," { [",[37,1900,1901],{"class":189},"tag",[37,1903,193],{"class":43},[37,1905,1906],{"class":54}," `af-${",[37,1908,1909],{"class":93},"string",[37,1911,1912],{"class":54},"}`",[37,1914,1915],{"class":47},"]",[37,1917,193],{"class":43},[37,1919,196],{"class":93},[37,1921,1922],{"class":47}," } } }\n",[269,1924,1926],{"id":1925},"layout-custom-styling","Layout & custom styling",[14,1928,1929,1930,1934,1935,97,1938,97,1941,826,1944,97,1947,1950,1951,97,1954,1957,1958,1960],{},"Use ",[1657,1931,1933],{"href":1932},"/docs/development/custom-views#styling","Tailwind utilities"," (",[23,1936,1937],{},"grid",[23,1939,1940],{},"gap-4",[23,1942,1943],{},"p-4",[23,1945,1946],{},"bg-surface",[23,1948,1949],{},"text-ink",", …) for layout and anything bespoke, and theme tokens\n(",[23,1952,1953],{},"var(--brand)",[23,1955,1956],{},"var(--surface)",", …) in raw CSS. The ",[23,1959,25],{}," elements render in the page's\nlight DOM, so they compose with both.",[14,1962,1963,1964,1967],{},"The live reference for how each component looks in every state is the app's kitchen-sink\npage (",[23,1965,1966],{},"/kitchen-sink"," when signed in).",[1969,1970,1971],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}",{"title":33,"searchDepth":58,"depth":58,"links":1973},[1974,1975,1991,1992],{"id":271,"depth":58,"text":272},{"id":376,"depth":58,"text":377,"children":1976},[1977,1978,1979,1980,1981,1982,1983,1984,1986,1987,1988,1989],{"id":222,"depth":65,"text":222},{"id":162,"depth":65,"text":162},{"id":305,"depth":65,"text":305},{"id":352,"depth":65,"text":352},{"id":907,"depth":65,"text":907},{"id":1005,"depth":65,"text":1005},{"id":1071,"depth":65,"text":1071},{"id":1152,"depth":65,"text":1985},"af-color / af-color-palette",{"id":1279,"depth":65,"text":1279},{"id":1372,"depth":65,"text":1372},{"id":1432,"depth":65,"text":1432},{"id":1685,"depth":65,"text":1990},"Display elements — af-code-block, af-tag, af-timeline",{"id":1849,"depth":58,"text":1850},{"id":1925,"depth":58,"text":1926},"Use the real artifuncs components — sliders, buttons, text fields, selects — inside your custom view via the af-* elements.",{},"/docs/development/view-components",{"title":5,"description":1993},"docs/development/view-components","ESzML9wD8xWC8G8X3vjcJ3TnPnWrpGVoAuPXn-XJFAQ",1784586443434]