file-viewer3 1.0.8 → 1.0.25

package/dist/example/process.drawio

@@ -0,0 +1,249 @@
+<mxfile host="Electron" modified="2023-07-27T15:03:53.622Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/21.6.5 Chrome/114.0.5735.243 Electron/25.3.1 Safari/537.36" etag="NQ6N_BSsNbhpSRxe8Am2" version="21.6.5" type="device" pages="2">
+  <diagram name="detailed DFD" id="WVXzPFL2b05tTFR0NIl-">
+    <mxGraphModel dx="1761" dy="930" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-52" style="edgeStyle=none;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;endArrow=none;endFill=0;dashed=1;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-30" target="_VqTWJ9UZErcvDfO2zWc-12">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-54" style="edgeStyle=none;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;endArrow=none;endFill=0;dashed=1;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-30" target="_VqTWJ9UZErcvDfO2zWc-16">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="402" y="274" />
+              <mxPoint x="366" y="597" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-68" style="edgeStyle=none;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;endArrow=none;endFill=0;dashed=1;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-12" target="_VqTWJ9UZErcvDfO2zWc-22">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="843" y="272" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-69" style="edgeStyle=none;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;endArrow=none;endFill=0;dashed=1;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-16" target="_VqTWJ9UZErcvDfO2zWc-22">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="714" y="514" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-42" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-1" target="_VqTWJ9UZErcvDfO2zWc-17">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-44" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-1" target="_VqTWJ9UZErcvDfO2zWc-2">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-48" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-1" target="_VqTWJ9UZErcvDfO2zWc-6">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-1" value="External User" style="whiteSpace=wrap;html=1;aspect=fixed;fontSize=16;rounded=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+          <mxGeometry x="-55" y="279" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-45" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-2" target="_VqTWJ9UZErcvDfO2zWc-7">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-2" value="enter prompt" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontSize=12;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+          <mxGeometry x="129" y="279" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-37" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-3" target="_VqTWJ9UZErcvDfO2zWc-4">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-51" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;noJump=0;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-22" target="_VqTWJ9UZErcvDfO2zWc-3">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-3" value="LLM interface" style="whiteSpace=wrap;html=1;aspect=fixed;fontSize=16;rounded=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+          <mxGeometry x="558" y="416" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-36" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-4" target="_VqTWJ9UZErcvDfO2zWc-7">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-4" value="generate response" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontSize=12;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+          <mxGeometry x="416" y="416" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-46" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-5" target="_VqTWJ9UZErcvDfO2zWc-1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-5" value="display response" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontSize=12;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+          <mxGeometry x="129" y="416" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-49" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-6" target="_VqTWJ9UZErcvDfO2zWc-7">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-6" value="correct response" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontSize=12;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+          <mxGeometry x="129" y="553" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-35" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;startArrow=classic;startFill=1;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-7" target="_VqTWJ9UZErcvDfO2zWc-31">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-38" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-7" target="_VqTWJ9UZErcvDfO2zWc-9">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-39" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-7" target="_VqTWJ9UZErcvDfO2zWc-33">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-47" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-7" target="_VqTWJ9UZErcvDfO2zWc-5">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-50" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-7" target="_VqTWJ9UZErcvDfO2zWc-8">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-7" value="website/ API interface" style="whiteSpace=wrap;html=1;aspect=fixed;fontSize=16;rounded=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+          <mxGeometry x="272" y="416" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-19" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-8" target="_VqTWJ9UZErcvDfO2zWc-16">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-8" value="store wrong response and&amp;nbsp; correction" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontSize=12;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+          <mxGeometry x="416" y="553" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-14" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-9" target="_VqTWJ9UZErcvDfO2zWc-12">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-9" value="store prompt" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontSize=12;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+          <mxGeometry x="416" y="279" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-23" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-10" target="_VqTWJ9UZErcvDfO2zWc-11">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-10" value="Training algorithm" style="whiteSpace=wrap;html=1;aspect=fixed;fontSize=16;rounded=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="724" y="553" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-24" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-11" target="_VqTWJ9UZErcvDfO2zWc-22">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-11" value="integrate into LLM" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontSize=12;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="898" y="553" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-63" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-12" target="_VqTWJ9UZErcvDfO2zWc-61">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-12" value="User Prompts" style="html=1;dashed=0;whiteSpace=wrap;shape=mxgraph.dfd.dataStoreID;align=center;spacingLeft=3;points=[[0,0],[0.5,0],[1,0],[0,0.5],[1,0.5],[0,1],[0.5,1],[1,1]];fontSize=16;labelPosition=center;verticalLabelPosition=top;verticalAlign=bottom;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
+          <mxGeometry x="548" y="167" width="100" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-65" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-16" target="_VqTWJ9UZErcvDfO2zWc-58">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-16" value="User Corrections" style="html=1;dashed=0;whiteSpace=wrap;shape=mxgraph.dfd.dataStoreID;align=center;spacingLeft=3;points=[[0,0],[0.5,0],[1,0],[0,0.5],[1,0.5],[0,1],[0.5,1],[1,1]];fontSize=16;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
+          <mxGeometry x="406" y="686" width="100" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-43" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-17" target="_VqTWJ9UZErcvDfO2zWc-7">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-17" value="log in" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontSize=12;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+          <mxGeometry x="129" y="142" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-29" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-22" target="_VqTWJ9UZErcvDfO2zWc-10">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-22" value="Large Language Model" style="html=1;dashed=0;whiteSpace=wrap;shape=mxgraph.dfd.dataStoreID;align=left;spacingLeft=3;points=[[0,0],[0.5,0],[1,0],[0,0.5],[1,0.5],[0,1],[0.5,1],[1,1]];fontSize=16;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
+          <mxGeometry x="888" y="441" width="100" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-30" value="Accounts Database" style="html=1;dashed=0;whiteSpace=wrap;shape=mxgraph.dfd.dataStoreID;align=center;spacingLeft=3;points=[[0,0],[0.5,0],[1,0],[0,0.5],[1,0.5],[0,1],[0.5,1],[1,1]];fontSize=16;labelPosition=center;verticalLabelPosition=top;verticalAlign=bottom;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="1">
+          <mxGeometry x="262" y="167" width="100" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-34" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;startArrow=classic;startFill=1;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-31" target="_VqTWJ9UZErcvDfO2zWc-30">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-31" value="validate user login &amp;amp; account" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontSize=12;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+          <mxGeometry x="272" y="279" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-40" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-33" target="_VqTWJ9UZErcvDfO2zWc-3">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-33" value="pass prompt to LLM" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontSize=12;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+          <mxGeometry x="558" y="279" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-66" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-58" target="_VqTWJ9UZErcvDfO2zWc-10">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-58" value="read corrections" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontSize=12;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="558" y="661" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-64" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;jumpStyle=arc;" edge="1" parent="1" source="_VqTWJ9UZErcvDfO2zWc-61" target="_VqTWJ9UZErcvDfO2zWc-10">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_VqTWJ9UZErcvDfO2zWc-61" value="read prompts" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontSize=12;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="724" y="279" width="80" height="80" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+  <diagram id="76xZlu7qyclzCOkfQ9TL" name="context diagram">
+    <mxGraphModel dx="2161" dy="930" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="HG2r_jVnAqMEqGUrKUAG-4" style="edgeStyle=none;curved=1;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;" edge="1" parent="1" source="HG2r_jVnAqMEqGUrKUAG-1" target="HG2r_jVnAqMEqGUrKUAG-2">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="HG2r_jVnAqMEqGUrKUAG-5" value="submit prompt" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=16;" vertex="1" connectable="0" parent="HG2r_jVnAqMEqGUrKUAG-4">
+          <mxGeometry x="-0.5283" y="1" relative="1" as="geometry">
+            <mxPoint x="51" y="1" as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="HG2r_jVnAqMEqGUrKUAG-8" style="edgeStyle=none;curved=1;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;" edge="1" parent="1" source="HG2r_jVnAqMEqGUrKUAG-1" target="HG2r_jVnAqMEqGUrKUAG-2">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="-309" y="395" as="sourcePoint" />
+            <mxPoint x="-97" y="395" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="HG2r_jVnAqMEqGUrKUAG-9" value="log in" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=16;" vertex="1" connectable="0" parent="HG2r_jVnAqMEqGUrKUAG-8">
+          <mxGeometry x="-0.2453" y="2" relative="1" as="geometry">
+            <mxPoint y="1" as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="HG2r_jVnAqMEqGUrKUAG-1" value="External User" style="whiteSpace=wrap;html=1;aspect=fixed;fontSize=16;rounded=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+          <mxGeometry x="-463" y="377" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="HG2r_jVnAqMEqGUrKUAG-6" style="edgeStyle=none;curved=1;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;exitX=0;exitY=0.75;exitDx=0;exitDy=0;entryX=1;entryY=0.75;entryDx=0;entryDy=0;" edge="1" parent="1" source="HG2r_jVnAqMEqGUrKUAG-2" target="HG2r_jVnAqMEqGUrKUAG-1">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="-97" y="442" as="sourcePoint" />
+            <mxPoint x="-309" y="442" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="HG2r_jVnAqMEqGUrKUAG-7" value="generated response" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=16;" vertex="1" connectable="0" parent="HG2r_jVnAqMEqGUrKUAG-6">
+          <mxGeometry x="0.4245" y="-2" relative="1" as="geometry">
+            <mxPoint x="40" as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="HG2r_jVnAqMEqGUrKUAG-11" style="edgeStyle=none;curved=1;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;entryX=1;entryY=0.75;entryDx=0;entryDy=0;" edge="1" parent="1" source="HG2r_jVnAqMEqGUrKUAG-3" target="HG2r_jVnAqMEqGUrKUAG-2">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="BquQUG1SqXJBCUo184Wz-6" value="analyse prompt &amp;amp; generate response" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=16;rotation=0;" vertex="1" connectable="0" parent="HG2r_jVnAqMEqGUrKUAG-11">
+          <mxGeometry x="0.7501" relative="1" as="geometry">
+            <mxPoint x="125" y="-4" as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="BquQUG1SqXJBCUo184Wz-2" style="edgeStyle=none;curved=1;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;startArrow=classic;startFill=1;" edge="1" parent="1" source="HG2r_jVnAqMEqGUrKUAG-2" target="BquQUG1SqXJBCUo184Wz-1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="BquQUG1SqXJBCUo184Wz-3" value="verify user" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=16;" vertex="1" connectable="0" parent="BquQUG1SqXJBCUo184Wz-2">
+          <mxGeometry x="0.1061" y="1" relative="1" as="geometry">
+            <mxPoint y="1" as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="BquQUG1SqXJBCUo184Wz-4" style="edgeStyle=none;curved=1;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;exitX=1;exitY=0.25;exitDx=0;exitDy=0;" edge="1" parent="1" source="HG2r_jVnAqMEqGUrKUAG-2" target="HG2r_jVnAqMEqGUrKUAG-3">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="BquQUG1SqXJBCUo184Wz-5" value="train model with prompt" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=16;" vertex="1" connectable="0" parent="BquQUG1SqXJBCUo184Wz-4">
+          <mxGeometry x="-0.6739" y="2" relative="1" as="geometry">
+            <mxPoint x="68" y="4" as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <UserObject label="LLM application" link="data:page/id,WVXzPFL2b05tTFR0NIl-" id="HG2r_jVnAqMEqGUrKUAG-2">
+          <mxCell style="whiteSpace=wrap;html=1;aspect=fixed;fontSize=16;rounded=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+            <mxGeometry x="-97" y="377" width="80" height="80" as="geometry" />
+          </mxCell>
+        </UserObject>
+        <mxCell id="HG2r_jVnAqMEqGUrKUAG-3" value="Large Language Model" style="html=1;dashed=0;whiteSpace=wrap;shape=mxgraph.dfd.dataStoreID;align=left;spacingLeft=3;points=[[0,0],[0.5,0],[1,0],[0,0.5],[1,0.5],[0,1],[0.5,1],[1,1]];fontSize=16;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
+          <mxGeometry x="322" y="402" width="100" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="BquQUG1SqXJBCUo184Wz-1" value="Accounts Database" style="html=1;dashed=0;whiteSpace=wrap;shape=mxgraph.dfd.dataStoreID;align=center;spacingLeft=3;points=[[0,0],[0.5,0],[1,0],[0,0.5],[1,0.5],[0,1],[0.5,1],[1,1]];fontSize=16;labelPosition=center;verticalLabelPosition=top;verticalAlign=bottom;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="1">
+          <mxGeometry x="-107" y="273" width="100" height="30" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>

