1import{kz as le,hT as e,cN as wt,iC as i,dP as We,I as q,eK as L,ed as ee,ad as oe,ak as St,ei as X,P as Ye,aa as P,i as Qe,gr as It,x as Rt,kA as Tt,fH as At,g4 as Et,g3 as Ft,hX as Bt,iv as Lt,j4 as Mt,eR as Ze,fO as Dt,fw as Pt,fQ as Fe,jo as zt,j1 as ge,gA as Nt,gi as W,f5 as Ht,dA as Ot,dI as Wt,f4 as $t,jR as Vt,dw as Gt,iJ as Ut,N as ce,fx as qt,jm as Yt,j9 as Qt,ja as Zt,H as Jt,jM as he,bQ as Xt,f2 as Kt,eo as en,cZ as tn,jw as nn,bH as sn,je as an,eO as on,jl as fe,eL as ln,eM as rn,eN as dn,c9 as cn,jL as un,ce as pn,jN as mn,cb as gn,g7 as hn,cc as fn,hf as xn,jg as bn,cf as yn,hl as kn,hn as Cn,hm as Je,hp as jn,d$ as vn,dR as _n,cF as wn,jk as Sn,ji as In,jj as Rn,gf as Tn,jD as An,i1 as En,gb as Fn,gc as Bn,fl as Ln,fm as Mn,fo as Dn,fp as Pn,fL as zn,hz as Nn,aL as Hn,aN as On,ah as $e,d3 as ie,eB as He,c6 as ut,bO as Wn,d_ as $n,cC as ue,iW as Vn,iX as Gn,b8 as Be,b9 as Un,ct as xe,by as qn,ig as Yn,hY as Qn,iE as Zn,bz as pt,ep as Jn,e0 as Le,ff as Xn}from"./vendor-0c32d6881edc8b76127b.js";import{E as Kn}from"./lib-2b37bc0fe4a3e8309f37.js";import{p as Me,z as es}from"./product-de322983ad7341354c74.js";const ka=le(function(){return e.jsxs(e.Fragment,{children:[e.jsx("title",{children:"Lotics"}),e.jsx("meta",{name:"robots",content:"noindex"}),Kn.VITE_ENV==="development"?e.jsx("div",{style:{display:"flex",flexDirection:"column",height:"100vh"},children:e.jsx(wt,{})}):null]})}),ts="_canvas_1pq0n_15",ns="_canvas_shaded_1pq0n_20",ss="_page_1pq0n_30",as="_page_narrow_1pq0n_38",os="_page_cards_1pq0n_43",is="_section_1pq0n_49",ls="_section_content_1pq0n_55",rs="_card_1pq0n_61",ds="_preview_1pq0n_70",cs="_list_container_1pq0n_74",us="_split_pane_1pq0n_82",ps="_source_1pq0n_89",ms="_voice_note_1pq0n_108",gs="_artifacts_1pq0n_115",S={canvas:ts,canvas_shaded:ns,page:ss,page_narrow:as,page_cards:os,section:is,section_content:ls,card:rs,preview:ds,list_container:cs,split_pane:us,source:ps,voice_note:ms,artifacts:gs};function A(n,s,c){return{id:n,role:s,parts:c}}function hs(n){const s=[{url:"https://example.com/report.pdf",mediaType:"application/pdf",filename:"quarterly-report.pdf"},{url:"https://example.com/data.xlsx",mediaType:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",filename:"sales-data.xlsx"},{url:"https://example.com/photo.jpg",mediaType:"image/jpeg",filename:"site-photo.jpg"},{url:"https://example.com/contract.docx",mediaType:"application/vnd.openxmlformats-officedocument.wordprocessingml.document",filename:"contract-draft.docx"},{url:"https://example.com/invoice.pdf",mediaType:"application/pdf",filename:"invoice-march.pdf"},{url:"https://example.com/notes.txt",mediaType:"text/plain",filename:"meeting-notes.txt"},{url:"https://example.com/logo.png",mediaType:"image/png",filename:"company-logo.png"},{url:"https://example.com/budget.csv",mediaType:"text/csv",filename:"budget-2026.csv"}];return Array.from({length:n},(c,r)=>({type:"file",...s[r%s.length],filename:n>s.length?`${s[r%s.length].filename.replace(/\./,`-${Math.floor(r/s.length)+1}.`)}`:s[r%s.length].filename}))}function I(n,s,c,r){return{type:`tool-${s}`,toolCallId:n,state:"output-available",input:c,output:r}}function fs(n,s,c,r){return{type:`tool-${s}`,toolCallId:n,state:"output-error",input:c,errorText:r}}function xs(n,s,c){return{type:`tool-${s}`,toolCallId:n,state:"input-available",input:c}}const bs=`# Heading 1 2## Heading 2 3### Heading 3 4#### Heading 4 5##### Heading 5 6###### Heading 6 7 8--- 9 10## Inline formatting 11 12This is **bold text**, *italic text*, and ***bold italic***. Here's \`inline code\` and ~~strikethrough~~. 13 14You can also combine **bold with \`inline code\`** and *italic with \`inline code\`*. 15 16## Links 17 18Here's a [link to Google](https://google.com) and another [link with title](https://example.com "Example"). 19 20## Paragraphs 21 22This is the first paragraph. It has multiple sentences to show how text wraps and flows in the assistant message bubble. 23 24This is the second paragraph, separated by a blank line. Notice the spacing between paragraphs. 25 26## Unordered lists 27 28- Item one 29- Item two 30- Item three with a longer description that might wrap to the next line depending on the container width 31- Nested item A 32 - Deeply nested item 33- Nested item B 34- Item four 35 36## Ordered lists 37 381. First step 392. Second step 403. Third step with extra detail 41 1. Sub-step A 42 2. Sub-step B 434. Fourth step 44 45## Mixed lists 46 471. First ordered item 48 - Unordered sub-item 49 - Another sub-item 502. Second ordered item 51 1. Ordered sub-item 52 2. Another ordered sub-item 53 54## Task lists 55 56- [x] Completed task 57- [ ] Incomplete task 58- [x] Another done task 59- [ ] Still pending 60 61## Blockquotes 62 63> This is a blockquote. It can span multiple lines and should be visually distinct from regular text. 64 65> Nested blockquotes: 66> 67> > This is nested inside the outer quote. 68 69## Code blocks 70 71Inline: \`const x = 42;\` 72 73\`\`\`typescript 74interface Order { 75 id: string; 76 customer: string; 77 total: number; 78 status: "pending" | "shipped" | "delivered"; 79} 80 81function processOrder(order: Order): void { 82 if (order.status === "pending") { 83 console.log(\`Processing order \${order.id} for \${order.customer}\`); 84 order.status = "shipped"; 85 } 86} 87\`\`\` 88 89\`\`\`sql 90SELECT customers.name, COUNT(orders.id) AS order_count, SUM(orders.total) AS total_spent 91FROM customers 92JOIN orders ON customers.id = orders.customer_id 93WHERE orders.created_at >= '2026-01-01' 94GROUP BY customers.name 95ORDER BY total_spent DESC 96LIMIT 10; 97\`\`\` 98 99\`\`\`json 100{ 101 "name": "Acme Corp", 102 "plan": "enterprise", 103 "users": 150, 104 "features": ["analytics", "export", "api"] 105} 106\`\`\` 107 108## Tables 109 110| Column A | Column B | Column C | Column D | 111|----------|----------|----------|----------| 112| Row 1 A | Row 1 B | Row 1 C | Row 1 D | 113| Row 2 A | Row 2 B | Row 2 C | Row 2 D | 114| Row 3 A | Row 3 B | Row 3 C | Row 3 D | 115 116### Aligned table 117 118| Left-aligned | Center-aligned | Right-aligned | 119|:-------------|:--------------:|--------------:| 120| Left | Center | Right | 121| Data | Data | Data | 122| Longer text | More text | 123,456 | 123 124## Horizontal rules 125 126Above the rule. 127 128--- 129 130Below the rule. 131 132*** 133 134Another section. 135 136## Numbers and data 137 138Here's a summary: 139- **Total revenue**: $1,234,567.89
140- **Orders processed**: 12,450 141- **Average order value**: $99.16 142- **Growth rate**: +23.5% YoY 143 144## Complex content 145 146Here's a paragraph followed by a list, then a code block, then a table â the kind of response an assistant might actually produce: 147 148I analyzed your data and found the following issues: 149 1501. **Missing customer emails** â 47 records have no email address 1512. **Duplicate orders** â 12 orders appear to be duplicates based on matching customer + amount + date 1523. **Invalid status values** â 3 records have status values not in the allowed set 153 154Here's the query I used: 155 156\`\`\`sql 157SELECT id, customer, status FROM orders WHERE status NOT IN ('pending', 'shipped', 'delivered'); 158\`\`\` 159 160Results: 161 162| Order ID | Customer | Invalid Status | 163|----------|----------|----------------| 164| ORD-4521 | Acme Co | processing | 165| ORD-4899 | Globex | cancelled | 166| ORD-5102 | Initech | on_hold | 167 168Would you like me to fix these issues?`,Xe=()=>{},ys=new Map;function be(n){const s=It(n.parts);return s.length===0?null:e.jsx(q,{className:S.artifacts,children:e.jsx(Rt,{artifacts:s,fileVersionMap:ys,onDownload:()=>{}})})}const Ca=le(function(){const s=i.useCallback(()=>{},[]),c=i.useCallback(()=>{},[]),r=i.useCallback(()=>{},[]),[y,h]=i.useState(2);return e.jsx(We,{className:`${S.canvas} ${S.canvas_shaded}`,children:e.jsxs(q,{className:S.page_cards,children:[e.jsx(L,{size:"xl",weight:"semibold",children:"Chat
168Components"}),e.jsx(L,{color:"muted",children:"All shared chat components from packages/ui."}),e.jsx(ee,{size:16}),e.jsx(L,{size:"lg",weight:"semibold",children:"User Messages"}),e.jsx(ee,{size:8}),e.jsx(R,{title:"Plain text",children:e.jsx(oe,{message:A("u1","user",[{type:"text",text:"Can you help me create a new invoice for Acme Corp?"}]),onEdit:c,siblingInfo:null})}),e.jsx(R,{title:"With skill pill",children:e.jsx(oe,{message:A("u2","user",[{type:"text",text:`<user_used_skill name="Create Invoice"> 169Generate invoice 170</user_used_skill> 171<user_request> 172For Acme Corp, $5,000 173</user_request>`}]),onEdit:c,siblingInfo:null})}),e.jsx(R,{title:"With resource context + template + knowledge doc",children:e.jsx(oe,{message:A("u-ctx","user",[{type:"text",text:`<resource_context hint="Items the user attached. Act on these."> 174table: Orders (tbl_01orders0001) 175records: rec_001, rec_002, rec_003 176template: Invoice Template (tmpl_001), type: html 177knowledge_doc: Company Policies (kdoc_001) 178</resource_context> 179<user_request> 180Generate invoices for these orders using the template 181</user_request>`}]),onEdit:c,siblingInfo:null,renderExtras:()=>e.jsx(St,{children:e.jsx(L,{size:"sm",userSelect:"none",children:"Orders · 3 records"})})})}),e.jsx(R,{title:"Voice recording",children:e.jsx(oe,{message:A("u-voice","user",[{type:"text",text:`<voice_recording session_id="sess_abc123" duration_seconds="120" /> 182<user_request> 183Summarize the meeting notes 184</user_request>`}]),onEdit:c,siblingInfo:null,renderExtras:()=>e.jsxs(X,{className:S.voice_note,children:[e.jsx(L,{size:"sm",weight:"medium",children:"Voice recording · 2 minutes"}),e.jsx(L,{size:"xs",color:"muted",children:"Audio player would render here (platform-specific)"})]})})}),e.jsx(R,{title:"With branch navigation",children:e.jsx(oe,{message:A("u3","user",[{type:"text",text:"Show me all orders from last month"}]),onEdit:c,siblingInfo:{current:2,total:3},onNavigateSibling:Xe})}),e.jsxs(R,{title:`File attachments (${y})`,children:[e.jsxs(X,{direction:"row",gap:8,align:"center",children:[e.jsx(Ye,{title:"-",color:"secondary",onPress:()=>h(x=>Math.max(0,x-1))}),e.jsx(L,{weight:"medium",children:y}),e.jsx(Ye,{title:"+",color:"secondary",onPress:()=>h(x=>Math.min(8,x+1))})]}),e.jsx(ee,{size:8}),e.jsx(oe,{message:A("u4","user",[{type:"text",text:`<user_request> 185Please review these documents 186</user_request>`},...hs(y)]),onEdit:c,siblingInfo:null})]}),e.jsx(ee,{size:24}),e.jsx(L,{size:"lg",weight:"semibold",children:"Assistant Messages"}),e.jsx(ee,{size:8}),e.jsx(R,{title:"Full markdown demo",children:e.jsx(P,{message:A("a-md","assistant",[{type:"text",text:bs}]),isLastMessage:!0,status:"ready",onRegenerate:s,siblingInfo:null})}),e.jsx(R,{title:"Simple text response",children:e.jsx(P,{message:A("a1","assistant",[{type:"text",text:"I found **3 orders** from last month totaling $12,450. Would you like me to export them?"}]),isLastMessage:!1,status:"ready",onRegenerate:s,siblingInfo:null})}),e.jsx(R,{title:"With action bar (last message)",children:e.jsx(P,{message:A("a2","assistant",[{type:"text",text:"Done! I created the invoice and sent it to the client."}]),isLastMessage:!0,status:"ready",onRegenerate:s,siblingInfo:null})}),e.jsx(R,{title:"With branch navigation",children:e.jsx(P,{message:A("a3","assistant",[{type:"text",text:"Here's a summary of the tasks assigned to you this week."}]),isLastMessage:!0,status:"ready",onRegenerate:s,siblingInfo:{current:1,total:2},onNavigateSibling:Xe})}),e.jsx(R,{title:"Running tools (streaming)",children:e.jsx(P,{message:A("a4","assistant",[{type:"text",text:"Let me check your workspace."},{type:"step-start"},xs("tc1","query_tables",{})]),isLastMessage:!0,status:"streaming",onRegenerate:s,siblingInfo:null})}),e.jsx(R,{title:"Completed tools",children:e.jsx(P,{message:A("a5","assistant",[{type:"text",text:"I checked your data."},{type:"step-start"},I("tc2","query_tables",{},[{table_id:"tbl_1",table_name:"Tasks"}]),{type:"text",text:"Found 1 table: **Tasks**."}]),isLastMessage:!0,status:"ready",onRegenerate:s,siblingInfo:null})}),e.jsx(R,{title:"Generated PDF with artifact list",children:e.jsx(P,{message:A("a-pdf","assistant",[{type:"text",text:"I'll generate the invoice now."},{type:"step-start"},I("ts1","tool_search_regex",{pattern:"generate_pdf"},[{type:"tool_reference",toolName:"generate_pdf_from_html_template"}]),I("gen-pdf-1","generate_pdf_from_html_template",{document_template_id:"tmpl_001",filename:"invoice-march",data:{customer:"Acme Corp",amount:5e3}},{file_id:"file-pdf-1",filename:"invoice-march.pdf",url:"https://example.com/files/invoice-march.pdf",mime_type:"application/pdf"}),{type:"text",text:"Here's your invoice."}]),isLastMessage:!0,status:"ready",onRegenerate:s,siblingInfo:null,renderExtras:be})}),e.jsx(R,{title:"All file types (PDF + Excel + Word)",children:e.jsx(P,{message:A("a-all-files","assistant",[{type:"text",text:"Here are all the documents you requested."},{type:"step-start"},I("gen-pdf-2","generate_pdf_from_html_template",{document_template_id:"tmpl_001",filename:"invoice-february"},{file_id:"file-pdf-2",filename:"invoice-february.pdf",url:"https://example.com/files/invoice-february.pdf",mime_type:"application/pdf"}),I("gen-xlsx-1","generate_excel_from_template",{document_template_id:"tmpl_002",filename:"sales-metrics"},{file_id:"file-xlsx-1",filename:"sales-metrics.xlsx",url:"https://example.com/files/sales-metrics.xlsx",mime_type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}),I("gen-docx-1","generate_word_from_template",{document_template_id:"tmpl_003",filename:"contract-acme"},{file_id:"file-docx-1",filename:"contract-acme.docx",url:"https://example.com/files/contract-acme.docx",mime_type:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"})]),isLastMessage:!0,status:"ready",onRegenerate:s,siblingInfo:null,renderExtras:be})}
186),e.jsx(R,{title:"All template types (Word + Excel + PDF)",children:e.jsx(P,{message:A("a-all-templates","assistant",[{type:"text",text:"I created all three templates."},{type:"step-start"},I("ct-word","create_word_template",{name:"Contract",template_file_id:"tw1"},{id:"tmpl-word",name:"Contract Template",template_file_id:"tw1",current_version:1}),I("ct-excel","create_excel_template",{name:"Budget",template_file_id:"te1"},{id:"tmpl-excel",name:"Budget Template",template_file_id:"te1",current_version:1}),I("ct-pdf","create_pdf_template",{name:"Invoice",template_file_id:"tp1"},{id:"tmpl-pdf",name:"Invoice Template",template_file_id:"tp1",current_version:1})]),isLastMessage:!0,status:"ready",onRegenerate:s,siblingInfo:null,renderExtras:be})}),e.jsx(R,{title:"Mixed: files + templates + knowledge doc",children:e.jsx(P,{message:A("a-mixed","assistant",[{type:"text",text:"Everything is set up."},{type:"step-start"},I("gen-report","generate_excel_from_template",{document_template_id:"tmpl_002"},{file_id:"file-report",filename:"monthly-report.xlsx",url:"https://example.com/files/report.xlsx",mime_type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}),I("ct-contract","create_word_template",{name:"NDA",template_file_id:"f-nda"},{id:"tmpl-nda",name:"NDA Template",template_file_id:"f-nda",current_version:1}),I("ck-guide","create_knowledge_doc",{name:"Onboarding"},{id:"kd-onboard",name:"Onboarding Guide",description:"New hire guide",current_version:1}),I("gen-invoice","generate_pdf_from_html_template",{document_template_id:"tmpl_001"},{file_id:"file-inv",filename:"invoice-march.pdf",url:"https://example.com/files/invoice.pdf",mime_type:"application/pdf"})]),isLastMessage:!0,status:"ready",onRegenerate:s,siblingInfo:null,renderExtras:be})}),e.jsx(R,{title:"Failed tool",children:e.jsx(P,{message:A("a6","assistant",[{type:"text",text:"I tried updating the record."},{type:"step-start"},I("tc-ok","query_records",{table_id:"tbl_1",field_keys:["status"]},{records:[{id:"rec_1",data:{status:"Open"}}],total:1,has_more:!1}),fs("tc-fail","update_records",{table_id:"tbl_1",record_ids:["rec_1"],set:{status:"Done"}},"Cannot update status â field is locked."),{type:"text",text:"The status field is locked. You'll need to unlock it first."}]),isLastMessage:!0,status:"ready",onRegenerate:s,siblingInfo:null})}),e.jsx(R,{title:"Multi-step: query â create records â send email",children:e.jsx(P,{message:A("a-multi-step","assistant",[{type:"step-start"},I("ms1","tool_search_regex",{pattern:"query_records"},[{type:"tool_reference",toolName:"query_records"}]),I("ms2","query_records",{table_id:"tbl_orders",field_keys:["customer","total"]},{records:[{id:"rec_1",data:{customer:"Acme",total:5e3}},{id:"rec_2",data:{customer:"Globex",total:3200}}],total:2,has_more:!1}),{type:"text",text:"Found 2 orders. Creating invoices now."},{type:"step-start"},I("ms3","tool_search_regex",{pattern:"create_records"},[{type:"tool_reference",toolName:"create_records"}]),I("ms4","create_records",{table_id:"tbl_invoices",records:[{data:{customer:"Acme",amount:5e3}},{data:{customer:"Globex",amount:3200}}]},{record_ids:["rec_inv_1","rec_inv_2"]}),{type:"text",text:"Created 2 invoices. Sending email notifications."},{type:"step-start"},I("ms5","tool_search_regex",{pattern:"send_email"},[{type:"tool_reference",toolName:"send_email"}]),I("ms6","send_email",{to:"[email protected]",subject:"Invoice Ready"},{sent:!0}),I("ms7","send_email",{to:"[email protected]",subject:"Invoice Ready"},{sent:!0}),{type:"text",text:"Done! Created 2 invoices and sent email notifications to both customers."}]),isLastMessage:!0,status:"ready",onRegenerate:s,siblingInfo:null})}),e.jsx(ee,{size:24}),e.jsx(L,{size:"lg",weight:"semibold",children:"Breaking error"}),e.jsx(ee,{size:8}),e.jsx(R,{title:"Inline on the last assistant message (partial response)",children:e.jsx(P,{message:A("a-err","assistant",[{type:"text",text:"I started looking into that, but the connection dropped partway through."}]),isLastMessage:!0,status:"error",onRegenerate:s,siblingInfo:null,error:"Connection lost. Check your internet and try again.",onRetry:r})}),e.jsx(R,{title:"Standalone row (no assistant message to host it)",children:e.jsx(Qe,{parts:[],state:"error",error:"No response received. Try again.",onRetry:r})}),e.jsxs(R,{title:"Empty assistant message + standalone row (pre-stream failure)",children:[e.jsx(P,{message:A("a-empty","assistant",[]),isLastMessage:!0,status:"error",onRegenerate:s,siblingInfo:null}),e.jsx(Qe,{parts:[],state:"error",error:"The AI service is unavailable right now. This has been reported to the team â please try again later.",onRetry:r})]})]})})});function R({title:n,children:s}){return e.jsxs(X,{className:S.card,children:[e.jsx(L,{size:"sm",weight:"medium",children:n}),e.jsx(q,{className:S.preview,children:s})]})}const Oe=Tt(null);
186function De(n){const s=Vn(Oe,n),c=Gn(Oe,n.styleId??null,{...Un});return{properties:n,unknownProperties:[],resolvedProperties:s,resolvedBaseRun:c,numberingLabel:null}}function ks(){const{doc:n,paragraph:s,table:c,table_row:r,table_cell:y,hard_break:h}=W.nodes,x=W.nodes.table_header,b=W.nodes.bookmark_start,B=W.nodes.bookmark_end,t=(f,...D)=>W.text(f,D.map(Z=>typeof Z=="string"?W.marks[Z].create():W.marks[Z.name].create(Z.attrs))),l=(f,D)=>s.create(f,D),g=f=>De({...Be,styleId:f}),v=()=>De({...Be}),m=f=>De({...Be,...f}),j=f=>({name:"color",attrs:{value:f}}),G=f=>({name:"highlight",attrs:{value:f}}),H=f=>({name:"font",attrs:{ascii:f,hAnsi:f,eastAsia:null,complexScript:null}}),$=f=>({name:"size",attrs:{halfPoints:f*2}}),Q=f=>({name:"link",attrs:{anchor:f,relationshipId:null}}),p=(f,...D)=>y.create({},[s.create({},[t(f,...D)])]),T=f=>x.create({},[s.create({},[t(f,"bold")])]),d=(f,...D)=>l(m({numbering:{numId:1,ilvl:f}}),D),O=(f,...D)=>l(m({numbering:{numId:2,ilvl:f}}),D),E=(...f)=>l(v(),f),k="Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.";return n.create({},[l(m({styleId:"Title",alignment:"center"}),[t("DOCX Editor Showcase")]),l(m({styleId:"Subtitle",alignment:"center"}),[t("A pagination test and full feature reference")]),l(m({alignment:"center"}),[t("packages/docx","italic",j("#5f6368"))]),l(m({alignment:"center"}),[t("Phase 1 read-only renderer + Phase 2 editing primitives",j("#5f6368"))]),l(m({styleId:"Heading1",pageBreakBefore:!0}),[t("1. Introduction")]),l(m({alignment:"both"}),[t("This document exercises every node, mark, and paragraph property the editor currently understands. "),t("Open the toolbar above","bold"),t(" to interact, or scroll through and treat it as a visual regression target â it should span multiple pages, with content distributed across them and never bleeding into headers, footers, or page margins.")]),l(g("Heading2"),[t("1.1 Document model")]),E(t("The document tree is held as a ProseMirror node graph that mirrors OOXML structure. Paragraphs carry typed properties â alignment, indentation, spacing, numbering, page-break-before, keep-with-next â and a resolved style cascade. Runs carry boolean and value marks: "),t("bold","bold"),t(", "),t("italic","italic"),t(", "),t("underline","underline"),t(", "),t("strike","strike"),t(", color, highlight, font family, font size, super/subscript, and small caps.")),l(g("Heading2"),[t("1.2 Roundtrip safety")]),E(t("Anything the parser does not yet understand is captured into opaque pass-through nodes whose XML survives serialization byte-for-byte. The serializer rewrites only the parts the editor touched; unrelated XML parts are copied verbatim from the original .docx. The result: open, save, reopen â the same file.")),l(m({styleId:"Heading1",pageBreakBefore:!0}),[t("2. Inline formatting")]),l(g("Heading2"),[t("2.1 Toggle marks")]),E(t("Inline marks compose freely. "),t("Bold","bold"),t(", "),t("italic","italic"),t(", "),t("underlined","underline"),t(", "),t("strikethrough","strike"),t(", "),t("bold italic","bold","italic"),t(", "),t("bold italic underline","bold","italic","underline"),t(". Special toggles: "),t("ALL CAPS","caps"),t(", "),t("Small Caps","smallCaps"),t(", "),t("doubly struck","doubleStrike"),t(".")),l(g("Heading2"),[t("2.2 Color and highlight")]),E(t("Color: "),t("red",j("#cc0000")),t(", "),t("green",j("#188038")),t(", "),t("blue",j("#1a73e8")),t(", "),t("orange",j("#e8710a")),t(", "),t("purple",j("#8430ce")),t(". Highlight: "),t(" yellow ",G("#fff475")),t(" "),t(" cyan ",G("#a7ffeb")),t(" "),t(" pink ",G("#fad2cf")),t(". Combined: "),t(" warning callout ","bold",j("#a50e0e"),G("#fce8e6")),t(".")),l(g("Heading2"),[t("2.3 Superscript and subscript")]),E(t("Einstein: E = mc"),t("2","superscript"),t(". Water: H"),t("2","subscript"),t("O. Footnote-style"),t("1","superscript"),t(" reference. Avogadro's number: 6.022 Ã 10"),t("23","superscript"),t(" mol"),t("-1","superscript"),t(".")),l(g("Heading2"),[t("2.4 Typography")]),E(t("Family: "),t("C
186alibri sample",H("Calibri")),t(", "),t("Times New Roman sample",H("Times New Roman")),t(", "),t("Courier New sample",H("Courier New")),t(", "),t("Georgia sample",H("Georgia")),t(".")),E(t("Size: "),t("8pt",$(8)),t(" · "),t("10pt",$(10)),t(" · "),t("12pt",$(12)),t(" · "),t("14pt",$(14)),t(" · "),t("18pt",$(18)),t(" · "),t("24pt",$(24)),t(" · "),t("36pt",$(36)),t(".")),l(g("Heading2"),[t("2.5 Hyperlinks and bookmarks")]),E(t("Jump back to "),t("the cover",Q("doc-top")),t(" or down to "),t("the pagination test",Q("pagination-test")),t(". Internal anchors are stored as bookmarks resolved at serialize time.")),l(m({styleId:"Heading1",pageBreakBefore:!0}),[t("3. Paragraph styling")]),l(g("Heading2"),[t("3.1 Alignment")]),l(m({alignment:"left"}),[t("Left-aligned. "),t(k)]),l(m({alignment:"center"}),[t("Centered. Short sample on a single line.")]),l(m({alignment:"right"}),[t("Right-aligned. Short sample on a single line.")]),l(m({alignment:"both"}),[t("Justified. "),t(k),t(" "),t(k)]),l(g("Heading2"),[t("3.2 Indentation")]),l(m({indent:{left:720,right:null,firstLine:null,hanging:null}}),[t("Left indent 0.5â³. "),t(k)]),l(m({indent:{left:1440,right:1440,firstLine:null,hanging:null},alignment:"both"}),[t("Both 1â³ â a quote-like block without using Quote style. "),t(k)]),l(m({indent:{left:null,right:null,firstLine:720,hanging:null}}),[t("First-line indent 0.5â³. "),t(k)]),l(g("Heading2"),[t("3.3 Quote and code")]),l(g("Quote"),[t("âA document is a tree of typed properties, not a bag of strings â and pagination is layout, not decoration.â")]),l(g("Code"),[t("const view = createEditableView(host, doc, { fontRegistry, sections });")]),l(g("Code"),[t("view.pagination.getPageCount();")]),l(m({styleId:"Heading1",pageBreakBefore:!0}),[t("4. Lists")]),l(g("Heading2"),[t("4.1 Bulleted (3 levels)")]),d(0,t("Top-level item â context and goals.")),d(1,t("Second level â supporting detail under the parent.")),d(2,t("Third level â concrete examples.")),d(2,t("Third level â more examples.")),d(1,t("Second level â another supporting detail.")),d(0,t("Top-level item â next major point.")),d(0,t("Top-level item â final point.")),l(g("Heading2"),[t("4.2 Numbered (2 levels)")]),O(0,t("Open the document in the editor.")),O(1,t("Verify the toolbar renders and is interactive.")),O(1,t("Apply marks via the toolbar and confirm they persist.")),O(0,t("Save the document.")),O(1,t("Re-open the saved file in Word and Google Docs.")),O(0,t("Confirm the visual diff is within tolerance.")),l(g("Heading2"),[t("4.3 Mixed content in a list item")]),d(0,t("Item with "),t("inline emphasis","bold"),t(" and "),t("colored",j("#1a73e8")),t(" runs in the same paragraph.")),d(0,t("Item with a hard break"),h.create(),t("that wraps to a new line without leaving the list.")),l(m({styleId:"Heading1",pageBreakBefore:!0}),[t("5. Tables")]),l(g("Heading2"),[t("5.1 Quarterly metrics")]),E(t("Cells inherit the body font and respect inline marks. Borders come from the default TableGrid style.")),c.create({},[r.create({},[T("Region"),T("Q1"),T("Q2"),T("Q3"),T("Q4"),T("Total")]),r.create({},[p("North"),p("125"),p("142"),p("168"),p("184"),p("619","bold")]),r.create({},[p("South"),p("89"),p("103"),p("117"),p("132"),p("441","bold")]),r.create({},[p("East"),p("210"),p("228"),p("244"),p("261"),p("943","bold")]),r.create({},[p("West"),p("167"),p("182"),p("199"),p("215"),p("763","bold")])]),l(g("Heading2"),[t("5.2 Pricing matrix")]),c.create({},[r.create({},[T("Tier"),T("Seats"),T("Storage"),T("Monthly"),T("Annual")]),r.create({},[p("Free"),p("â"),p("1 GB"),p("0â«"),p("0â«")]),r.create({},[p("Pro"),p("1"),p("10 GB"),p("425.000â«"),p("4.300.000â«")]),r.create({},[p("Team"),p("10"),p("100 GB"),p("1.700.000â«"),p("17.300.000â«")]),r.create({},[p("Business"),p("â"),p("1 TB"),p("6.375.000â«"),p("65.000.000â«")])]),l(m({styleId:"Heading1",pageBreakBefore:!0}),[t("6. Template markers")]),E(t("Substitution markers are highlighted in the read pass. Variables, loops, and conditionals are recognized syntactically; they are not evaluated in this read-only preview.")),l(g("Heading2"),[t("6.1 Variables")]),E(t("Hello {{customer_name}}! Your order #{{order_id}} ships on {{ship_date}}.")),E(t("Invoice total: {{currency}}{{amount_total}} (tax {{currency}}{{amount_tax}}).")),l(g("Heading2"),[t("6.2 Loop region")]),E(t("Line items: {{FOR item IN items}}{{$item.name}} Ã{{$item.qty}} @ {{$item.price}}; {{END-FOR items}}")),l(g("Heading2"),[t("6.3 Conditional region")]),E(t("Footer text: {{IF show_terms}}Terms and conditions apply. {{END-IF show_terms}}{{IF show_disclaimer}}This document is automatically generated.{{END-IF show_disclaimer}}")),l(m({styleId:"Heading1",pageBreakBefore:!0}),[b.create({bookmarkId:"bm-pagination",name:"pagination-test"}),t("7. Long-form pagination test"),B.create({bookmarkId:"bm-pagination"})]),E(t("The remaining paragraphs deliberately push past the first page boundary so that page break behavior, header/footer repetition (when wired up), widow/orphan rules, and the page counter in the status bar can all be observed. Each paragraph below is full-width Lorem ipsum.")),l(g("Heading2"),[t("7.
1861 Body run #1")]),l(m({alignment:"both"}),[t(k),t(" "),t(k)]),l(m({alignment:"both"}),[t(k),t(" "),t(k)]),l(g("Heading3"),[t("Sub-section 7.1.1")]),l(m({alignment:"both"}),[t(k),t(" "),t(k)]),l(g("Heading3"),[t("Sub-section 7.1.2")]),l(m({alignment:"both"}),[t(k)]),l(g("Heading2"),[t("7.2 Body run #2")]),l(m({alignment:"both"}),[t(k),t(" "),t(k)]),l(m({alignment:"both"}),[t(k),t(" "),t(k)]),l(m({alignment:"both"}),[t(k)]),l(g("Heading2"),[t("7.3 Body run #3")]),l(m({alignment:"both"}),[t(k),t(" "),t(k)]),l(m({alignment:"both"}),[t(k)]),l(m({alignment:"both",spacing:{before:240,after:240,line:null,lineRule:null}}),[t("End of showcase â "),t("save the file","bold"),t(" and re-open in Word to verify the roundtrip.")])])}const Cs=At({embeddedFonts:[],workspaceFonts:[]}),js=[{properties:{...On},blockStartIndex:0,blockEndIndex:0}],ja=le(function(){const s=i.useRef(null),c=i.useRef(null),r=i.useRef(null),y=i.useRef(null),h=i.useRef(null),[x,b]=i.useState(null),[B,t]=i.useState(null),[l,g]=i.useState(1),[v,m]=i.useState(!1),[j,G]=i.useState(""),[H,$]=i.useState(""),[Q,p]=i.useState(!1),[T,d]=i.useState(!1),[O,E]=i.useState(!1),[k,f]=i.useState(!1),[D,Z]=i.useState(!1),[ve,_e]=i.useState([]),[we,K]=i.useState(null),[re,_]=i.useState(!1),[z,Se]=i.useState(1),de=i.useCallback(()=>{if(!s.current)return;s.current.innerHTML="";const o=Et();h.current=o;const u=Ft(s.current,ks(),{fontRegistry:Cs,sections:js,imageRegistry:o,numberingTable:Hn,onPageCountChange:Se});b({view:u}),t(null)},[]);i.useEffect(()=>(de(),()=>{}),[de]),i.useEffect(()=>()=>{x?.view.destroy()},[x]);const Ie=i.useCallback(async o=>{const u=o.target.files?.[0];if(!u||!s.current)return;const M=await u.arrayBuffer(),J=new Uint8Array(M);x?.view.destroy(),s.current.innerHTML="";try{const V=await Bt(s.current,J,{mode:"editable"});b({view:V.view,originalParts:V.document.parts,originalDocumentAttrs:V.document.documentAttrs}),t(null)}catch(V){t(V instanceof Error?V.message:String(V))}o.target.value=""},[x]),Re=i.useCallback(async()=>{if(!x)return;const o=x.view,u=o.editorView?.state.doc;if(!u)return;const M=new Map(x.originalParts??new Map),J=o.commitHeaderFooterEdits?o.commitHeaderFooterEdits(M):M,V=Lt(u,{parts:J,documentAttrs:x.originalDocumentAttrs??{"@_xmlns:w":"http://schemas.openxmlformats.org/wordprocessingml/2006/main","@_xmlns:r":"http://schemas.openxmlformats.org/officeDocument/2006/relationships"}}),Ae=await Mt(V),Ee=new Blob([Ae.buffer],{type:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"}),me=URL.createObjectURL(Ee),ae=document.createElement("a");ae.href=me,ae.download="docx-editor-demo.docx",ae.click(),URL.revokeObjectURL(me)},[x]),a=x?.view?.editorView,N={styleTable:Oe},C=i.useCallback(o=>{a&&(o(a.state,a.dispatch),a.focus())},[a]),Te=i.useCallback(()=>{if(!a)return;const{state:o}=a,u=o.tr.setSelection(Ze.create(o.doc,1,o.doc.content.size-1));a.dispatch(u),a.focus()},[a]);i.useEffect(()=>{x?.view?.setZoom?.(l)},[x,l]);const gt=i.useCallback(()=>{a&&(y.current=Dt(a.state),f(!0))},[a]),ht=i.useCallback(()=>{if(!a||!y.current)return;const o=Pt(a.state,y.current);o&&a.dispatch(o),f(!1),y.current=null,a.focus()},[a]),Ue=i.useCallback((o,u)=>{if(a){if(o.length===0){Fe(a);return}zt(a,o,{replace:u,caseSensitive:Q,wholeWord:T,regexp:O})}},[a,Q,T,O]);i.useEffect(()=>{v&&Ue(j,H)},[v,j,H,Ue]);const ft=i.useCallback(()=>{a&&(ge.findNext(a.state,a.dispatch),a.focus())},[a]),xt=i.useCallback(()=>{a&&(ge.findPrev(a.state,a.dispatch),a.focus())},[a]),bt=i.useCallback(()=>{a&&(ge.replaceNext(a.state,a.dispatch),a.focus())},[a]),yt=i.useCallback(()=>{a&&(ge.replaceAll(a.state,a.dispatch),a.focus())},[a]);i.useEffect(()=>{const o=u=>{(u.ctrlKey||u.metaKey)&&u.key.toLowerCase()==="f"&&(u.preventDefault(),m(!0)),u.key==="Escape"&&v&&(m(!1),a&&Fe(a))};return window.addEventListener("keydown",o),()=>window.removeEventListener("keydown",o)},[v,a]),i.useEffect(()=>{if(!a)return;const o=()=>_e(zn(a.state.doc));o();const u=new MutationObserver(o);return u.observe(a.dom,{subtree:!0,childList:!0,characterData:!0}),()=>u.disconnect()},[a]);const kt=i.useCallback(o=>
186{if(!a)return;const u=a.state.tr.setSelection(Ze.create(a.state.doc,o.pos+1));a.dispatch(u),a.focus(),a.nodeDOM(o.pos)?.scrollIntoView({behavior:"smooth",block:"start"})},[a]);i.useEffect(()=>{if(!a)return;const o=M=>{M.preventDefault();const J=Nn(a.state);K({x:M.clientX,y:M.clientY,inTable:J})},u=a.dom;return u.addEventListener("contextmenu",o),()=>u.removeEventListener("contextmenu",o)},[a]);const U=i.useCallback(()=>K(null),[]),Y=i.useCallback(o=>()=>{a&&(o(a.state,a.dispatch),a.focus(),U())},[a,U]),Ct=i.useCallback(()=>{document.execCommand("cut"),U()},[U]),jt=i.useCallback(()=>{document.execCommand("copy"),U()},[U]),qe=i.useCallback(async()=>{if(a){try{const o=await navigator.clipboard.readText(),u=a.state.tr.insertText(o);a.dispatch(u)}catch(o){t(o instanceof Error?`Paste failed: ${o.message}`:"Paste failed (clipboard unavailable)")}U()}},[a,U]),vt=qe,_t=i.useCallback(async o=>{const u=o.target.files?.[0];if(o.target.value="",!u)return;if(!a){t("Editor not ready â image upload aborted.");return}const M=h.current;if(!M){t("Image registry unavailable.");return}let J;try{J=await u.arrayBuffer()}catch(ae){t(ae instanceof Error?`Image read failed: ${ae.message}`:"Image read failed");return}const V=Nt(u.type),{relationshipId:Ae}=M.registerInsertedImage({bytes:new Uint8Array(J),mimeType:u.type,extension:V}),Ee=W.nodes.image_inline.create({relationshipId:Ae,widthEmu:null,heightEmu:null,alt:u.name||"",originalXml:null}),me=a.state.tr.replaceSelectionWith(Ee,!1);a.dispatch(me),a.focus()},[a]);return e.jsxs("div",{style:Ms,"data-testid":"docx-showcase",children:[e.jsxs("div",{style:Ds,children:[e.jsx(w,{testId:"docx-load-docx",title:"Open .docx",icon:Ht,onClick:()=>c.current?.click()}),e.jsx(w,{testId:"docx-reset-demo",title:"Reset demo",icon:Ot,onClick:de}),e.jsx(w,{testId:"docx-save",title:"Save .docx",icon:Wt,onClick:Re,disabled:!a}),e.jsx(te,{}),e.jsx(w,{testId:"docx-undo",title:"Undo (âZ)",icon:$t,onClick:()=>C(Vt),disabled:!a}),e.jsx(w,{testId:"docx-redo",title:"Redo (ââ§Z)",icon:Gt,onClick:()=>C(Ut),disabled:!a}),e.jsx(w,{testId:"docx-format-painter",title:k?"Click selection to paint":"Format painter",icon:ce,active:k,onClick:()=>k?ht():gt(),disabled:!a}),e.jsx(te,{}),e.jsxs("select",{style:Ps,"data-testid":"docx-style-select",defaultValue:"",onChange:o=>{const u=o.target.value;u.startsWith("Heading")?C(qt(parseInt(u.slice(7),10),N)):(u==="Normal"||u==="Title"||u==="Subtitle"||u==="Quote"||u==="Code")&&C(Yt(u,N)),o.target.value=""},disabled:!a,children:[e.jsx("option",{value:"",disabled:!0,children:"Styles"}),e.jsx("option",{value:"Normal",children:"Normal"}),e.jsx("option",{value:"Title",children:"Title"}),e.jsx("option",{value:"Subtitle",children:"Subtitle"}),e.jsx("option",{value:"Heading1",children:"Heading 1"}),e.jsx("option",{value:"Heading2",children:"Heading 2"}),e.jsx("option",{value:"Heading3",children:"Heading 3"}),e.jsx("option",{value:"Heading4",children:"Heading 4"}),e.jsx("option",{value:"Quote",children:"Quote"}),e.jsx("option",{value:"Code",children:"Code"})]}),e.jsx(ws,{onSelect:o=>C(Qt(o)),disabled:!a}),e.jsx(Ss,{onSelect:o=>C(Zt(o)),disabled:!a}),e.jsx(te,{}),e.jsx(w,{testId:"docx-bold",title:"Bold (âB)",icon:Jt,onClick:()=>C(he(W.marks.bold)),disabled:!a}),e.jsx(w,{testId:"docx-italic",title:"Italic (âI)",icon:Xt,onClick:()=>C(he(W.marks.italic)),disabled:!a}),e.jsx(w,{testId:"docx-underline",title:"Underline (âU)",icon:Kt,onClick:()=>C(he(W.marks.underline)),disabled:!a}),e.jsx(w,{testId:"docx-strike",title:"Strikethrough",icon:en,onClick:()=>C(he(W.marks.strike)),disabled:!a}),e.jsx(Ke,{icon:tn,title:"Text color",testId:"docx-text-color",defaultColor:"#1a73e8",onSelect:o=>C(nn(o)),disabled:!a}),e.jsx(Ke,{icon:sn,title:"Highlight color",testId:"docx-highlight",defaultColor:"#ffeb3b",onSelect:o=>C(an(o)),disabled:!a}),e.jsx(te,{}),e.jsx(w,{testId:"docx-align-left",title:"Align left",icon:on,onClick:()=>C(fe("left",N)),disabled:!a}),e.jsx(w,{testId:"docx-align-center",title:"Align center",icon:ln,onClick:()=>C(fe("center",N)),disabled:!a}),e.jsx(w,{testId:"docx-align-right",title:"Align right",icon:rn,onClick:()=>C(fe("right",N)),disabled:!a}),e.jsx(w,{testId:"docx-align-justify",title:"Justify",icon:dn,onClick:()=>C(fe("both",N)),disabled:!a}),e.jsx(te,{}),e.jsx(w,{testId:"docx-bullet",title:"Bulleted list",icon:cn,onClick:()=>C(un(N)),disabled:!a}),e.jsx(w,{testId:"docx-numbered",title:"Numbered list",icon:pn,onClick:()=>C(mn(N)),disabled:!a}),e.jsx(w,{testId:"docx-indent-decrease",title:"Decrease indent",icon:gn,onClick:()=>C(hn(N)),disabled:!a}),e.jsx(w,{testId:"docx-indent-increase",title:"Increase indent",icon:fn,onClick:()=>C(xn(N)),disabled:!a}
186),e.jsxs("select",{style:se,"data-testid":"docx-line-spacing",defaultValue:"",onChange:o=>{const u=parseFloat(o.target.value);Number.isNaN(u)||C(bn(u,N)),o.target.value=""},disabled:!a,title:"Line spacing",children:[e.jsx("option",{value:"",disabled:!0,children:"1.15"}),e.jsx("option",{value:"1",children:"1.0"}),e.jsx("option",{value:"1.15",children:"1.15"}),e.jsx("option",{value:"1.5",children:"1.5"}),e.jsx("option",{value:"2",children:"2.0"})]}),e.jsx(te,{}),e.jsx(w,{testId:"docx-outline-toggle",title:"Document outline",icon:yn,active:D,onClick:()=>Z(o=>!o),disabled:!a}),e.jsx(Ts,{onInsertTable:()=>C(jn(3,3)),onInsertImage:()=>r.current?.click(),onInsertLink:()=>{if(!a)return;const o=prompt(`Bookmark anchor (without #) 187 188External URLs are not yet supported.`);if(!o)return;const u=o.trim().replace(/^#/,"");if(u.length===0)return;Je(`#${u}`)(a.state,a.dispatch)||t("Failed to insert link"),a.focus()},onInsertPageBreak:()=>C(Cn()),onInsertHr:()=>C(kn()),disabled:!a}),e.jsx(w,{testId:"docx-page-setup",title:"Page setup",icon:vn,active:re,onClick:()=>_(o=>!o),disabled:!a}),e.jsx(w,{testId:"docx-find",title:"Find & Replace (âF)",icon:_n,active:v,onClick:()=>m(o=>!o),disabled:!a}),e.jsxs("select",{style:se,"data-testid":"docx-zoom",value:String(l),onChange:o=>g(parseFloat(o.target.value)),disabled:!a,title:"Zoom",children:[e.jsx("option",{value:"0.5",children:"50%"}),e.jsx("option",{value:"0.75",children:"75%"}),e.jsx("option",{value:"1",children:"100%"}),e.jsx("option",{value:"1.25",children:"125%"}),e.jsx("option",{value:"1.5",children:"150%"}),e.jsx("option",{value:"2",children:"200%"})]}),e.jsx(te,{}),e.jsx(w,{testId:"docx-select-all",title:"Select all",icon:wn,onClick:Te,disabled:!a}),e.jsx("input",{ref:c,type:"file",accept:".docx",onChange:Ie,style:ot}),e.jsx("input",{ref:r,type:"file",accept:"image/png,image/jpeg,image/gif,image/webp",onChange:_t,style:ot})]}),v&&e.jsxs("div",{style:Us,"data-testid":"docx-search-bar",children:[e.jsx("input",{placeholder:"Find",value:j,onChange:o=>G(o.target.value),style:nt,"data-testid":"docx-search-input",autoFocus:!0}),e.jsx("input",{placeholder:"Replace",value:H,onChange:o=>$(o.target.value),style:nt,"data-testid":"docx-replace-input"}),e.jsxs("label",{style:Pe,title:"Match case",children:[e.jsx("input",{type:"checkbox",checked:Q,onChange:o=>p(o.target.checked)}),"Aa"]}),e.jsxs("label",{style:Pe,title:"Whole word",children:[e.jsx("input",{type:"checkbox",checked:T,onChange:o=>d(o.target.checked)}),"ab"]}),e.jsxs("label",{style:Pe,title:"Regex",children:[e.jsx("input",{type:"checkbox",checked:O,onChange:o=>E(o.target.checked)}),".*"]}),e.jsx("button",{style:ne,onClick:xt,title:"Previous (â§âG)",children:"â"}),e.jsx("button",{style:ne,onClick:ft,title:"Next (âG)",children:"â"}),e.jsx("button",{style:ne,onClick:bt,title:"Replace",children:"Replace"}),e.jsx("button",{style:ne,onClick:yt,title:"Replace all",children:"Replace all"}),e.jsx("button",{style:ne,onClick:()=>{m(!1),a&&Fe(a)},title:"Close (Esc)",children:"â"})]}),B&&e.jsxs("div",{style:da,"data-testid":"docx-error",children:["Failed to load: ",B]}),e.jsxs("div",{style:Js,children:[D&&e.jsx(Bs,{entries:ve,onJump:kt}),e.jsx("div",{style:Xs,children:e.jsx("div",{ref:s,style:Ks,"data-testid":"docx-host"})})]}),e.jsx(Ls,{editorView:a,pageCount:z,zoom:l,onZoomChange:g}),re&&a&&e.jsx(Es,{onClose:()=>_(!1),onApply:(o,u,M)=>{C(Sn(o)),C(In(u)),C(Rn(M)),_(!1)}}),e.jsx(Fs,{state:we,onClose:U,onCut:Ct,onCopy:jt,onPaste:qe,onPasteMatchStyle:vt,onTable:{addRowBefore:Y(Pn),addRowAfter:Y(Dn),addColumnBefore:Y(Mn),addColumnAfter:Y(Ln),deleteRow:Y(Bn),deleteColumn:Y(Fn),mergeCells:Y(En),splitCell:Y(An),deleteTable:Y(Tn)},onInsertLink:()=>{if(U(),!a)return;const o=prompt(`Bookmark anchor (without #) 189 190External URLs are not yet supported.`);if(!o)return;const u=o.trim().replace(/^#/,"");if(u.length===0)return;Je(`#${u}`)(a.state,a.dispatch)||t("Failed to insert link")}})]})});function w(n){const s=n.icon;return e.jsx("button",{type:"button","data-testid":n.testId,title:n.title,"aria-label":n.title,onClick:n.onClick,disabled:n.disabled,style:{...je,backgroundColor:n.active?"#e8f0fe":"transparent",color:n.disabled?"#bdc1c6":n.active?"#1a73e8":"#3c4043",cursor:n.disabled?"default":"pointer"},onMouseEnter:c=>{!n.disabled&&!n.active&&(c.currentTarget.style.backgroundColor="#f1f3f4")},onMouseLeave:c=>{n.active||(c.currentTarget.style.backgroundColor="transparent")},children:e.jsx(s,{size:16,strokeWidth:2})})}function te(){return e.jsx("span",{style:qs,"aria-hidden":"true"})}const vs=["Arial","Calibri","Calibri Light","Cambria","Carlito","Caladea","Consolas","Courier New","Georgia","Helvetica","Lato","Liberation Sans","Liberation Serif","Open Sans","Roboto","Times New Roman","Verdana"],_s=[8,9,10,11,12,14,16,18,20,24,28,3
1906,48,72];function ws(n){const[s,c]=i.useState(!1),[r,y]=i.useState("Calibri");return e.jsxs("div",{style:Ve,children:[e.jsxs("button",{type:"button",style:Ns,onClick:()=>c(h=>!h),disabled:n.disabled,title:"Font","data-testid":"docx-font-picker",children:[e.jsx("span",{style:{fontFamily:`"${r}"`,flex:1,textAlign:"left"},children:r}),e.jsx($e,{size:14})]}),s&&e.jsx("div",{style:Ge,role:"listbox",children:vs.map(h=>e.jsx("button",{type:"button",style:{...mt,fontFamily:`"${h}"`,fontWeight:h===r?600:400},onClick:()=>{y(h),c(!1),n.onSelect(h)},children:h},h))})]})}function Ss(n){const[s,c]=i.useState(11);return e.jsx("select",{style:zs,"data-testid":"docx-size-picker",value:String(s),onChange:r=>{const y=parseInt(r.target.value,10);Number.isNaN(y)||(c(y),n.onSelect(y))},disabled:n.disabled,title:"Font size",children:_s.map(r=>e.jsx("option",{value:r,children:r},r))})}const Is=["#000000","#434343","#666666","#999999","#b7b7b7","#cccccc","#d9d9d9","#efefef","#f3f3f3","#ffffff"],Rs=["#980000","#ff0000","#ff9900","#ffff00","#00ff00","#00ffff","#4a86e8","#0000ff","#9900ff","#ff00ff","#e6b8af","#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#c9daf8","#cfe2f3","#d9d2e9","#ead1dc","#dd7e6b","#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#a4c2f4","#9fc5e8","#b4a7d6","#d5a6bd","#cc4125","#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6d9eeb","#6fa8dc","#8e7cc3","#c27ba0"];function Ke(n){const[s,c]=i.useState(!1),[r,y]=i.useState(n.defaultColor),h=n.icon,x=b=>{b&&y(b),n.onSelect(b),c(!1)};return e.jsxs("div",{style:Ve,children:[e.jsxs("div",{style:Hs,children:[e.jsxs("button",{type:"button",style:{...je,color:n.disabled?"#bdc1c6":"#3c4043",position:"relative",paddingBottom:2},onClick:()=>x(r),disabled:n.disabled,title:`${n.title} (last: ${r})`,"data-testid":n.testId,children:[e.jsx(h,{size:16,strokeWidth:2}),e.jsx("span",{style:{position:"absolute",left:6,right:6,bottom:4,height:3,background:r,borderRadius:1}})]}),e.jsx("button",{type:"button",style:{...je,width:16,color:n.disabled?"#bdc1c6":"#3c4043"},onClick:()=>c(b=>!b),disabled:n.disabled,title:`${n.title} options`,"data-testid":`${n.testId}-open`,children:e.jsx($e,{size:12})})]}),s&&e.jsxs("div",{style:Os,role:"dialog",children:[e.jsx("div",{style:Ws,children:Is.map(b=>e.jsx("button",{type:"button",style:{...tt,background:b},onClick:()=>x(b),title:b},b))}),e.jsx("div",{style:$s,children:Rs.map(b=>e.jsx("button",{type:"button",style:{...tt,background:b},onClick:()=>x(b),title:b},b))}),e.jsxs("div",{style:Vs,children:[e.jsx("button",{type:"button",style:Gs,onClick:()=>x(null),children:"Reset"}),e.jsx("input",{type:"color",defaultValue:r,onChange:b=>x(b.target.value),style:{width:32,height:24},title:"Custom color"})]})]})]})}function Ts(n){const[s,c]=i.useState(!1);return e.jsxs("div",{style:Ve,children:[e.jsxs("button",{type:"button",style:{...je,width:56,gap:2,color:n.disabled?"#bdc1c6":"#3c4043"},onClick:()=>c(r=>!r),disabled:n.disabled,title:"Insert","data-testid":"docx-insert-menu",children:[e.jsx(ie,{size:16,strokeWidth:2}),e.jsx($e,{size:12})]}),s&&e.jsxs("div",{style:Ge,role:"menu",children:[e.jsx(F,{icon:He,label:"Table",onClick:()=>{c(!1),n.onInsertTable()}}),e.jsx(F,{icon:ut,label:"Link",onClick:()=>{c(!1),n.onInsertLink()}}),e.jsx(F,{icon:Wn,label:"Image",onClick:()=>{c(!1),n.onInsertImage()}}),e.jsx(F,{icon:$n,label:"Page break",onClick:()=>{c(!1),n.onInsertPageBreak()}}),e.jsx(F,{icon:ue,label:"Horizontal rule",onClick:()=>{c(!1),n.onInsertHr()}})]})]})}function F(n){const s=n.icon;return e.jsxs("button",{type:"button",style:{...mt,display:"flex",alignItems:"center",gap:10,color:n.disabled?"#bdc1c6":"#3c4043",cursor:n.disabled?"default":"pointer"},onClick:n.onClick,disabled:n.disabled,children:[e.jsx(s,{size:16,strokeWidth:2}),e.jsx("span",{children:n.label})]})}const et={Letter:{width:12240,height:15840},Legal:{width:12240,height:20160},A4:{width:11906,height:16838},A5:{width:8419,height:11906}},As=1440,ye=n=>Math.round(n*As);function Es(n){const[s,c]=i.useState("Letter"),[r,y]=i.useState("portrait"),[h,x]=i.useState(1),[b,B]=i.useState(1),[t,l]=i.useState(1),[g,v]=i.useState(1),m=()=>{const j=et[s],G=r==="portrait"?j.width:j.height,H=r==="portrait"?j.height:j.width;n.onApply({width:G,height:H,orientation:r},{top:ye(h),right:ye(b),bottom:ye(t),left:ye(g),header:720,footer:720,gutter:0},r)};return e.jsxs(e.Fragment,{children:[e.jsx("div",{style:oa,onClick:n.onClose}),e.jsxs("div",{style:ia,role:"dialog","data-testid":"docx-page-setup-dialog",children:[e.jsx("h3",{style:{margin:"0 0 12px",fontSize:16,color:"#3c4043"},children:"Page setup"}),e.jsxs("label",{style:it,children:["Page size",e.jsx("select",{value:s,onChange:j=>c(j.target.value),style:se,children:Object.keys(et).map(j=>e.jsx("option",{value:j,children:j},j))})]}),e.jsxs("label",{style:it,children:["Orientation",e.jsxs("select",{value:r,onChange:j=>y(j.target.value),style:se,children:[e.jsx("option",{value:"portrait",children:"Portrait"}),e.jsx("option",{value:"landscape",children:"Landscape"})]})]}),e.jsx("div",{style:{marginTop:8,fontSize:13,color:"#5f6368"}
190,children:"Margins (inches)"}),e.jsxs("div",{style:la,children:[e.jsx(ke,{label:"Top",value:h,onChange:x}),e.jsx(ke,{label:"Right",value:b,onChange:B}),e.jsx(ke,{label:"Bottom",value:t,onChange:l}),e.jsx(ke,{label:"Left",value:g,onChange:v})]}),e.jsxs("div",{style:ra,children:[e.jsx("button",{type:"button",style:{...ne,padding:"6px 14px"},onClick:n.onClose,children:"Cancel"}),e.jsx("button",{type:"button",style:{...ne,padding:"6px 14px",background:"#1a73e8",color:"#fff",border:"none"},onClick:m,"data-testid":"docx-page-setup-apply",children:"Apply"})]})]})]})}function ke(n){return e.jsxs("label",{style:{display:"flex",flexDirection:"column",gap:4,fontSize:12,color:"#5f6368"},children:[n.label,e.jsx("input",{type:"number",step:"0.1",min:"0",value:n.value,onChange:s=>n.onChange(parseFloat(s.target.value)||0),style:{...se,width:80,fontSize:13}})]})}function Fs(n){if(!n.state)return null;const s=n.state.inTable&&n.onTable;return e.jsxs(e.Fragment,{children:[e.jsx("div",{style:aa,onClick:n.onClose}),e.jsxs("div",{style:{...Ge,position:"fixed",left:n.state.x,top:n.state.y,minWidth:220},role:"menu","data-testid":"docx-context-menu",children:[e.jsx(F,{icon:ce,label:"Cut",onClick:n.onCut}),e.jsx(F,{icon:ce,label:"Copy",onClick:n.onCopy}),e.jsx(F,{icon:ce,label:"Paste",onClick:n.onPaste}),e.jsx(F,{icon:ce,label:"Paste without formatting",onClick:n.onPasteMatchStyle}),e.jsx("div",{style:{borderTop:"1px solid #e8eaed",margin:"4px 0"}}),e.jsx(F,{icon:ut,label:"Add link",onClick:n.onInsertLink}),s&&n.onTable&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{borderTop:"1px solid #e8eaed",margin:"4px 0"}}),e.jsx(F,{icon:ie,label:"Insert row above",onClick:n.onTable.addRowBefore}),e.jsx(F,{icon:ie,label:"Insert row below",onClick:n.onTable.addRowAfter}),e.jsx(F,{icon:ie,label:"Insert column left",onClick:n.onTable.addColumnBefore}),e.jsx(F,{icon:ie,label:"Insert column right",onClick:n.onTable.addColumnAfter}),e.jsx("div",{style:{borderTop:"1px solid #e8eaed",margin:"4px 0"}}),e.jsx(F,{icon:ue,label:"Delete row",onClick:n.onTable.deleteRow}),e.jsx(F,{icon:ue,label:"Delete column",onClick:n.onTable.deleteColumn}),e.jsx(F,{icon:He,label:"Merge cells",onClick:n.onTable.mergeCells}),e.jsx(F,{icon:He,label:"Split cell",onClick:n.onTable.splitCell}),e.jsx("div",{style:{borderTop:"1px solid #e8eaed",margin:"4px 0"}}),e.jsx(F,{icon:ue,label:"Delete table",onClick:n.onTable.deleteTable})]})]})]})}function Bs(n){return e.jsxs("aside",{style:ea,"data-testid":"docx-outline-panel",children:[e.jsx("div",{style:ta,children:"Document outline"}),n.entries.length===0&&e.jsx("div",{style:na,children:"Add headings to see the outline."}),n.entries.map((s,c)=>e.jsx("button",{type:"button",style:{...sa,paddingLeft:8+s.level*12},onClick:()=>n.onJump(s),title:s.text,children:s.text},`${s.pos}-${c}`))]})}function Ls(n){const[s,c]=i.useState({words:0,chars:0});return i.useEffect(()=>{if(!n.editorView)return;const r=()=>{const b=n.editorView.state.doc.textContent,B=b.trim().length===0?0:b.trim().split(/\s+/).length;c({words:B,chars:b.length})};r();const y=n.editorView.dom,h=new MutationObserver(r);return h.observe(y,{subtree:!0,characterData:!0,childList:!0}),()=>h.disconnect()},[n.editorView]),e.jsxs("div",{style:Ys,"data-testid":"docx-status-bar",children:[e.jsxs("span",{style:ze,"data-testid":"docx-page-count",children:[n.pageCount," page",n.pageCount===1?"":"s"]}),e.jsx("span",{style:st}),e.jsxs("span",{style:ze,"data-testid":"docx-word-count",children:[s.words," word",s.words===1?"":"s"]}),e.jsx("span",{style:st}),e.jsxs("span",{style:ze,"data-testid":"docx-char-count",children:[s.chars," character",s.chars===1?"":"s"]}),e.jsx("span",{style:{flex:1}}),e.jsx("button",{type:"button",title:"Zoom out",style:at,onClick:()=>n.onZoomChange(Math.max(.5,n.zoom-.1)),children:e.jsx(ue,{size:14})}),e.jsx("input",{type:"range",min:50,max:200,step:5,value:Math.round(n.zoom*100),onChange:r=>n.onZoomChange(parseInt(r.target.value,10)/100),style:Qs,title:`${Math.round(n.zoom*100)}%`,"data-testid":"docx-zoom-slider"}),e.jsx("button",{type:"button",title:"Zoom in",style:at,onClick:()=>n.onZoomChange(Math.min(2,n.zoom+.1)),children:e.jsx(ie,{size:14})}),e.jsxs("span",{style:Zs,children:[Math.round(n.zoom*100),"%"]})]})}const Ms={display:"flex",flexDirection:"column",height:"100%"},Ds={padding:"6px 8px",borderBottom:"1px solid #e8eaed",display:"flex",flexWrap:"wrap",gap:2,alignItems:"center",backgroundColor:"#ffffff",flexShrink:0,position:"sticky",top:0,zIndex:10,fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"},je={display:"inline-flex",alignItems:"center",justifyContent:"center",width:28,height:28,border:"none",borderRadius:4,backgroundColor:"transparent",curs
190or:"pointer",padding:0,transition:"background-color 100ms ease-out"},se={padding:"4px 6px",fontSize:13,borderRadius:4,border:"1px solid #dadce0",backgroundColor:"#ffffff",height:28,color:"#3c4043"},Ps={...se,minWidth:110},zs={...se,width:56},Ve={position:"relative",display:"inline-flex"},Ns={display:"inline-flex",alignItems:"center",gap:4,height:28,padding:"0 8px",border:"1px solid #dadce0",borderRadius:4,backgroundColor:"#ffffff",fontSize:13,cursor:"pointer",width:120},Ge={position:"absolute",top:32,left:0,zIndex:100,background:"#ffffff",border:"1px solid #dadce0",borderRadius:6,boxShadow:"0 2px 8px rgba(60,64,67,0.18)",minWidth:180,maxHeight:280,overflowY:"auto",padding:4},mt={display:"block",width:"100%",padding:"6px 10px",border:"none",background:"transparent",textAlign:"left",fontSize:14,cursor:"pointer",borderRadius:4},Hs={display:"inline-flex",alignItems:"center",borderRadius:4,overflow:"hidden"},Os={position:"absolute",top:32,left:0,zIndex:100,background:"#ffffff",border:"1px solid #dadce0",borderRadius:6,boxShadow:"0 2px 8px rgba(60,64,67,0.18)",padding:8,minWidth:220},Ws={display:"grid",gridTemplateColumns:"repeat(10, 1fr)",gap:2,marginBottom:6}
190,$s={display:"grid",gridTemplateColumns:"repeat(10, 1fr)",gap:2},tt={width:18,height:18,border:"1px solid rgba(0,0,0,0.1)",borderRadius:2,cursor:"pointer",padding:0},Vs={display:"flex",alignItems:"center",justifyContent:"space-between",marginTop:8,borderTop:"1px solid #e8eaed",paddingTop:6},Gs={fontSize:12,border:"none",background:"transparent",cursor:"pointer",color:"#1a73e8",padding:"2px 6px"},Us={display:"flex",gap:6,alignItems:"center",padding:8,backgroundColor:"#FFF8E1",borderBottom:"1px solid #E2E8F0",position:"sticky",top:50,zIndex:9},nt={padding:"4px 8px",fontSize:13,border:"1px solid #CBD5E1",borderRadius:4,flex:1,maxWidth:240},Pe={display:"inline-flex",alignItems:"center",gap:3,fontSize:12,color:"#3c4043",padding:"0 4px",cursor:"pointer",fontFamily:"monospace"},ne={padding:"4px 10px",fontSize:13,borderRadius:4,border:"1px solid #dadce0",backgroundColor:"#ffffff",cursor:"pointer",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",height:28},qs={width:1,height:18,backgroundColor:"#dadce0",marginInline:4},Ys={display:"flex",alignItems:"center",gap:4,padding:"4px 12px",borderTop:"1px solid #e8eaed",backgroundColor:"#f8f9fa",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",fontSize:12,color:"#5f6368",flexShrink:0},ze={padding:"0 6px"},st={width:1,height:14,backgroundColor:"#dadce0"},at={display:"inline-flex",alignItems:"center",justifyContent:"center",width:22,height:22,border:"none",borderRadius:4,backgroundColor:"transparent",color:"#5f6368",cursor:"pointer",padding:0},Qs={width:120,margin:"0 4px"},Zs={minWidth:40,textAlign:"right",padding:"0 6px"},ot={display:"none"},Js={flex:1,display:"flex",overflow:"hidden"},Xs={flex:1,overflow:"auto",backgroundColor:"#f1f3f4"},Ks={display:"block",minHeight:"100%"},ea={width:240,flexShrink:0,borderRight:"1px solid #e8eaed",backgroundColor:"#ffffff",overflow:"auto",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",fontSize:13,padding:"8px 0"},ta={padding:"8px 16px",fontSize:11,textTransform:"uppercase",letterSpacing:.5,color:"#5f6368",fontWeight:600},na={padding:"8px 16px",fontSize:12,color:"#80868b"},sa={display:"block",width:"100%",textAlign:"left",border:"none",background:"transparent",padding:"6px 12px",cursor:"pointer",color:"#3c4043",fontSize:13,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},aa={position:"fixed",inset:0,zIndex:1e3},oa={position:"fixed",inset:0,zIndex:2e3,background:"rgba(0,0,0,0.32)"},ia={position:"fixed",top:"50%",left:"50%",transform:"translate(-50%, -50%)",zIndex:2001,background:"#ffffff",borderRadius:8,padding:24,boxShadow:"0 8px 32px rgba(0,0,0,0.24)",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",minWidth:360},it={display:"flex",alignItems:"center",justifyContent:"space-between",gap:12,margin:"8px 0",fontSize:13,color:"#3c4043"},la={display:"grid",gridTemplateColumns:"1fr 1fr",gap:12,marginTop:4},ra={display:"flex",justifyContent:"flex-end",gap:8,marginTop:16},da={padding:"8px 12px",backgroundColor:"#FEE2E2",color:"#991B1B",fontSize:13,fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"},lt=`# Markdown Editor 191 192A **WYSIWYG** editor â you edit *rich text*, it stores plain \`markdown\`. 193 194## What it supports 195 196- Headings, **bold**, *italic*, ~~strikethrough~~ 197- Bullet and numbered lists 198- [Links](https://example.com) and inline \`code\` 199 2001. Type \`##\` for a heading 2012. Type \`-\` or \`1.\` for a list 2023. Type \`**text**\` and watch it turn bold 203 204> Markdown shorthand transforms as you type. 205 206\`\`\`ts 207const editor = createMarkdownEditorView(host, options); 208\`\`\` 209 210| Feature | Editable | 211| :--- | :--: | 212| Tables | yes | 213| Code blocks | yes | 214 215--- 216`;function Ce({title:n,children:s}){return e.jsxs(X,{className:S.section,children:[e.jsx(L,{size:"lg",weight:"semibold",children:n}),e.jsx(X,{className:S.section_content,children:s})]})}const va=le(function(){const[s,c]=i.useState(""),[r,y]=i.useState(lt),[h,x]=i.useState("Edit me â the label comes from the `FormField` around this editor.");return e.jsx(We,{className:S.canvas,children:e.jsxs(q,{className:S.page,children:[e.jsx(L,{size:"xl",weight:"semibold",children:"Markdown Editor"}),e.jsx(L,{color:"muted",children:"WYSIWYG editing backed by a plain markdown string. ProseMirror engine in @lotics/markdown-editor; web-only."}),e.jsx(Ce,{title:"Empty with placeholder",children:e.jsx(xe,{value:s,onValueChange:c,placeholder:"Start typing⦠try # , - , > , or **bold**"})}),e.jsxs(Ce,{title:"Live markdown source",children:[e.jsx(L,{size:"sm",color:"muted",children:"Edit on the left â the stored markdown string updates on the right."}),e.jsxs(X,{direction:"row",gap:16,align:"stretch",children:[e.jsx(q,{className:S.split_pane,children:e.jsx(xe,{value:r,onValueChange:y,numberOfLines:20})}),e.jsx(q,{className:S.split_pane,children:e.jsx("pre",{className:S.source,children:r||"(empty)"})})]})]}),e.jsx(Ce,{title:"In a FormField",children:e.jsx(qn,{label:"Content",description:"A labelled form field wrapping the editor.",children:e.jsx(xe,{value:h,onValueChange:x,numberOfLines:6})})}),e.jsx(Ce,{title:"Disabled (read-only)",children:e.jsx(xe,{value:lt,onValueChange:()=>{},disabled:!0,numberOfLines:12})})]})})});function Ne({title:n,children:s}){return e.jsxs(X,{className:S.section,children:[e.jsx(L,{size:"lg",weight:"semibold",children:n}),e.jsx(X,{className:S.section_content,children:s})]})}const ca=Date.parse("2024-03-14T09:00:00.000Z");function pe(n){return new Date(ca-n*6e4).toISOString()}const ua=[{id:"notif-1",type:"send_notification_tool",title:"New lead assigned",body:"A new lead from the website form has been assigned to you.",member_id:"member-1",workspace_id:"ws-1",created_at:pe(5),done_at:null,data:{},level:null},{id:"notif-2",type:"send_notification_tool",title:"Report generated",body:"Your monthly sales report is ready to download.",member_id:"member-1",workspace_id:"ws-1",created_at:pe(180),done_at:null,data:{},level:null},{id:"notif-3",type:"send_notification_tool",title:"Automation completed",body:"Invoice batch #2024-03 has been processed successfully. 42 invoices were sent.",member_id:"member-1",workspace_id:"ws-1",created_at:pe(1440),done_at:null,data:{},level:null}],pa=[{id:"notif-4",type:"send_notification_tool",title:"Task reminder",body:"Follow up with client about the proposal.",member_id:"member-1",workspace_id:"ws-1",created_at:pe(2880),done_at:pe(1440),data:{},level:null}],ma=()=>{},_a=le(function(){return e.jsx(We,{className:S.canvas,children:e.jsxs(q,{className:`${S.page} ${S.page_narrow}`,children:[e.jsx(L,{size:"xl",weight:"semibold",children:"Notifications"}),e.jsx(L,{color:"muted",children:"Notification list items for the bell popover."}),e.jsx(Ne,{title:"Inbox (with mark done)",children:e.jsx(q,{className:S.list_container,children:e.jsx(Me,{notifications:ua,onMarkDone:ma})})}),e.jsx(Ne,{title:"Done (no mark done button)",children:e.jsx(q,{className:S.list_container,children:e.jsx(Me,{notifications:pa})})}),e.jsx(Ne,{title:"Empty state",children:e.jsx(q,{className:S.list_container,children:e.jsx(Me,{notifications:[]})})})]})})});function rt(){const n=new Jn,s=new Le("Demo",n),c={fontBold:!0,fontColor:"#FFFFFF",backgroundColor:"#2563EB",fontSize:13,horizontalAlign:"center"},r={horizontalAlign:"right"},y={horizontalAlign:"right",fontColor:"#059669"},h={horizontalAlign:"center"},x={fontItalic:!0},b={fontBold:!0},B={fontBold:!0,horizontalAlign:"right",backgroundColor:"#F1F5F9"};s.colWidths.set(1,6),s.colWidths.set(2,18),s.colWidths.set(3,12),s.colWidths.set(4,12),s.colWidths.set(5,10),s.colWidths.set(6,12),s.colWidths.set(7,10),s.colWidths.set(8,10);const t=["ID","Name","Revenue","Cost","Margin %","Date","Region","Status"];for(let _=0;_<t.length;_++)s.set(`${String.fromCharCode(65+_)}1`,t[_],c);const l=[[1,"Acme Corp",125e3,78e3,.376,"2024-01-15","North","Active"],[2,"Beta Inc",89500,52300,.416,"2024-02-20","South","A
216ctive"],[3,"Gamma Ltd",21e4,145e3,.31,"2024-03-10","East","Pending"],[4,"Delta Co",67800,41200,.392,"2024-04-05","West","Active"],[5,"Epsilon LLC",156e3,98700,.367,"2024-05-18","North","Closed"],[6,"Zeta Group",312e3,189e3,.394,"2024-06-22","South","Active"],[7,"Eta Partners",45600,31200,.316,"2024-07-08","East","Pending"],[8,"Theta Works",178900,112400,.372,"2024-08-14","West","Active"],[9,"Iota Systems",93200,58900,.368,"2024-09-30","North","Active"]];for(let _=0;_<l.length;_++){const z=_+2,[Se,de,Ie,Re,a,N,C,Te]=l[_];s.set(`A${z}`,Se),s.set(`B${z}`,de,x),s.set(`C${z}`,Ie,r,"#,##0"),s.set(`D${z}`,Re,r,"#,##0"),s.set(`E${z}`,a,y,"0.0%"),s.set(`F${z}`,N,h),s.set(`G${z}`,C),s.set(`H${z}`,Te)}s.set("A11","Totals",b),s.set("C11","SUM",B,"#,##0","SUM(C2:C10)"),s.cells.get("C11").displayValue="1,278,000",s.set("D11","SUM",B,"#,##0","SUM(D2:D10)"),s.cells.get("D11").displayValue="806,700",s.set("E11","AVG",B,"0.0%","AVERAGE(E2:E10)"),s.cells.get("E11").displayValue="36.9%",s.freeze={row:1,col:1},s.conditionalFormats.push({ref:"C2:C10",rules:[{ruleType:"colorScale",priority:1,colors:["#FEE2E2","#FEF9C3","#DCFCE7"]}]});const g=new Le("Styles",n),v={fontBold:!0},m={fontItalic:!0},j={fontUnderline:"single"},G={fontStrike:!0},H={fontColor:"#DC2626",fontSize:14},$={fontColor:"#2563EB",fontSize:18,fontBold:!0},Q={backgroundColor:"#DCFCE7"},p={wrapText:!0};g.colWidths.set(1,16),g.colWidths.set(2,20);const T=[["Bold","Bold text sample",v],["Italic","Italic text sample",m],["Underline","Underlined text",j],["Strikethrough","Struck-through text",G],["Red 14pt","Red colored text",H],["Large Blue Bold","Big blue heading",$],["Green Background","Cell with background",Q],["Wrap Text","This is a long text that should wrap within the cell boundary",p]];for(let _=0;_<T.length;_++){const z=_+1;g.set(`A${z}`,T[_][0]),g.set(`B${z}`,T[_][1],T[_][2])}const d=new Le("Features",n);d.colWidths.set(1,18),d.colWidths.set(2,20),d.colWidths.set(3,14),d.colWidths.set(4,14),d.set("A1","Feature",c),d.set("B1","Description",c),d.set("C1","Value",c),d.set("D1","Status",c),d.set("A2","Named Range",v),d.set("B2","=TotalRevenue",void 0,"#,##0","TotalRevenue"),d.cells.get("B2").displayValue="1,278,000",d.cells.get("B2").value=1278e3,d.set("C2",15e4,r,"#,##0"),d.set("C3",5e4,r,"#,##0"),d.set("C4",2e5,r,"#,##0"),d.set("A5","CF Expression",v),d.set("B5","Revenue > 100K"),d.set("C5",15e4,r,"#,##0"),d.set("C6",5e4,r,"#,##0"),d.set("C7",2e5,r,"#,##0"),d.conditionalFormats.push({ref:"C5:C7",rules:[{ruleType:"style",priority:1,type:"expression",formulae:["$C5>100000"],style:{backgroundColor:"rgb(220, 252, 231)"}}]}),d.set("A8","CF TimePeriod",v),d.set("B8","thisMonth");const O=new Date,E=new Date(1900,0,1),k=Math.floor((O.getTime()-E.getTime())/864e5)+2;d.set("C8",k,h,"yyyy-mm-dd"),d.set("C9",k-30,h,"yyyy-mm-dd"),d.set("C10",k+15,h,"yyyy-mm-dd"),d.conditionalFormats.push({ref:"C8:C10",rules:[{ruleType:"style",priority:2,type:"timePeriod",timePeriod:"thisMonth",style:{backgroundColor:"rgb(254, 249, 195)"}}]}),d.set("A11","Data Validation",v),d.set("B11","List dropdown"),d.set("C11","Active"),d.set("C12","Pending"),d.set("C13","Active"),d.dataValidations.push({ref:"C11:C13",type:"list",formula1:'"Active,Pending,Closed"',showDropdown:!0}),d.set("A14","Sparklines",v),d.set("B14","Revenue trend");const f=[125,89,210,67,156,312,45,178,93];for(let _=0;_<f.length;_++)d.set(`D${14+_}`,f[_]);d.sparklineGroups.push({type:"line",sparklines:[{dataRange:"Features!D14:D22",locationRef:"C14"}],color:"#4472C4"}),d.sparklineGroups.push({type:"column",sparklines:[{dataRange:"Features!D14:D22",locationRef:"C15"}],color:"#ED7D31"}),d.set("A17","Pattern Fills",v);const D={backgroundPattern:"darkVertical rgb(0, 0, 128) rgb(255, 255, 255)",patternType:"darkVertical"},Z={backgroundPattern:"lightHorizontal rgb(0, 128, 0) rgb(255, 255, 255)",patternType:"lightHorizontal"}
216,ve={backgroundPattern:"darkGrid rgb(128, 0, 0) rgb(255, 255, 255)",patternType:"darkGrid"};d.set("B17","darkVertical",D),d.set("B18","lightHorizontal",Z),d.set("B19","darkGrid",ve),d.set("A20","Gradient Fills",v);const _e={backgroundGradient:"linear-gradient(90deg, rgb(66, 133, 244) 0%, rgb(255, 255, 255) 100%)",gradientData:{type:"linear",degree:90,stops:[{position:0,color:"rgb(66, 133, 244)"},{position:1,color:"rgb(255, 255, 255)"}]}},we={backgroundGradient:"radial-gradient(circle at 50% 50%, rgb(255, 192, 0) 0%, rgb(255, 255, 255) 100%)",gradientData:{type:"radial",degree:0,stops:[{position:0,color:"rgb(255, 192, 0)"},{position:1,color:"rgb(255, 255, 255)"}]}};d.set("B20","Linear gradient",_e),d.set("B21","Radial gradient",we),d.set("A23","Auto-filter",v),d.set("B23","Filtered table"),d.autoFilter={ref:"A1:D1",columns:[{colIndex:3,filterValues:["Active"]}]},d.set("A24","Structured Ref",v),d.set("B24","=SUM(C2:C4)",void 0,"#,##0","SUM(C2:C4)"),d.cells.get("B24").displayValue="400,000",d.cells.get("B24").value=4e5,d.set("A25","Array Formula",v),d.set("B25","=SUM(C2:C4*2)",void 0,"#,##0","SUM(C2:C4*2)");const K=d.cells.get("B25");K.isArrayFormula=!0,K.arrayRange="B25",K.displayValue="800,000",K.value=8e5;const re=new Xn({sheets:[s,g,d],activeSheetIndex:0,styles:n});return re.namedRanges.set("TotalRevenue","Demo!$C$11"),re}function dt(n){const s=new pt(n);return s.buildGraph(),s.evaluateMissing(),s}const wa=le(function(){const[s,c]=i.useState(()=>rt()),[r,y]=i.useState(()=>dt(s)),h=i.useRef(null),x=i.useCallback(async B=>{const t=B.target.files?.[0];if(!t)return;const l=await t.arrayBuffer(),g=Yn(l),v=Qn(g);Zn(v);const m=new pt(v);m.buildGraph(),c(v),y(m),B.target.value=""},[]),b=i.useCallback(()=>{const B=rt();c(B),y(dt(B))},[]);return e.jsxs("div",{style:ga,"data-testid":"spreadsheet-showcase",children:[e.jsxs("div",{style:ha,children:[e.jsx("button",{style:ct,"data-testid":"spreadsheet-load-xlsx",onClick:()=>h.current?.click(),children:"Load .xlsx"}),e.jsx("button",{style:ct,"data-testid":"spreadsheet-reset-demo",onClick:b,children:"Reset Demo"}),e.jsx("input",{ref:h,type:"file",accept:".xlsx",onChange:x,style:fa})]}),e.jsx(es,{workbook:s,engine:r,editable:!0})]})}),ga={display:"flex",flexDirection:"column",height:"100%"},ha={padding:8,borderBottom:"1px solid #E2E8F0",display:"flex",gap:8,backgroundColor:"#F8FAFC",flexShrink:0},ct={padding:"6px 14px",fontSize:13,borderRadius:4,border:"1px solid #CBD5E1",backgroundColor:"#FFFFFF",cursor:"pointer",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"},fa={display:"none"};export{Ca as a,ja as d,ka as default,va as m,_a as n,wa as s}; 217//# sourceMappingURL=_layout-db472fe5b97c33a10b66.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.