@sheetxl/studio-vanilla 0.5.0 → 0.6.0

package/README.md

@@ -5,60 +5,40 @@
 ![npm](https://img.shields.io/npm/v/@sheetxl/studio-vanilla)
 ![license](https://img.shields.io/npm/l/@sheetxl/studio-vanilla)
 
-> The simplest way to embed the full SheetXL spreadsheet UI into any web page.
+> Embed the full SheetXL spreadsheet UI into any web page with zero dependencies.
 
-This package bundles [`@sheetxl/sdk`](https://www.npmjs.com/package/@sheetxl/sdk) and
-[`@sheetxl/studio-mui`](https://www.npmjs.com/package/@sheetxl/studio-mui) into a simple api for vanilla js.
+**This package bundles React and Material-UI (MUI) internally, but exposes a pure vanilla JavaScript API.**
+You do not need to install or use React or MUI directly—these are implementation details handled for you.
 
----
-
-## 🚀 Live ESM Development Server
-
-This package includes a **live development server** that acts like a CDN for rapid testing and development. This is perfect for:
-
-- Testing the library during development without building
-- Simulating CDN usage locally
-- Hot module replacement for instant feedback
-- Live ESM imports for modern development
+This makes it easy to use the full SheetXL spreadsheet UI in any web project, regardless of framework.
 
-### Quick Start (Development Server)
-
-1. **Start the dev server:**
-
-   ```bash
-   cd packages/studio-vanilla
-   pnpm dev
-   ```
+---
 
-2. **Open the dev interface:**
+Studio Vanilla can be used in a few ways.
 
-   Open [https://esm.sh/@sheetxl/studio-vanilla](https://esm.run/@sheetxl/studio-vanilla) in your browser
+---
 
-3. **Use as CDN in your projects:**
+## 1. Using a Bundler
 
-   ```html
-   <script type="module">
-     import { SheetXL } from 'https://esm.sh/@sheetxl/studio-vanilla';
+Using a bundler will provide the most configuration options when including in your application build.
 
-     // Your code here
-     await SheetXL.attachStudio('#sheetxl');
-   </script>
-   ```
+```bash
+# Using pnpm
+pnpm install @sheetxl/studio-vanilla
+```
 
-### Development Features
+After installation, you can import and use the SheetXL.attachStudio method.
 
-- ✅ **Hot Module Replacement**: Changes reflect instantly
-- ✅ **Source Maps**: Full debugging support
-- ✅ **ESM Imports**: Modern import syntax
-- ✅ **Live Demo**: Interactive testing interface
-- ✅ **CORS Headers**: Ready for cross-origin requests
-- ✅ **TypeScript**: Direct `.ts` imports supported
+```javascript
+import { SheetXL } from '@sheetxl/studio-vanilla';
 
----
+// The attach method will render the spreadsheet into the specified DOM element.
+SheetXL.attachStudio("#sheetxl");
+```
 
-## 1. Quickest Start (CDN)
+## 2. Quickest Start (CDN)
 
-For instant, no-build-step integration, add the following HTML snippet to your page. This is the primary use case for this package.
+For instant, no-build-step integration, add the following HTML snippet to your page.
 
 ```html
 <!DOCTYPE html>
@@ -69,29 +49,23 @@ For instant, no-build-step integration, add the following HTML snippet to your p
 <body>
   <div id="sheetxl" style="height: 600px; width: 100%;"></div>
   <script type="module">
-    (await import("https://esm.sh/@sheetxl/studio-vanilla")).default.attachStudio("#sheetxl");
+    (await import("https://cdn.jsdelivr.net/npm/@sheetxl/studio-vanilla/cdn/index.js")).default.attachStudio("#sheetxl");
   </script>
 </body>
 </html>
 ```
 
-## 2. Usage with a Bundler (via NPM)
+---
 
-You can also install this package via NPM if you prefer to include it in your application build.
+## API
 
-```bash
-# Using npm
-npm install @sheetxl/studio-vanilla
+- `SheetXL.attachStudio(selectorOrElement: string | HTMLElement, options?: object): void`
+  Renders the spreadsheet UI into the target element.
 
-# Using yarn
-yarn add @sheetxl/studio-vanilla
-```
+> **Note:** React and MUI are bundled internally. You do not need to install or import them yourself.
 
-After installation, you can import and use the SheetXL.attach method.
+---
 
-```javascript
-import { SheetXL } from '@sheetxl/studio-vanilla';
+## License
 
-// The attach method will render the spreadsheet into the specified DOM element.
-SheetXL.attachStudio("#sheetxl");
-```
+MIT

package/browser/cjs/{tNT3tUxdeIp_Iq2Y.cjs → 22kl71nVaWmNdpRv.cjs}

@@ -1,7 +1,7 @@
 "use strict";/**
- * @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.5.0
+ * @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.6.0
  *
  * (C) 2025-present SheetXL Inc. & Michael T. Ford
  * License: The license can be found at https://www.sheetxl.com/license.
- */Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./D68uE8Ovq38Aj-88.cjs"),S=["Ok","Cancel"],g=e.reactExports.memo(f=>{const{initialComments:h=null,onUpdateComments:c,context:C,onOption:u,onValidateOption:i,onDone:r,options:m=S,defaultOption:p=m?.[0],cancelOption:l="Cancel",sx:O,...E}=f,x=e.reactExports.useMemo(()=>{const t=h??C?.()?.getComments();let n="";if(t&&t.content&&t.content.runs){const s=t.content.runs;for(let o=0;o<s.length;o++){const P=s[o];n+=P?.text}}return n},[]),[a,T]=e.reactExports.useState(x),[j,y]=e.reactExports.useState(!1),d=e.reactExports.useCallback(async(t,n)=>null,[]),v=e.T(async t=>{const n=a===""?[]:a.split(`
+ */Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DQagtoVfvIHF73QE.cjs"),S=["Ok","Cancel"],g=e.reactExports.memo(f=>{const{initialComments:h=null,onUpdateComments:c,context:C,onOption:u,onValidateOption:i,onDone:r,options:m=S,defaultOption:p=m?.[0],cancelOption:l="Cancel",sx:O,...E}=f,x=e.reactExports.useMemo(()=>{const t=h??C?.()?.getComments();let n="";if(t&&t.content&&t.content.runs){const s=t.content.runs;for(let o=0;o<s.length;o++){const P=s[o];n+=P?.text}}return n},[]),[a,T]=e.reactExports.useState(x),[j,y]=e.reactExports.useState(!1),d=e.reactExports.useCallback(async(t,n)=>null,[]),v=e.T(async t=>{const n=a===""?[]:a.split(`
 `);if(t!==l){const s=[];for(let o=0;o<n.length;o++)s.push({text:n[o]});c?.({content:{runs:s}})}u?.(t,t===l,t===p),r?.()},[a,c,r,u,p,l]),F=e.T(t=>{T(t.target.value),d(t.target.value,null)},[i]),b=e.T(async t=>{let n=await Promise.resolve(i?.(t));try{n!==!1&&(n=await d(a,t))}catch{}return n??!0},[i,a]);return e.jsxRuntimeExports.jsx(e.S3,{title:(x?"Edit":"Insert")+" Comments",options:m,onDone:r,onOption:t=>v(t),onValidateOption:b,defaultOption:p,cancelOption:l,autoFocusSel:".autoFocus",sx:{width:"480px",...O},...E,children:e.jsxRuntimeExports.jsx(e.Box,{sx:{paddingTop:t=>t.spacing(1),paddingBottom:t=>t.spacing(0),rowGap:t=>t.spacing(1),display:"flex",flexDirection:"column"},children:e.jsxRuntimeExports.jsx(e.FormControl,{sx:{paddingTop:t=>t.spacing(1.5),minWidth:135,width:"100%"},size:"small",children:e.jsxRuntimeExports.jsx(e.TextField,{label:"Comments",placeholder:"Enter a comment.",onFocus:t=>{j||t.target?.select(),y(!0)},sx:{"& .MuiFormHelperText-root":{marginTop:t=>t.spacing(.5)}},InputLabelProps:{shrink:!0},InputProps:{inputProps:{className:"autoFocus",spellCheck:!1,autoComplete:"off",sx:{paddingTop:t=>t.spacing(1.25),paddingBottom:t=>t.spacing(.75),backgroundImage:`linear-gradient(${e.alpha("#fff",e.getOverlayAlpha(5))}, ${e.alpha("#fff",e.getOverlayAlpha(5))})`}}},value:a,onChange:F,onContextMenu:t=>{t.stopPropagation()}})})})})});exports.CommentsDialog=g,exports.default=g;