package/dist/example/program.cs

@@ -0,0 +1,42 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+
+public static class Program
+{
+    private static readonly IReadOnlyDictionary<string, string> Renderers =
+        new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase)
+        {
+            ["pdf"] = "pdfjs-dist",
+            ["ofd"] = "DLTech21/ofd.js",
+            ["typ"] = "typst.ts",
+            ["dxf"] = "@flyfish-dev/cad-viewer",
+            ["dwg"] = "@flyfish-dev/cad-viewer",
+            ["dwf"] = "@flyfish-dev/cad-viewer",
+            ["dwfx"] = "@flyfish-dev/cad-viewer",
+            ["xps"] = "@flyfish-dev/cad-viewer",
+            ["cs"] = "highlight.js",
+            ["json"] = "highlight.js"
+        };
+
+    public static void Main()
+    {
+        var files = new[] { "contract.pdf", "invoice.ofd", "report.typ", "program.cs", "archive.bin" };
+        var rows = files.Select(CreatePreviewPlan);
+
+        foreach (var row in rows)
+        {
+            Console.WriteLine($"{row.File,-14} {row.Renderer,-18} async={row.Async}");
+        }
+    }
+
+    private static PreviewPlan CreatePreviewPlan(string file)
+    {
+        var extension = Path.GetExtension(file).TrimStart('.');
+        var renderer = Renderers.TryGetValue(extension, out var value) ? value : "fallback";
+        return new PreviewPlan(file, renderer, renderer != "fallback");
+    }
+}
+
+public sealed record PreviewPlan(string File, string Renderer, bool Async);

