windcraft-editor 0.1.0 → 0.1.1

package/LICENSE

@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2026 Swapnil Jadhav
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Third-party code included in this repository is licensed under its own terms; see THIRD_PARTY_LICENSES.md.

package/README.md

@@ -1,9 +1,13 @@
-# @windcraft/editor
+# windcraft-editor
+
+```bash
+npm install windcraft-editor
+```
 
 The Windcraft visual editor (HTML + Tailwind): canvas, layers, Properties panel, code panel and pages. It has no backend of its own: the page that mounts it gives it a **host** that loads and saves.
 
 ```js
-import { mountEditor } from "@windcraft/editor";
+import { mountEditor } from "windcraft-editor";
 
 await mountEditor(document.getElementById("root"), {
     host,   // saving, projects, AI and the address: see design/host.js
@@ -18,7 +22,7 @@ await mountEditor(document.getElementById("root"), {
 | Run the demo | `npm run demo`, then open http://localhost:4000/editor/demo/ |
 | Windcraft's own host | `src/public/js/app-host.js` |
 
-The page must map `@windcraft/core/` and `@windcraft/editor/` to where they are served (an import map, as in `demo/index.html`, or a bundler). `mountEditor` loads Tailwind's play CDN (v3) unless you pass `tailwind: false`. One editor per page; it takes over the page's size, keys and zoom.
+The package carries the Tailwind logic inside it (`core/`) and reaches it by relative paths, so there is nothing else to map. On a plain page map `windcraft-editor` to `<where you serve the package>/editor/index.js` with an import map; a bundler does that itself (an import map, as in `demo/index.html`, or a bundler). `mountEditor` loads Tailwind's play CDN (v3) unless you pass `tailwind: false`. One editor per page; it takes over the page's size, keys and zoom.
 
 The AI panel and "Generate" need `host.generate`; without a working one they show its error.
 
@@ -27,7 +31,7 @@ The AI panel and "Generate" need `host.generate`; without a working one they sho
 `embedEditor` puts the editor in an element of your page, isolated in an iframe (its own keys, zoom and styles), so several can share a page and it fills whatever size you give it. Leave out the parts you don't need with `ui`; keep the code box and the details form in your own page.
 
 ```js
