@stfrigerio/sito-template 0.1.58 → 0.1.60

package/storybook-static/assets/EditFAB.stories-DvtpW34v.js

@@ -1,378 +0,0 @@
-import{r as n,j as e}from"./iframe-B8pH-Lvr.js";import{m as ve}from"./proxy-BA3VZtN5.js";import{C as fe}from"./check-Cty-Z1Ib.js";import{X as xe}from"./x-BC8LCdn9.js";import{c as be}from"./createLucideIcon-BNUG5osq.js";import"./preload-helper-C1FmrZbK.js";import"./MotionConfigContext-D5hZdVGx.js";/**
- * @license lucide-react v0.539.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */const Me=[["path",{d:"M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7",key:"1m0v6g"}],["path",{d:"M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z",key:"ohrbg2"}]],Se=be("square-pen",Me),ye="_fab_1ffxw_2",Ce="_primary_1ffxw_54",we="_secondary_1ffxw_64",Ue="_success_1ffxw_74",je="_loader_1ffxw_85",ke="_draggable_1ffxw_102",Te="_dragging_1ffxw_110",g={fab:ye,primary:Ce,secondary:we,success:Ue,loader:je,draggable:ke,dragging:Te},u=({canEdit:o,isEditMode:r,hasUnsavedChanges:a=!1,isSaving:t=!1,onEnterEditMode:h,onExitEditMode:p,position:d={bottom:32,right:32}})=>{const[l,f]=n.useState(!1),[m,x]=n.useState(null),[i,s]=n.useState(!1),v=n.useRef(null),b=n.useRef(null),M=n.useRef(null);n.useEffect(()=>{const c=()=>{f(window.innerWidth<=768)};return c(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)}},[]);const le=c=>{var y;if(!l)return;const S=c.touches[0],E=(y=v.current)==null?void 0:y.getBoundingClientRect();E&&(b.current={x:S.clientX,y:S.clientY},M.current={x:E.left+E.width/2,y:E.top+E.height/2},s(!0))},ce=c=>{if(!i||!b.current||!M.current)return;c.preventDefault();const S=c.touches[0],E=S.clientX-b.current.x,y=S.clientY-b.current.y;let H=M.current.x+E,D=M.current.y+y;const C=30;H=Math.max(C,Math.min(window.innerWidth-C,H)),D=Math.max(C,Math.min(window.innerHeight-C,D)),x({x:H,y:D})},ge=()=>{s(!1),b.current=null,M.current=null},ue=c=>{!i&&!t&&(r?p():h())};if(!o)return null;const he=()=>m?{position:"fixed",left:`${m.x}px`,top:`${m.y}px`,transform:"translate(-50%, -50%)",touchAction:"none"}:{position:"fixed",...d,touchAction:l?"none":"auto"},pe=()=>t?g.primary:r?a?g.success:g.secondary:g.primary,me=()=>t?e.jsx("div",{className:g.loader}):r?a?e.jsx(fe,{size:24}):e.jsx(xe,{size:24}):e.jsx(Se,{size:24}),Ee=()=>t?"Saving changes":r?a?"Save and exit edit mode":"Exit edit mode":"Enter edit mode";return e.jsx(ve.button,{ref:v,className:`${g.fab} ${pe()} ${l?g.draggable:""} ${i?g.dragging:""}`,style:he(),onClick:ue,onTouchStart:le,onTouchMove:ce,onTouchEnd:ge,disabled:t,"aria-label":Ee(),initial:{scale:0,opacity:0},animate:{scale:1,opacity:1},exit:{scale:0,opacity:0},whileHover:!t&&!i?{scale:1.1}:{},whileTap:!t&&!i?{scale:.9}:{},transition:{type:"spring",stiffness:260,damping:20},children:me()})};u.__docgenInfo={description:"",methods:[],displayName:"EditFAB",props:{canEdit:{required:!0,tsType:{name:"boolean"},description:""},isEditMode:{required:!0,tsType:{name:"boolean"},description:""},hasUnsavedChanges:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},isSaving:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},onEnterEditMode:{required:!0,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},onExitEditMode:{required:!0,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},position:{required:!1,tsType:{name:"signature",type:"object",raw:`{
-    bottom?: string | number;
-    right?: string | number;
-    top?: string | number;
-    left?: string | number;
-}`,signature:{properties:[{key:"bottom",value:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}],required:!1}},{key:"right",value:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}],required:!1}},{key:"top",value:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}],required:!1}},{key:"left",value:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}],required:!1}}]}},description:"",defaultValue:{value:"{ bottom: 32, right: 32 }",computed:!1}}}};const Be={title:"Molecules/EditFAB",component:u,parameters:{layout:"fullscreen",docs:{description:{component:"A floating action button for edit mode with touch-friendly mobile dragging support and state management."}}},tags:["autodocs"],argTypes:{canEdit:{control:"boolean",description:"Whether the user has permission to edit"},isEditMode:{control:"boolean",description:"Whether edit mode is currently active"},hasUnsavedChanges:{control:"boolean",description:"Whether there are unsaved changes"},isSaving:{control:"boolean",description:"Whether a save operation is in progress"},position:{control:"object",description:"CSS positioning properties for the FAB"},onEnterEditMode:{action:"enter-edit-mode"},onExitEditMode:{action:"exit-edit-mode"}}},w={args:{canEdit:!0,isEditMode:!1,hasUnsavedChanges:!1,isSaving:!1,onEnterEditMode:()=>{},onExitEditMode:()=>{}}},U={args:{canEdit:!0,isEditMode:!0,hasUnsavedChanges:!1,isSaving:!1,onEnterEditMode:()=>{},onExitEditMode:()=>{}}},j={args:{canEdit:!0,isEditMode:!0,hasUnsavedChanges:!0,isSaving:!1,onEnterEditMode:()=>{},onExitEditMode:()=>{}}},k={args:{canEdit:!0,isEditMode:!0,hasUnsavedChanges:!0,isSaving:!0,onEnterEditMode:()=>{},onExitEditMode:()=>{}}},T={args:{canEdit:!1,isEditMode:!1,hasUnsavedChanges:!1,isSaving:!1,onEnterEditMode:()=>{},onExitEditMode:()=>{}}},z={args:{canEdit:!0,isEditMode:!1,hasUnsavedChanges:!1,isSaving:!1,position:{top:32,left:32},onEnterEditMode:()=>{},onExitEditMode:()=>{}}},_={args:{canEdit:!0,isEditMode:!1,hasUnsavedChanges:!1,isSaving:!1,onEnterEditMode:()=>{},onExitEditMode:()=>{}},render:()=>{const[o,r]=n.useState(!1),[a,t]=n.useState(!1),[h,p]=n.useState(!1),[d,l]=n.useState("Click the edit button to start editing this content."),f=()=>{r(!0),t(!1)},m=async()=>{a&&(p(!0),await new Promise(i=>setTimeout(i,2e3)),p(!1)),r(!1),t(!1)},x=i=>{l(i),t(!0)};return e.jsxs("div",{style:{position:"relative",height:"100vh",padding:"2rem",background:"linear-gradient(135deg, #667eea 0%, #764ba2 100%)",color:"white"},children:[e.jsxs("div",{style:{maxWidth:"600px",margin:"0 auto",padding:"2rem",background:"rgba(255, 255, 255, 0.1)",borderRadius:"12px",backdropFilter:"blur(10px)"},children:[e.jsx("h1",{style:{marginTop:0},children:"Interactive Edit Demo"}),o?e.jsxs("div",{children:[e.jsx("textarea",{value:d,onChange:i=>x(i.target.value),style:{width:"100%",height:"200px",padding:"1rem",border:"none",borderRadius:"8px",fontSize:"1rem",resize:"vertical"},placeholder:"Enter your content here..."}),e.jsx("p",{style:{fontSize:"0.875rem",opacity:.8,marginTop:"0.5rem"},children:a?"⚠️ You have unsaved changes":"✅ No changes"})]}):e.jsx("div",{style:{padding:"1rem",background:"rgba(255, 255, 255, 0.1)",borderRadius:"8px",lineHeight:1.6},children:d}),e.jsxs("div",{style:{marginTop:"2rem",fontSize:"0.875rem",opacity:.8},children:[e.jsxs("p",{children:["Mode: ",o?"Edit Mode":"View Mode"]}),e.jsxs("p",{children:["Status: ",h?"Saving...":a?"Unsaved Changes":"Saved"]})]})]}),e.jsx(u,{canEdit:!0,isEditMode:o,hasUnsavedChanges:a,isSaving:h,onEnterEditMode:f,onExitEditMode:m})]})},parameters:{controls:{disable:!0}}},I={args:{canEdit:!0,isEditMode:!1,hasUnsavedChanges:!1,isSaving:!1,onEnterEditMode:()=>{},onExitEditMode:()=>{}},render:()=>{const[o,r]=n.useState(!1),[a,t]=n.useState(!1),[h,p]=n.useState(!1),[d,l]=n.useState({title:"Project Documentation",content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",lastSaved:new Date().toLocaleTimeString()}),f=()=>{r(!0),t(!1)},m=async()=>{a&&(p(!0),await new Promise(s=>setTimeout(s,1500)),l(s=>({...s,lastSaved:new Date().toLocaleTimeString()})),p(!1)),r(!1),t(!1)},x=s=>{l(v=>({...v,title:s})),t(!0)},i=s=>{l(v=>({...v,content:s})),t(!0)};return e.jsxs("div",{style:{position:"relative",height:"100vh",background:"#f5f5f5"},children:[e.jsxs("div",{style:{maxWidth:"800px",margin:"0 auto",padding:"2rem",background:"white",minHeight:"100vh",boxShadow:"0 0 20px rgba(0,0,0,0.1)"},children:[e.jsxs("div",{style:{borderBottom:"2px solid #e9ecef",paddingBottom:"1rem",marginBottom:"2rem"},children:[o?e.jsx("input",{type:"text",value:d.title,onChange:s=>x(s.target.value),style:{fontSize:"2rem",fontWeight:"bold",border:"2px solid #007bff",outline:"none",width:"100%",padding:"0.5rem",borderRadius:"4px"}}):e.jsx("h1",{style:{margin:0,fontSize:"2rem"},children:d.title}),e.jsxs("p",{style:{margin:"0.5rem 0 0",fontSize:"0.875rem",color:"#6c757d"},children:["Last saved: ",d.lastSaved," | Status: ",h?"Saving...":a?"Unsaved changes":"All changes saved"]})]}),o?e.jsx("textarea",{value:d.content,onChange:s=>i(s.target.value),style:{width:"100%",height:"400px",padding:"1rem",border:"2px solid #007bff",borderRadius:"8px",fontSize:"1rem",lineHeight:1.6,resize:"vertical",fontFamily:"inherit"},placeholder:"Start writing your document..."}):e.jsx("div",{style:{padding:"1rem",lineHeight:1.8,fontSize:"1rem",minHeight:"400px",whiteSpace:"pre-wrap"},children:d.content}),o&&e.jsx("div",{style:{marginTop:"1rem",padding:"1rem",background:a?"#fff3cd":"#d1edff",borderRadius:"8px",fontSize:"0.875rem"},children:a?e.jsx(e.Fragment,{children:"⚠️ You have unsaved changes. Click the save button to save your work."}):e.jsx(e.Fragment,{children:"✅ All changes saved."})})]}),e.jsx(u,{canEdit:!0,isEditMode:o,hasUnsavedChanges:a,isSaving:h,onEnterEditMode:f,onExitEditMode:m,position:{bottom:32,right:32}})]})},parameters:{controls:{disable:!0}}},R={args:{canEdit:!0,isEditMode:!1,hasUnsavedChanges:!1,isSaving:!1,onEnterEditMode:()=>{},onExitEditMode:()=>{}},render:()=>e.jsx("div",{style:{position:"relative",height:"100vh",background:"#f8f9fa",padding:"2rem"},children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(300px, 1fr))",gap:"2rem",maxWidth:"1200px",margin:"0 auto"},children:[e.jsxs("div",{style:{padding:"1.5rem",background:"white",borderRadius:"8px",boxShadow:"0 2px 8px rgba(0,0,0,0.1)"},children:[e.jsx("h3",{children:"View Mode"}),e.jsx("p",{children:"Default state when not editing"}),e.jsx(u,{canEdit:!0,isEditMode:!1,hasUnsavedChanges:!1,isSaving:!1,onEnterEditMode:()=>{},onExitEditMode:()=>{},position:{bottom:16,right:16}})]}),e.jsxs("div",{style:{padding:"1.5rem",background:"white",borderRadius:"8px",boxShadow:"0 2px 8px rgba(0,0,0,0.1)"},children:[e.jsx("h3",{children:"Edit Mode (No Changes)"}),e.jsx("p",{children:"In edit mode but no changes made yet"}),e.jsx(u,{canEdit:!0,isEditMode:!0,hasUnsavedChanges:!1,isSaving:!1,onEnterEditMode:()=>{},onExitEditMode:()=>{},position:{bottom:16,right:16}})]}),e.jsxs("div",{style:{padding:"1.5rem",background:"white",borderRadius:"8px",boxShadow:"0 2px 8px rgba(0,0,0,0.1)"},children:[e.jsx("h3",{children:"Unsaved Changes"}),e.jsx("p",{children:"Changes made but not saved yet"}),e.jsx(u,{canEdit:!0,isEditMode:!0,hasUnsavedChanges:!0,isSaving:!1,onEnterEditMode:()=>{},onExitEditMode:()=>{},position:{bottom:16,right:16}})]}),e.jsxs("div",{style:{padding:"1.5rem",background:"white",borderRadius:"8px",boxShadow:"0 2px 8px rgba(0,0,0,0.1)"},children:[e.jsx("h3",{children:"Saving"}),e.jsx("p",{children:"Save operation in progress"}),e.jsx(u,{canEdit:!0,isEditMode:!0,hasUnsavedChanges:!0,isSaving:!0,onEnterEditMode:()=>{},onExitEditMode:()=>{},position:{bottom:16,right:16}})]})]})}),parameters:{controls:{disable:!0}}};var A,B,F;w.parameters={...w.parameters,docs:{...(A=w.parameters)==null?void 0:A.docs,source:{originalSource:`{
-  args: {
-    canEdit: true,
-    isEditMode: false,
-    hasUnsavedChanges: false,
-    isSaving: false,
-    onEnterEditMode: () => {},
-    onExitEditMode: () => {}
-  }
-}`,...(F=(B=w.parameters)==null?void 0:B.docs)==null?void 0:F.source}}};var P,W,q;U.parameters={...U.parameters,docs:{...(P=U.parameters)==null?void 0:P.docs,source:{originalSource:`{
-  args: {
-    canEdit: true,
-    isEditMode: true,
-    hasUnsavedChanges: false,
-    isSaving: false,
-    onEnterEditMode: () => {},
-    onExitEditMode: () => {}
-  }
-}`,...(q=(W=U.parameters)==null?void 0:W.docs)==null?void 0:q.source}}};var L,N,V;j.parameters={...j.parameters,docs:{...(L=j.parameters)==null?void 0:L.docs,source:{originalSource:`{
-  args: {
-    canEdit: true,
-    isEditMode: true,
-    hasUnsavedChanges: true,
-    isSaving: false,
-    onEnterEditMode: () => {},
-    onExitEditMode: () => {}
-  }
-}`,...(V=(N=j.parameters)==null?void 0:N.docs)==null?void 0:V.source}}};var Y,$,X;k.parameters={...k.parameters,docs:{...(Y=k.parameters)==null?void 0:Y.docs,source:{originalSource:`{
-  args: {
-    canEdit: true,
-    isEditMode: true,
-    hasUnsavedChanges: true,
-    isSaving: true,
-    onEnterEditMode: () => {},
-    onExitEditMode: () => {}
-  }
-}`,...(X=($=k.parameters)==null?void 0:$.docs)==null?void 0:X.source}}};var O,G,J;T.parameters={...T.parameters,docs:{...(O=T.parameters)==null?void 0:O.docs,source:{originalSource:`{
-  args: {
-    canEdit: false,
-    isEditMode: false,
-    hasUnsavedChanges: false,
-    isSaving: false,
-    onEnterEditMode: () => {},
-    onExitEditMode: () => {}
-  }
-}`,...(J=(G=T.parameters)==null?void 0:G.docs)==null?void 0:J.source}}};var K,Q,Z;z.parameters={...z.parameters,docs:{...(K=z.parameters)==null?void 0:K.docs,source:{originalSource:`{
-  args: {
-    canEdit: true,
-    isEditMode: false,
-    hasUnsavedChanges: false,
-    isSaving: false,
-    position: {
-      top: 32,
-      left: 32
-    },
-    onEnterEditMode: () => {},
-    onExitEditMode: () => {}
-  }
-}`,...(Z=(Q=z.parameters)==null?void 0:Q.docs)==null?void 0:Z.source}}};var ee,te,ne;_.parameters={..._.parameters,docs:{...(ee=_.parameters)==null?void 0:ee.docs,source:{originalSource:`{
-  args: {
-    canEdit: true,
-    isEditMode: false,
-    hasUnsavedChanges: false,
-    isSaving: false,
-    onEnterEditMode: () => {},
-    onExitEditMode: () => {}
-  },
-  render: () => {
-    const [isEditMode, setIsEditMode] = useState(false);
-    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
-    const [isSaving, setIsSaving] = useState(false);
-    const [content, setContent] = useState('Click the edit button to start editing this content.');
-    const handleEnterEditMode = () => {
-      setIsEditMode(true);
-      setHasUnsavedChanges(false);
-    };
-    const handleExitEditMode = async () => {
-      if (hasUnsavedChanges) {
-        setIsSaving(true);
-        // Simulate saving
-        await new Promise(resolve => setTimeout(resolve, 2000));
-        setIsSaving(false);
-      }
-      setIsEditMode(false);
-      setHasUnsavedChanges(false);
-    };
-    const handleContentChange = (newContent: string) => {
-      setContent(newContent);
-      setHasUnsavedChanges(true);
-    };
-    return <div style={{
-      position: 'relative',
-      height: '100vh',
-      padding: '2rem',
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-      color: 'white'
-    }}>
-                <div style={{
-        maxWidth: '600px',
-        margin: '0 auto',
-        padding: '2rem',
-        background: 'rgba(255, 255, 255, 0.1)',
-        borderRadius: '12px',
-        backdropFilter: 'blur(10px)'
-      }}>
-                    <h1 style={{
-          marginTop: 0
-        }}>Interactive Edit Demo</h1>
-                    
-                    {isEditMode ? <div>
-                            <textarea value={content} onChange={e => handleContentChange(e.target.value)} style={{
-            width: '100%',
-            height: '200px',
-            padding: '1rem',
-            border: 'none',
-            borderRadius: '8px',
-            fontSize: '1rem',
-            resize: 'vertical'
-          }} placeholder="Enter your content here..." />
-                            <p style={{
-            fontSize: '0.875rem',
-            opacity: 0.8,
-            marginTop: '0.5rem'
-          }}>
-                                {hasUnsavedChanges ? '⚠️ You have unsaved changes' : '✅ No changes'}
-                            </p>
-                        </div> : <div style={{
-          padding: '1rem',
-          background: 'rgba(255, 255, 255, 0.1)',
-          borderRadius: '8px',
-          lineHeight: 1.6
-        }}>
-                            {content}
-                        </div>}
-                    
-                    <div style={{
-          marginTop: '2rem',
-          fontSize: '0.875rem',
-          opacity: 0.8
-        }}>
-                        <p>Mode: {isEditMode ? 'Edit Mode' : 'View Mode'}</p>
-                        <p>Status: {isSaving ? 'Saving...' : hasUnsavedChanges ? 'Unsaved Changes' : 'Saved'}</p>
-                    </div>
-                </div>
-                
-                <EditFAB canEdit={true} isEditMode={isEditMode} hasUnsavedChanges={hasUnsavedChanges} isSaving={isSaving} onEnterEditMode={handleEnterEditMode} onExitEditMode={handleExitEditMode} />
-            </div>;
-  },
-  parameters: {
-    controls: {
-      disable: true
-    }
-  }
-}`,...(ne=(te=_.parameters)==null?void 0:te.docs)==null?void 0:ne.source}}};var ae,se,ie;I.parameters={...I.parameters,docs:{...(ae=I.parameters)==null?void 0:ae.docs,source:{originalSource:`{
-  args: {
-    canEdit: true,
-    isEditMode: false,
-    hasUnsavedChanges: false,
-    isSaving: false,
-    onEnterEditMode: () => {},
-    onExitEditMode: () => {}
-  },
-  render: () => {
-    const [isEditMode, setIsEditMode] = useState(false);
-    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
-    const [isSaving, setIsSaving] = useState(false);
-    const [document, setDocument] = useState({
-      title: 'Project Documentation',
-      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-      lastSaved: new Date().toLocaleTimeString()
-    });
-    const handleEnterEditMode = () => {
-      setIsEditMode(true);
-      setHasUnsavedChanges(false);
-    };
-    const handleExitEditMode = async () => {
-      if (hasUnsavedChanges) {
-        setIsSaving(true);
-        await new Promise(resolve => setTimeout(resolve, 1500));
-        setDocument(prev => ({
-          ...prev,
-          lastSaved: new Date().toLocaleTimeString()
-        }));
-        setIsSaving(false);
-      }
-      setIsEditMode(false);
-      setHasUnsavedChanges(false);
-    };
-    const handleTitleChange = (newTitle: string) => {
-      setDocument(prev => ({
-        ...prev,
-        title: newTitle
-      }));
-      setHasUnsavedChanges(true);
-    };
-    const handleContentChange = (newContent: string) => {
-      setDocument(prev => ({
-        ...prev,
-        content: newContent
-      }));
-      setHasUnsavedChanges(true);
-    };
-    return <div style={{
-      position: 'relative',
-      height: '100vh',
-      background: '#f5f5f5'
-    }}>
-                <div style={{
-        maxWidth: '800px',
-        margin: '0 auto',
-        padding: '2rem',
-        background: 'white',
-        minHeight: '100vh',
-        boxShadow: '0 0 20px rgba(0,0,0,0.1)'
-      }}>
-                    <div style={{
-          borderBottom: '2px solid #e9ecef',
-          paddingBottom: '1rem',
-          marginBottom: '2rem'
-        }}>
-                        {isEditMode ? <input type="text" value={document.title} onChange={e => handleTitleChange(e.target.value)} style={{
-            fontSize: '2rem',
-            fontWeight: 'bold',
-            border: '2px solid #007bff',
-            outline: 'none',
-            width: '100%',
-            padding: '0.5rem',
-            borderRadius: '4px'
-          }} /> : <h1 style={{
-            margin: 0,
-            fontSize: '2rem'
-          }}>{document.title}</h1>}
-                        <p style={{
-            margin: '0.5rem 0 0',
-            fontSize: '0.875rem',
-            color: '#6c757d'
-          }}>
-                            Last saved: {document.lastSaved} | Status: {isSaving ? 'Saving...' : hasUnsavedChanges ? 'Unsaved changes' : 'All changes saved'}
-                        </p>
-                    </div>
-                    
-                    {isEditMode ? <textarea value={document.content} onChange={e => handleContentChange(e.target.value)} style={{
-          width: '100%',
-          height: '400px',
-          padding: '1rem',
-          border: '2px solid #007bff',
-          borderRadius: '8px',
-          fontSize: '1rem',
-          lineHeight: 1.6,
-          resize: 'vertical',
-          fontFamily: 'inherit'
-        }} placeholder="Start writing your document..." /> : <div style={{
-          padding: '1rem',
-          lineHeight: 1.8,
-          fontSize: '1rem',
-          minHeight: '400px',
-          whiteSpace: 'pre-wrap'
-        }}>
-                            {document.content}
-                        </div>}
-                    
-                    {isEditMode && <div style={{
-          marginTop: '1rem',
-          padding: '1rem',
-          background: hasUnsavedChanges ? '#fff3cd' : '#d1edff',
-          borderRadius: '8px',
-          fontSize: '0.875rem'
-        }}>
-                            {hasUnsavedChanges ? <>⚠️ You have unsaved changes. Click the save button to save your work.</> : <>✅ All changes saved.</>}
-                        </div>}
-                </div>
-                
-                <EditFAB canEdit={true} isEditMode={isEditMode} hasUnsavedChanges={hasUnsavedChanges} isSaving={isSaving} onEnterEditMode={handleEnterEditMode} onExitEditMode={handleExitEditMode} position={{
-        bottom: 32,
-        right: 32
-      }} />
-            </div>;
-  },
-  parameters: {
-    controls: {
-      disable: true
-    }
-  }
-}`,...(ie=(se=I.parameters)==null?void 0:se.docs)==null?void 0:ie.source}}};var oe,re,de;R.parameters={...R.parameters,docs:{...(oe=R.parameters)==null?void 0:oe.docs,source:{originalSource:`{
-  args: {
-    canEdit: true,
-    isEditMode: false,
-    hasUnsavedChanges: false,
-    isSaving: false,
-    onEnterEditMode: () => {},
-    onExitEditMode: () => {}
-  },
-  render: () => <div style={{
-    position: 'relative',
-    height: '100vh',
-    background: '#f8f9fa',
-    padding: '2rem'
-  }}>
-            <div style={{
-      display: 'grid',
-      gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-      gap: '2rem',
-      maxWidth: '1200px',
-      margin: '0 auto'
-    }}>
-                <div style={{
-        padding: '1.5rem',
-        background: 'white',
-        borderRadius: '8px',
-        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
-      }}>
-                    <h3>View Mode</h3>
-                    <p>Default state when not editing</p>
-                    <EditFAB canEdit={true} isEditMode={false} hasUnsavedChanges={false} isSaving={false} onEnterEditMode={() => {}} onExitEditMode={() => {}} position={{
-          bottom: 16,
-          right: 16
-        }} />
-                </div>
-                
-                <div style={{
-        padding: '1.5rem',
-        background: 'white',
-        borderRadius: '8px',
-        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
-      }}>
-                    <h3>Edit Mode (No Changes)</h3>
-                    <p>In edit mode but no changes made yet</p>
-                    <EditFAB canEdit={true} isEditMode={true} hasUnsavedChanges={false} isSaving={false} onEnterEditMode={() => {}} onExitEditMode={() => {}} position={{
-          bottom: 16,
-          right: 16
-        }} />
-                </div>
-                
-                <div style={{
-        padding: '1.5rem',
-        background: 'white',
-        borderRadius: '8px',
-        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
-      }}>
-                    <h3>Unsaved Changes</h3>
-                    <p>Changes made but not saved yet</p>
-                    <EditFAB canEdit={true} isEditMode={true} hasUnsavedChanges={true} isSaving={false} onEnterEditMode={() => {}} onExitEditMode={() => {}} position={{
-          bottom: 16,
-          right: 16
-        }} />
-                </div>
-                
-                <div style={{
-        padding: '1.5rem',
-        background: 'white',
-        borderRadius: '8px',
-        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
-      }}>
-                    <h3>Saving</h3>
-                    <p>Save operation in progress</p>
-                    <EditFAB canEdit={true} isEditMode={true} hasUnsavedChanges={true} isSaving={true} onEnterEditMode={() => {}} onExitEditMode={() => {}} position={{
-          bottom: 16,
-          right: 16
-        }} />
-                </div>
-            </div>
-        </div>,
-  parameters: {
-    controls: {
-      disable: true
-    }
-  }
-}`,...(de=(re=R.parameters)==null?void 0:re.docs)==null?void 0:de.source}}};const Fe=["Default","EditMode","WithUnsavedChanges","Saving","NoEditPermission","TopLeftPosition","Interactive","DocumentEditor","AllStates"];export{R as AllStates,w as Default,I as DocumentEditor,U as EditMode,_ as Interactive,T as NoEditPermission,k as Saving,z as TopLeftPosition,j as WithUnsavedChanges,Fe as __namedExportsOrder,Be as default};