package/dist/example/query.sql

@@ -0,0 +1,30 @@
+with preview_files as (
+  select 1 as id, 'contract.pdf' as filename, 184320 as size_bytes, 'document' as category
+  union all
+  select 2, 'invoice.ofd', 4278691, 'document'
+  union all
+  select 3, 'house.dwfx', 17340177, 'drawing'
+  union all
+  select 4, 'code.ts', 4096, 'source'
+),
+renderer_map as (
+  select 'pdf' as extension, 'pdfjs-dist' as renderer
+  union all select 'ofd', 'DLTech21/ofd.js'
+  union all select 'dxf', '@flyfish-dev/cad-viewer'
+  union all select 'dwg', '@flyfish-dev/cad-viewer'
+  union all select 'dwf', '@flyfish-dev/cad-viewer'
+  union all select 'dwfx', '@flyfish-dev/cad-viewer'
+  union all select 'xps', '@flyfish-dev/cad-viewer'
+  union all select 'ts', 'highlight.js'
+)
+select
+  f.id,
+  f.filename,
+  lower(regexp_replace(f.filename, '^.*\.', '')) as extension,
+  coalesce(m.renderer, 'fallback') as renderer,
+  case when f.size_bytes > 1024 * 1024 then 'large' else 'normal' end as size_bucket
+from preview_files f
+left join renderer_map m
+  on m.extension = lower(regexp_replace(f.filename, '^.*\.', ''))
+where f.category in ('document', 'drawing', 'source')
+order by f.id;

