[{"data":1,"prerenderedAt":898},["ShallowReactive",2],{"doc-global_essentials\u002Fadvanced\u002F3rd_party":3},{"id":4,"title":5,"body":6,"description":888,"extension":889,"meta":890,"navigation":75,"path":894,"seo":895,"stem":896,"__hash__":897},"docs\u002Fdocs\u002Fglobal_essentials\u002Fadvanced\u002F3rd_party.md","3rd Party Libraries",{"type":7,"value":8,"toc":876},"minimark",[9,14,23,26,31,40,47,178,189,197,199,203,210,215,306,313,315,319,326,331,437,444,446,450,457,462,539,545,547,550,557,562,629,631,635,645,650,661,734,738,741,774,776,780,872],[10,11,13],"h1",{"id":12},"third-party-libraries","Third-Party Libraries",[15,16,17,18,22],"p",{},"Dryad Engine exposes several third-party libraries through ",[19,20,21],"code",{},"window.engine"," for use in custom scripts.",[24,25],"hr",{},[27,28,30],"h2",{"id":29},"primevue","PrimeVue",[15,32,33,39],{},[34,35,30],"a",{"href":36,"rel":37},"https:\u002F\u002Fprimevue.org\u002F",[38],"nofollow"," is a comprehensive Vue component library with buttons, inputs, dropdowns, dialogs, and more.",[15,41,42,43,46],{},"Access via ",[19,44,45],{},"window.engine.primeVue",":",[48,49,54],"pre",{"className":50,"code":51,"language":52,"meta":53,"style":53},"language-javascript shiki shiki-themes github-light github-dark","const { vue, primeVue } = window.engine;\nconst { defineComponent, ref } = vue;\n\nconst MyForm = defineComponent({\n  components: {\n    Button: primeVue.Button,\n    InputText: primeVue.InputText,\n    Dropdown: primeVue.Dropdown\n  },\n  setup() {\n    const name = ref(\"\");\n    return { name };\n  },\n  template: \u002F*html*\u002F`\n    \u003Cdiv>\n      \u003CInputText v-model=\"name\" placeholder=\"Enter name\" \u002F>\n      \u003CButton label=\"Submit\" @click=\"submit\" \u002F>\n    \u003C\u002Fdiv>\n  `\n});\n","javascript","",[19,55,56,64,70,77,83,89,95,101,107,113,119,125,131,136,142,148,154,160,166,172],{"__ignoreMap":53},[57,58,61],"span",{"class":59,"line":60},"line",1,[57,62,63],{},"const { vue, primeVue } = window.engine;\n",[57,65,67],{"class":59,"line":66},2,[57,68,69],{},"const { defineComponent, ref } = vue;\n",[57,71,73],{"class":59,"line":72},3,[57,74,76],{"emptyLinePlaceholder":75},true,"\n",[57,78,80],{"class":59,"line":79},4,[57,81,82],{},"const MyForm = defineComponent({\n",[57,84,86],{"class":59,"line":85},5,[57,87,88],{},"  components: {\n",[57,90,92],{"class":59,"line":91},6,[57,93,94],{},"    Button: primeVue.Button,\n",[57,96,98],{"class":59,"line":97},7,[57,99,100],{},"    InputText: primeVue.InputText,\n",[57,102,104],{"class":59,"line":103},8,[57,105,106],{},"    Dropdown: primeVue.Dropdown\n",[57,108,110],{"class":59,"line":109},9,[57,111,112],{},"  },\n",[57,114,116],{"class":59,"line":115},10,[57,117,118],{},"  setup() {\n",[57,120,122],{"class":59,"line":121},11,[57,123,124],{},"    const name = ref(\"\");\n",[57,126,128],{"class":59,"line":127},12,[57,129,130],{},"    return { name };\n",[57,132,134],{"class":59,"line":133},13,[57,135,112],{},[57,137,139],{"class":59,"line":138},14,[57,140,141],{},"  template: \u002F*html*\u002F`\n",[57,143,145],{"class":59,"line":144},15,[57,146,147],{},"    \u003Cdiv>\n",[57,149,151],{"class":59,"line":150},16,[57,152,153],{},"      \u003CInputText v-model=\"name\" placeholder=\"Enter name\" \u002F>\n",[57,155,157],{"class":59,"line":156},17,[57,158,159],{},"      \u003CButton label=\"Submit\" @click=\"submit\" \u002F>\n",[57,161,163],{"class":59,"line":162},18,[57,164,165],{},"    \u003C\u002Fdiv>\n",[57,167,169],{"class":59,"line":168},19,[57,170,171],{},"  `\n",[57,173,175],{"class":59,"line":174},20,[57,176,177],{},"});\n",[15,179,180,184,185,188],{},[181,182,183],"strong",{},"Global directives:"," ",[19,186,187],{},"v-tooltip"," is registered globally and works on any element.",[15,190,191,192,196],{},"Browse all components at ",[34,193,195],{"href":36,"rel":194},[38],"primevue.org",".",[24,198],{},[27,200,202],{"id":201},"vueuse","VueUse",[15,204,205,209],{},[34,206,202],{"href":207,"rel":208},"https:\u002F\u002Fvueuse.org\u002F",[38]," is a collection of Vue composition utilities for common tasks like handling mouse position, keyboard events, local storage, and more.",[15,211,42,212,46],{},[19,213,214],{},"window.engine.vueUse",[48,216,218],{"className":50,"code":217,"language":52,"meta":53,"style":53},"const { vue, vueUse } = window.engine;\nconst { defineComponent } = vue;\nconst { useMouse, useLocalStorage, useWindowSize } = vueUse;\n\nconst MouseTracker = defineComponent({\n  setup() {\n    const { x, y } = useMouse();\n    const { width, height } = useWindowSize();\n    const savedValue = useLocalStorage('my-key', 'default');\n\n    return { x, y, width, height, savedValue };\n  },\n  template: \u002F*html*\u002F`\n    \u003Cdiv>\n      \u003Cp>Mouse: {{ x }}, {{ y }}\u003C\u002Fp>\n      \u003Cp>Window: {{ width }}x{{ height }}\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  `\n});\n",[19,219,220,225,230,235,239,244,248,253,258,263,267,272,276,280,284,289,294,298,302],{"__ignoreMap":53},[57,221,222],{"class":59,"line":60},[57,223,224],{},"const { vue, vueUse } = window.engine;\n",[57,226,227],{"class":59,"line":66},[57,228,229],{},"const { defineComponent } = vue;\n",[57,231,232],{"class":59,"line":72},[57,233,234],{},"const { useMouse, useLocalStorage, useWindowSize } = vueUse;\n",[57,236,237],{"class":59,"line":79},[57,238,76],{"emptyLinePlaceholder":75},[57,240,241],{"class":59,"line":85},[57,242,243],{},"const MouseTracker = defineComponent({\n",[57,245,246],{"class":59,"line":91},[57,247,118],{},[57,249,250],{"class":59,"line":97},[57,251,252],{},"    const { x, y } = useMouse();\n",[57,254,255],{"class":59,"line":103},[57,256,257],{},"    const { width, height } = useWindowSize();\n",[57,259,260],{"class":59,"line":109},[57,261,262],{},"    const savedValue = useLocalStorage('my-key', 'default');\n",[57,264,265],{"class":59,"line":115},[57,266,76],{"emptyLinePlaceholder":75},[57,268,269],{"class":59,"line":121},[57,270,271],{},"    return { x, y, width, height, savedValue };\n",[57,273,274],{"class":59,"line":127},[57,275,112],{},[57,277,278],{"class":59,"line":133},[57,279,141],{},[57,281,282],{"class":59,"line":138},[57,283,147],{},[57,285,286],{"class":59,"line":144},[57,287,288],{},"      \u003Cp>Mouse: {{ x }}, {{ y }}\u003C\u002Fp>\n",[57,290,291],{"class":59,"line":150},[57,292,293],{},"      \u003Cp>Window: {{ width }}x{{ height }}\u003C\u002Fp>\n",[57,295,296],{"class":59,"line":156},[57,297,165],{},[57,299,300],{"class":59,"line":162},[57,301,171],{},[57,303,304],{"class":59,"line":168},[57,305,177],{},[15,307,308,309,196],{},"Browse all utilities at ",[34,310,312],{"href":207,"rel":311},[38],"vueuse.org",[24,314],{},[27,316,318],{"id":317},"floating-ui","Floating UI",[15,320,321,325],{},[34,322,318],{"href":323,"rel":324},"https:\u002F\u002Ffloating-ui.com\u002F",[38]," is a library for positioning floating elements like tooltips, popovers, and dropdowns.",[15,327,42,328,46],{},[19,329,330],{},"window.engine.floatingUi",[48,332,334],{"className":50,"code":333,"language":52,"meta":53,"style":53},"const { vue, floatingUi } = window.engine;\nconst { defineComponent, ref } = vue;\nconst { useFloating, offset, flip, shift } = floatingUi;\n\nconst Tooltip = defineComponent({\n  setup() {\n    const reference = ref(null);\n    const floating = ref(null);\n\n    const { floatingStyles } = useFloating(reference, floating, {\n      middleware: [offset(10), flip(), shift()]\n    });\n\n    return { reference, floating, floatingStyles };\n  },\n  template: \u002F*html*\u002F`\n    \u003Cdiv>\n      \u003Cbutton ref=\"reference\">Hover me\u003C\u002Fbutton>\n      \u003Cdiv ref=\"floating\" :style=\"floatingStyles\">Tooltip content\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  `\n});\n",[19,335,336,341,345,350,354,359,363,368,373,377,382,387,392,396,401,405,409,413,418,423,427,432],{"__ignoreMap":53},[57,337,338],{"class":59,"line":60},[57,339,340],{},"const { vue, floatingUi } = window.engine;\n",[57,342,343],{"class":59,"line":66},[57,344,69],{},[57,346,347],{"class":59,"line":72},[57,348,349],{},"const { useFloating, offset, flip, shift } = floatingUi;\n",[57,351,352],{"class":59,"line":79},[57,353,76],{"emptyLinePlaceholder":75},[57,355,356],{"class":59,"line":85},[57,357,358],{},"const Tooltip = defineComponent({\n",[57,360,361],{"class":59,"line":91},[57,362,118],{},[57,364,365],{"class":59,"line":97},[57,366,367],{},"    const reference = ref(null);\n",[57,369,370],{"class":59,"line":103},[57,371,372],{},"    const floating = ref(null);\n",[57,374,375],{"class":59,"line":109},[57,376,76],{"emptyLinePlaceholder":75},[57,378,379],{"class":59,"line":115},[57,380,381],{},"    const { floatingStyles } = useFloating(reference, floating, {\n",[57,383,384],{"class":59,"line":121},[57,385,386],{},"      middleware: [offset(10), flip(), shift()]\n",[57,388,389],{"class":59,"line":127},[57,390,391],{},"    });\n",[57,393,394],{"class":59,"line":133},[57,395,76],{"emptyLinePlaceholder":75},[57,397,398],{"class":59,"line":138},[57,399,400],{},"    return { reference, floating, floatingStyles };\n",[57,402,403],{"class":59,"line":144},[57,404,112],{},[57,406,407],{"class":59,"line":150},[57,408,141],{},[57,410,411],{"class":59,"line":156},[57,412,147],{},[57,414,415],{"class":59,"line":162},[57,416,417],{},"      \u003Cbutton ref=\"reference\">Hover me\u003C\u002Fbutton>\n",[57,419,420],{"class":59,"line":168},[57,421,422],{},"      \u003Cdiv ref=\"floating\" :style=\"floatingStyles\">Tooltip content\u003C\u002Fdiv>\n",[57,424,425],{"class":59,"line":174},[57,426,165],{},[57,428,430],{"class":59,"line":429},21,[57,431,171],{},[57,433,435],{"class":59,"line":434},22,[57,436,177],{},[15,438,439,440,196],{},"Browse documentation at ",[34,441,443],{"href":323,"rel":442},[38],"floating-ui.com",[24,445],{},[27,447,449],{"id":448},"gsap","GSAP",[15,451,452,456],{},[34,453,449],{"href":454,"rel":455},"https:\u002F\u002Fgsap.com\u002F",[38]," (GreenSock Animation Platform) is a professional-grade animation library.",[15,458,42,459,46],{},[19,460,461],{},"window.engine.gsap",[48,463,465],{"className":50,"code":464,"language":52,"meta":53,"style":53},"const { gsap } = window.engine;\n\n\u002F\u002F Animate an element\ngsap.to(\".my-element\", {\n  x: 100,\n  opacity: 0.5,\n  duration: 1,\n  ease: \"power2.out\"\n});\n\n\u002F\u002F Timeline for sequenced animations\nconst tl = gsap.timeline();\ntl.to(\".box\", { x: 100, duration: 0.5 })\n  .to(\".box\", { y: 50, duration: 0.3 })\n  .to(\".box\", { rotation: 360, duration: 0.5 });\n",[19,466,467,472,476,481,486,491,496,501,506,510,514,519,524,529,534],{"__ignoreMap":53},[57,468,469],{"class":59,"line":60},[57,470,471],{},"const { gsap } = window.engine;\n",[57,473,474],{"class":59,"line":66},[57,475,76],{"emptyLinePlaceholder":75},[57,477,478],{"class":59,"line":72},[57,479,480],{},"\u002F\u002F Animate an element\n",[57,482,483],{"class":59,"line":79},[57,484,485],{},"gsap.to(\".my-element\", {\n",[57,487,488],{"class":59,"line":85},[57,489,490],{},"  x: 100,\n",[57,492,493],{"class":59,"line":91},[57,494,495],{},"  opacity: 0.5,\n",[57,497,498],{"class":59,"line":97},[57,499,500],{},"  duration: 1,\n",[57,502,503],{"class":59,"line":103},[57,504,505],{},"  ease: \"power2.out\"\n",[57,507,508],{"class":59,"line":109},[57,509,177],{},[57,511,512],{"class":59,"line":115},[57,513,76],{"emptyLinePlaceholder":75},[57,515,516],{"class":59,"line":121},[57,517,518],{},"\u002F\u002F Timeline for sequenced animations\n",[57,520,521],{"class":59,"line":127},[57,522,523],{},"const tl = gsap.timeline();\n",[57,525,526],{"class":59,"line":133},[57,527,528],{},"tl.to(\".box\", { x: 100, duration: 0.5 })\n",[57,530,531],{"class":59,"line":138},[57,532,533],{},"  .to(\".box\", { y: 50, duration: 0.3 })\n",[57,535,536],{"class":59,"line":144},[57,537,538],{},"  .to(\".box\", { rotation: 360, duration: 0.5 });\n",[15,540,439,541,196],{},[34,542,544],{"href":454,"rel":543},[38],"gsap.com",[24,546],{},[27,548,549],{"id":549},"fast-copy",[15,551,552,556],{},[34,553,549],{"href":554,"rel":555},"https:\u002F\u002Fgithub.com\u002Fplanttheidea\u002Ffast-copy",[38]," is a fast deep cloning library.",[15,558,42,559,46],{},[19,560,561],{},"window.engine.fastCopy",[48,563,565],{"className":50,"code":564,"language":52,"meta":53,"style":53},"const { fastCopy } = window.engine;\n\nconst original = {\n  nested: { value: 1 },\n  array: [1, 2, 3]\n};\n\n\u002F\u002F Create a deep clone\nconst clone = fastCopy(original);\nclone.nested.value = 2;\n\nconsole.log(original.nested.value); \u002F\u002F 1 (unchanged)\nconsole.log(clone.nested.value);    \u002F\u002F 2\n",[19,566,567,572,576,581,586,591,596,600,605,610,615,619,624],{"__ignoreMap":53},[57,568,569],{"class":59,"line":60},[57,570,571],{},"const { fastCopy } = window.engine;\n",[57,573,574],{"class":59,"line":66},[57,575,76],{"emptyLinePlaceholder":75},[57,577,578],{"class":59,"line":72},[57,579,580],{},"const original = {\n",[57,582,583],{"class":59,"line":79},[57,584,585],{},"  nested: { value: 1 },\n",[57,587,588],{"class":59,"line":85},[57,589,590],{},"  array: [1, 2, 3]\n",[57,592,593],{"class":59,"line":91},[57,594,595],{},"};\n",[57,597,598],{"class":59,"line":97},[57,599,76],{"emptyLinePlaceholder":75},[57,601,602],{"class":59,"line":103},[57,603,604],{},"\u002F\u002F Create a deep clone\n",[57,606,607],{"class":59,"line":109},[57,608,609],{},"const clone = fastCopy(original);\n",[57,611,612],{"class":59,"line":115},[57,613,614],{},"clone.nested.value = 2;\n",[57,616,617],{"class":59,"line":121},[57,618,76],{"emptyLinePlaceholder":75},[57,620,621],{"class":59,"line":127},[57,622,623],{},"console.log(original.nested.value); \u002F\u002F 1 (unchanged)\n",[57,625,626],{"class":59,"line":133},[57,627,628],{},"console.log(clone.nested.value);    \u002F\u002F 2\n",[24,630],{},[27,632,634],{"id":633},"dialogs","Dialogs",[15,636,637,638,641,642,196],{},"The engine provides styled confirmation and alert dialogs via ",[19,639,640],{},"window.engine.showConfirm"," and ",[19,643,644],{},"window.engine.showAlert",[646,647,649],"h3",{"id":648},"showconfirm","showConfirm",[15,651,652,653,656,657,660],{},"Shows a styled confirmation dialog. Returns a promise that resolves to ",[19,654,655],{},"true"," (accepted) or ",[19,658,659],{},"false"," (rejected).",[48,662,664],{"className":50,"code":663,"language":52,"meta":53,"style":53},"const { showConfirm } = window.engine;\n\nasync function onDelete(character) {\n  const confirmed = await showConfirm({\n    message: \"Are you sure you want to delete this?\",\n    header: \"Confirm Deletion\",       \u002F\u002F optional, default \"Confirm\"\n    acceptLabel: \"Delete\",             \u002F\u002F optional, default \"OK\"\n    rejectLabel: \"Cancel\",             \u002F\u002F optional, default \"Cancel\"\n  });\n\n  if (!confirmed) return;\n  \u002F\u002F proceed with deletion\n  game.deleteCharacter(character);\n}\n",[19,665,666,671,675,680,685,690,695,700,705,710,714,719,724,729],{"__ignoreMap":53},[57,667,668],{"class":59,"line":60},[57,669,670],{},"const { showConfirm } = window.engine;\n",[57,672,673],{"class":59,"line":66},[57,674,76],{"emptyLinePlaceholder":75},[57,676,677],{"class":59,"line":72},[57,678,679],{},"async function onDelete(character) {\n",[57,681,682],{"class":59,"line":79},[57,683,684],{},"  const confirmed = await showConfirm({\n",[57,686,687],{"class":59,"line":85},[57,688,689],{},"    message: \"Are you sure you want to delete this?\",\n",[57,691,692],{"class":59,"line":91},[57,693,694],{},"    header: \"Confirm Deletion\",       \u002F\u002F optional, default \"Confirm\"\n",[57,696,697],{"class":59,"line":97},[57,698,699],{},"    acceptLabel: \"Delete\",             \u002F\u002F optional, default \"OK\"\n",[57,701,702],{"class":59,"line":103},[57,703,704],{},"    rejectLabel: \"Cancel\",             \u002F\u002F optional, default \"Cancel\"\n",[57,706,707],{"class":59,"line":109},[57,708,709],{},"  });\n",[57,711,712],{"class":59,"line":115},[57,713,76],{"emptyLinePlaceholder":75},[57,715,716],{"class":59,"line":121},[57,717,718],{},"  if (!confirmed) return;\n",[57,720,721],{"class":59,"line":127},[57,722,723],{},"  \u002F\u002F proceed with deletion\n",[57,725,726],{"class":59,"line":133},[57,727,728],{},"  game.deleteCharacter(character);\n",[57,730,731],{"class":59,"line":138},[57,732,733],{},"}\n",[646,735,737],{"id":736},"showalert","showAlert",[15,739,740],{},"Shows a styled alert dialog. Returns a promise that resolves when closed.",[48,742,744],{"className":50,"code":743,"language":52,"meta":53,"style":53},"const { showAlert } = window.engine;\n\nasync function onComplete() {\n  await showAlert(\"Operation complete!\", \"Success\");\n  \u002F\u002F continues after user closes the dialog\n}\n",[19,745,746,751,755,760,765,770],{"__ignoreMap":53},[57,747,748],{"class":59,"line":60},[57,749,750],{},"const { showAlert } = window.engine;\n",[57,752,753],{"class":59,"line":66},[57,754,76],{"emptyLinePlaceholder":75},[57,756,757],{"class":59,"line":72},[57,758,759],{},"async function onComplete() {\n",[57,761,762],{"class":59,"line":79},[57,763,764],{},"  await showAlert(\"Operation complete!\", \"Success\");\n",[57,766,767],{"class":59,"line":85},[57,768,769],{},"  \u002F\u002F continues after user closes the dialog\n",[57,771,772],{"class":59,"line":91},[57,773,733],{},[24,775],{},[27,777,779],{"id":778},"quick-reference","Quick Reference",[781,782,783,799],"table",{},[784,785,786],"thead",{},[787,788,789,793,796],"tr",{},[790,791,792],"th",{},"Library",[790,794,795],{},"Access",[790,797,798],{},"Purpose",[800,801,802,814,825,836,847,858],"tbody",{},[787,803,804,807,811],{},[805,806,30],"td",{},[805,808,809],{},[19,810,45],{},[805,812,813],{},"UI components (buttons, inputs, dialogs)",[787,815,816,818,822],{},[805,817,202],{},[805,819,820],{},[19,821,214],{},[805,823,824],{},"Vue composition utilities",[787,826,827,829,833],{},[805,828,318],{},[805,830,831],{},[19,832,330],{},[805,834,835],{},"Positioning floating elements",[787,837,838,840,844],{},[805,839,449],{},[805,841,842],{},[19,843,461],{},[805,845,846],{},"Professional animations",[787,848,849,851,855],{},[805,850,549],{},[805,852,853],{},[19,854,561],{},[805,856,857],{},"Deep cloning objects",[787,859,860,862,869],{},[805,861,634],{},[805,863,864,866,867],{},[19,865,640],{}," \u002F ",[19,868,737],{},[805,870,871],{},"Confirmation and alert popups",[873,874,875],"style",{},"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":53,"searchDepth":66,"depth":66,"links":877},[878,879,880,881,882,883,887],{"id":29,"depth":66,"text":30},{"id":201,"depth":66,"text":202},{"id":317,"depth":66,"text":318},{"id":448,"depth":66,"text":449},{"id":549,"depth":66,"text":549},{"id":633,"depth":66,"text":634,"children":884},[885,886],{"id":648,"depth":72,"text":649},{"id":736,"depth":72,"text":737},{"id":778,"depth":66,"text":779},"Dryad Engine exposes several third-party libraries through window.engine for use in custom scripts.","md",{"plugin":891,"category":892,"page":893},"global_essentials","advanced","3rd_party","\u002Fdocs\u002Fglobal_essentials\u002Fadvanced\u002F3rd_party",{"title":5,"description":888},"docs\u002Fglobal_essentials\u002Fadvanced\u002F3rd_party","EJUEl5wyfIMbqCqQ_vklfT9FC26dQvcMnspyK2gX9aA",1779582262139]