-import { embedEditor } from "@windcraft/editor";
+import { embedEditor } from "windcraft-editor";
 
 const ed = embedEditor(el, {
     host,                                    // saving, as above

package/{design → editor/design}/classes-section.js

@@ -3,7 +3,7 @@
 // They act through `actions`, which the editor provides:
 //   setClassesText(text) · setStyle(css | null) · setAttribute(name, value | null)
 import { html, useState, useEffect, useRef } from "../vendor/preact-htm.js";
-import { parseToken } from "@windcraft/core/class-groups.js";
+import { parseToken } from "../../core/class-groups.js";
 import { TextInput } from "./controls.js";
 
 /** "color: red; margin: 0" -> [["color","red"],["margin","0"]] */

package/{design → editor/design}/controls.js

@@ -3,7 +3,7 @@
 // and a colour field. Each keeps what is being typed in its own state and reports changes through callbacks; none reads the
 // page or the editor's state. Their classes are the ones canvas.handlebars styles.
 import { html, useState, useRef } from "../vendor/preact-htm.js";
-import { HUES, SHADES, SPECIAL_COLORS } from "@windcraft/core/class-groups.js";
+import { HUES, SHADES, SPECIAL_COLORS } from "../../core/class-groups.js";
 
 /**
  * What a typed-in field needs: it shows `value` until it is focused, keeps what is typed in its own state (a redraw with the

package/{design → editor/design}/design-tab.js

@@ -3,7 +3,7 @@
 // frame's breakpoint) through useUi() and act through `actions`, which the editor provides:
 //   select(path) · move(dir) · duplicate() · remove() · setTag(tag) · setBreakpoint(bp) · setState(st) · setText(text) · setAttr(name, value)
 import { html, useState } from "../vendor/preact-htm.js";
-import { BREAKPOINT_WIDTH, parseToken } from "@windcraft/core/class-groups.js";
+import { BREAKPOINT_WIDTH, parseToken } from "../../core/class-groups.js";
 import { TAG_KINDS, variant } from "./panel-model.js";
 import { useUi } from "./panel-state.js";
 import { TextInput, TextArea, SelectInput, Field } from "./controls.js";

package/{design → editor/design}/editor/designs.js

@@ -1,7 +1,7 @@
 import { parseComponentSource, buildPreviewDocument } from "../../playground/component-source.js";
 import { host } from "../host.js";
-import { normalizeGroup } from "@windcraft/core/pages.js";
-import { GAP_X } from "@windcraft/core/board-layout.js";
+import { normalizeGroup } from "../../../core/pages.js";
+import { GAP_X } from "../../../core/board-layout.js";
 import { DEVICES } from "../float-toolbar.js";
 import { $, S, collapsed, data, esc, frame, model, send } from "./base.js";
 import { MIN_H, applyView, canvas, fitTo, heightOfDoc, layout, pageGroupOf, placePills, positions, view, widthOf } from "./plane.js";

package/{design → editor/design}/editor/inspector.js

@@ -1,9 +1,9 @@
 import { panelStore, togglePalette, toggleSection } from "../panel-state.js";
-import { BREAKPOINT_WIDTH, setGroup, getGroup, GROUPS, parseToken } from "@windcraft/core/class-groups.js";
+import { BREAKPOINT_WIDTH, setGroup, getGroup, GROUPS, parseToken } from "../../../core/class-groups.js";
 import { renderPanel } from "../panel.js";
 import { inspectorView, variant, val, srcOf, modeFor } from "../panel-model.js";
 import { checkTags } from "../code-view.js";
-import { groupOf, variantOf, twShown, hasScale, twValue, fromPx, tokenFor } from "@windcraft/core/prop-tailwind.js";
+import { groupOf, variantOf, twShown, hasScale, twValue, fromPx, tokenFor } from "../../../core/prop-tailwind.js";
 import { normalizeValue } from "../css-props.js";
 import { host } from "../host.js";
 import { $, S, data, model, send } from "./base.js";

package/{design → editor/design}/editor/plane.js

@@ -1,4 +1,4 @@
-import { computeLayout } from "@windcraft/core/board-layout.js";
+import { computeLayout } from "../../../core/board-layout.js";
 import { $, DEFAULT_W, S, data, frame, send } from "./base.js";
 import { docs, wraps } from "./designs.js";
 import { placeFloat, renderFloat, renderFrameSel } from "./frame-handles.js";

package/{design → editor/design}/figma-sections.js

@@ -5,8 +5,8 @@
 //   setProp · setProps · resetProp · setGeom · freePosition · align · arrange · group · ungroup · autoLayout · sizeItMyself
 import { html, useState } from "../vendor/preact-htm.js";
 import { srcOf, shownOf, ownsValue, styled, val, variant, modeFor, PRESETS, OPTS } from "./panel-model.js";
-import { parseToken } from "@windcraft/core/class-groups.js";
-import { tokenFor } from "@windcraft/core/prop-tailwind.js";
+import { parseToken } from "../../core/class-groups.js";
+import { tokenFor } from "../../core/prop-tailwind.js";
 import { useUi } from "./panel-state.js";
 import { TextInput } from "./controls.js";
 

package/{design → editor/design}/panel-model.js

@@ -1,8 +1,8 @@
 // What the Properties panel draws from: the data tables behind its controls (suggestions, options, tags), small selectors
 // that read the selection and the panel's state (panel-state.js), and inspectorView, which says what the panel shows. The
 // components themselves are in panel.js, design-tab.js, figma-sections.js, style-sections.js, prop-sections.js and classes-section.js.
-import { HUES, SHADES, SPECIAL_COLORS, STEPS, SIZES, MAX_W, GROUPS, getGroup, parseToken } from "@windcraft/core/class-groups.js";
-import { twShown } from "@windcraft/core/prop-tailwind.js";
+import { HUES, SHADES, SPECIAL_COLORS, STEPS, SIZES, MAX_W, GROUPS, getGroup, parseToken } from "../../core/class-groups.js";
+import { twShown } from "../../core/prop-tailwind.js";
 import { panelStore } from "./panel-state.js";
 
 const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));

package/{design → editor/design}/style-sections.js

@@ -11,8 +11,8 @@ import { useUi } from "./panel-state.js";
 import { TextInput, ColorInput } from "./controls.js";
 import { GroupColor } from "./group-controls.js";
 import { I, IconBtn, NumField, FSection, Sub, PropField, PropSelect, TwField, TwSelect, num, owns, has, off, comp, srcKind, srcNote, atVariant } from "./figma-sections.js";
-import { twShown } from "@windcraft/core/prop-tailwind.js";
-import { brandScale, normalizeTheme } from "@windcraft/core/theme.js";
+import { twShown } from "../../core/prop-tailwind.js";
+import { brandScale, normalizeTheme } from "../../core/theme.js";
 import { data } from "./editor/base.js";
 import { PropRow } from "./prop-sections.js";
 

package/{index.js → editor/index.js}

@@ -1,11 +1,11 @@
-// @windcraft/editor: the visual editor as a package.
+// windcraft-editor: the visual editor as a package.
 //
-//   import { mountEditor } from "@windcraft/editor";
+//   import { mountEditor } from "windcraft-editor";
 //   await mountEditor(document.getElementById("root"), { host, data });
 //
 // `host` is what the editor needs from the app around it (design/host.js lists it): saving, projects, the AI and the page address.
-// `data` is the design to open (below). The page must map "@windcraft/core/" and "@windcraft/editor/" to where those packages are
-// served (an import map, or a bundler does it). One editor per page: it takes over the page's size and keyboard.
+// `data` is the design to open (below). The page must serve this package's files and, for a plain browser page, map "windcraft-editor"
+// to editor/index.js with an import map (a bundler does that itself). One editor per page: it takes over the page's size and keyboard.
 import { setHost } from "./design/host.js";
 import { config } from "./design/config.js";
 import { editorHtml } from "./template.js";

package/{playground → editor/playground}/component-source.js

@@ -1,4 +1,4 @@
-import { themeHead } from "@windcraft/core/theme.js";
+import { themeHead } from "../../core/theme.js";
 const TAILWIND_RE = /tailwindcss|@tailwindcss\/browser/i;
 
 const isTailwindScript = (s) => s.src && TAILWIND_RE.test(s.src);

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "windcraft-editor",
-    "version": "0.1.0",
-    "description": "Windcraft's visual HTML + Tailwind editor. Mount it in a page and give it a host that loads and saves designs. Includes @windcraft/core.",
+    "version": "0.1.1",
+    "description": "Windcraft's visual HTML + Tailwind editor. Mount it in a page and give it a host that loads and saves designs.",
     "keywords": [
         "tailwind",
         "tailwindcss",
@@ -23,29 +23,18 @@
     "bugs": {
         "url": "https://github.com/Tolaj/windcraft/issues"
     },
-    "main": "index.js",
+    "main": "editor/index.js",
     "exports": {
-        ".": "./index.js",
+        ".": "./editor/index.js",
         "./*": "./*"
     },
     "files": [
-        "index.js",
-        "embed.js",
-        "embed.html",
-        "embed-frame.js",
-        "template.js",
-        "styles.css",
-        "design",
-        "playground",
-        "vendor",
+        "editor",
         "core",
+        "LICENSE",
         "README.md"
     ],
     "publishConfig": {
         "access": "public"
-    },
-    "scripts": {
-        "prepack": "node scripts/bundle-core.mjs",
-        "postpack": "node scripts/bundle-core.mjs clean"
     }
 }