package/dist/example/report.typ

@@ -0,0 +1,90 @@
+#set page(paper: "a4", margin: (x: 18mm, y: 16mm))
+#set text(size: 10pt)
+#set heading(numbering: "1.")
+
+#align(center)[
+  #text(size: 22pt, weight: "bold")[Flyfish Viewer Typst Report]
+  #linebreak()
+  #text(fill: rgb("#64748b"))[Native Typst preview rendered in the browser]
+]
+
+#v(10pt)
+
+#grid(
+  columns: (1fr, 1fr, 1fr),
+  gutter: 10pt,
+  box(fill: rgb("#f0fdf4"), stroke: rgb("#bbf7d0"), inset: 10pt, radius: 5pt)[
+    #text(weight: "bold", fill: rgb("#166534"))[Async Runtime]
+    #linebreak()
+    WASM compiler and renderer are loaded only for `.typ` documents.
+  ],
+  box(fill: rgb("#eff6ff"), stroke: rgb("#bfdbfe"), inset: 10pt, radius: 5pt)[
+    #text(weight: "bold", fill: rgb("#1d4ed8"))[Paged Output]
+    #linebreak()
+    Page size metadata is preserved for preview, print, and HTML export.
+  ],
+  box(fill: rgb("#fff7ed"), stroke: rgb("#fed7aa"), inset: 10pt, radius: 5pt)[
+    #text(weight: "bold", fill: rgb("#9a3412"))[Safe SVG]
+    #linebreak()
+    Generated SVG keeps scripts disabled in the viewer integration.
+  ],
+)
+
+= Why Typst
+
+Typst is a modern markup-based typesetting system. It is expressive like a
+document language, but fast enough for interactive browser previews when paired
+with a WASM renderer.
+
+== Supported preview path
+
+#table(
+  columns: (1.1fr, 1.5fr, 1.4fr, 1.3fr),
+  inset: 7pt,
+  stroke: 0.5pt + rgb("#d8dee8"),
+  fill: (x, y) => if y == 0 { rgb("#e8f3ff") } else if calc.rem(y, 2) == 0 { rgb("#f8fafc") },
+  [Format], [Renderer], [Loading], [Operations],
+  [`.typ`], [`typst.ts` WASM], [Async vendor chunk], [Preview / print / HTML],
+  [`.typst`], [Compatibility alias], [Same render path], [Preview / print / HTML],
+  [Packages], [Typst registry], [Network-bound when used], [Best with pinned templates],
+)
+
+== Formula and code
+
+The renderer keeps mathematical layout and text positioning in SVG:
+
+$ integral_0^1 x^2 dif x = 1/3 quad and quad E = m c^2 $
+
+```ts
+import FileViewer from '@flyfish-group/file-viewer3'
+
+const options = {
+  toolbar: { print: true, exportHtml: true },
+  watermark: { enabled: true, text: 'Internal Preview' }
+}
+```
+
+#pagebreak()
+
+= Browser integration checklist
+
+#enum(
+  [Select `report.typ` from the grouped demo file picker.],
+  [The Typst renderer compiles the source to SVG in a dedicated async chunk.],
+  [Each page is displayed on a white document surface over a neutral canvas.],
+  [Printing and rendered HTML export use the document page dimensions.],
+)
+
+#v(8pt)
+
+#quote(block: true)[
+  The demo intentionally includes headings, tables, math, code, and multiple
+  pages so smoke tests can catch empty output, clipped pages, and broken print
+  adapters.
+]
+
+#rect(width: 100%, height: 58pt, fill: rgb("#ecfdf5"), stroke: rgb("#86efac"), radius: 6pt)[
+  #align(center + horizon)[#text(weight: "bold", fill: rgb("#166534"))[
+    Flyfish Viewer renders Typst documents without server-side conversion.
+  ]]
+]

package/dist/example/sample.eml

@@ -0,0 +1,46 @@
+From: Flyfish Viewer <viewer@flyfish.dev>
+To: Demo User <demo@flyfish.dev>
+Subject: Flyfish Viewer EML Sample
+Date: Tue, 26 May 2026 10:00:00 +0800
+MIME-Version: 1.0
+Message-ID: <sample-eml-20260526@flyfish.dev>
+Content-Type: multipart/mixed; boundary="flyfish-mixed-boundary"
+
+--flyfish-mixed-boundary
+Content-Type: multipart/alternative; boundary="flyfish-alt-boundary"
+
+--flyfish-alt-boundary
+Content-Type: text/plain; charset="UTF-8"
+Content-Transfer-Encoding: 8bit
+
+这是一封用于验证 EML 在线预览的示例邮件。
+
+它包含纯文本正文、HTML 正文和一个文本附件，便于验证邮件头信息、正文切换、附件下载与附件预览。
+
+--flyfish-alt-boundary
+Content-Type: text/html; charset="UTF-8"
+Content-Transfer-Encoding: 8bit
+
+<!doctype html>
+<html>
+  <body>
+    <h1>Flyfish Viewer EML Sample</h1>
+    <p>这是一封用于验证 <strong>EML 在线预览</strong> 的示例邮件。</p>
+    <ul>
+      <li>HTML 正文安全地渲染在 sandbox iframe 中。</li>
+      <li>附件会按需读取并继续调用统一文件预览链路。</li>
+      <li>头信息、纯文本和 HTML 可以独立切换。</li>
+    </ul>
+  </body>
+</html>
+
+--flyfish-alt-boundary--
+
+--flyfish-mixed-boundary
+Content-Type: text/plain; charset="UTF-8"; name="attachment.txt"
+Content-Disposition: attachment; filename="attachment.txt"
+Content-Transfer-Encoding: base64
+
+Rmx5ZmlzaCBWaWV3ZXIgZW1haWwgYXR0YWNobWVudCBzYW1wbGUuCg==
+
+--flyfish-mixed-boundary--

package/dist/example/script.bash

@@ -0,0 +1,36 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+declare -A RENDERERS=(
+  [pdf]="pdfjs-dist"
+  [ofd]="DLTech21/ofd.js"
+  [dxf]="@flyfish-dev/cad-viewer"
+  [dwg]="@flyfish-dev/cad-viewer"
+  [dwf]="@flyfish-dev/cad-viewer"
+  [dwfx]="@flyfish-dev/cad-viewer"
+  [xps]="@flyfish-dev/cad-viewer"
+  [ts]="highlight.js"
+  [json]="highlight.js"
+)
+
+extension_of() {
+  local filename=$1
+  printf '%s\n' "${filename##*.}" | tr '[:upper:]' '[:lower:]'
+}
+
+preview_plan() {
+  local filename=$1
+  local ext
+  ext=$(extension_of "$filename")
+  local renderer=${RENDERERS[$ext]:-fallback}
+  printf '%-18s -> %-18s async=%s\n' "$filename" "$renderer" "$([[ $renderer != fallback ]] && echo yes || echo no)"
+}
+
+main() {
+  local files=(contract.pdf invoice.ofd house.dwfx code.ts archive.bin)
+  for file in "${files[@]}"; do
+    preview_plan "$file"
+  done
+}
+
+main "$@"

package/dist/example/script.sh

@@ -0,0 +1,24 @@
+#!/usr/bin/env sh
+set -eu
+
+ROOT_DIR="$(CDPATH= cd -- "$(dirname -- "$0")/../.." && pwd)"
+EXAMPLE_DIR="$ROOT_DIR/public/example"
+
+count_files() {
+  find "$EXAMPLE_DIR" -type f | wc -l | tr -d ' '
+}
+
+print_section() {
+  printf '\n== %s ==\n' "$1"
+}
+
+print_section "Flyfish Viewer sample audit"
+printf 'root: %s\n' "$ROOT_DIR"
+printf 'examples: %s files\n' "$(count_files)"
+
+print_section "code samples"
+find "$EXAMPLE_DIR" \
+  \( -name '*.js' -o -name '*.ts' -o -name '*.vue' -o -name '*.sql' \) \
+  -maxdepth 1 \
+  -type f \
+  -print | sort

package/dist/example/settings.ini

@@ -0,0 +1,23 @@
+[viewer]
+theme = light
+async = true
+default_scale = fit-width
+sample_picker = accordion
+close_after_select = true
+
+[formats]
+ofd = enabled
+typst = enabled
+dxf = enabled
+dwg = compatibility-message
+html = source-only
+
+[pdf]
+toolbar = enabled
+navigation = enabled
+auto_fit_on_resize = true
+
+[security]
+execute_html = false
+allow_remote_url = true
+require_cors = true

package/dist/example/table.csv

@@ -0,0 +1,4 @@
+name,type,status
+contract,ofd,ready
+drawing,dxf,ready
+source,ts,ready

package/dist/example/text.txt

@@ -0,0 +1,3 @@
+File Viewer text sample
+
+This file is rendered as plain text with the same safe code preview pipeline.

package/dist/example/vector.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="480" height="260" viewBox="0 0 480 260">
+  <rect width="480" height="260" fill="#f6f8fb"/>
+  <rect x="68" y="58" width="344" height="144" rx="20" fill="#ffffff" stroke="#21a366" stroke-width="6"/>
+  <text x="240" y="126" text-anchor="middle" font-family="Arial, sans-serif" font-size="34" font-weight="700" fill="#142335">SVG Preview</text>
+  <text x="240" y="166" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#64748b">Rendered as a safe image asset</text>
+</svg>