@dskripchenko/embed 0.0.0-stage → 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,40 @@
+# @dskripchenko/embed
+
+## 1.0.0 — 2026-10-26
+
+First release.
+
+- **Loader** `dist/embed.js` (≈ 9 KB gzipped): a classic script that writes
+  the import map of the shared runtime — Vue 3.5.44, `@dskripchenko/ui`
+  1.16.0, `wysiwyg` 0.5.1, `diagrams` 1.1.0, `openapi` 1.1.1, `flow` 1.0.2,
+  pinned — composes with a page's own import map, defines the elements and
+  `window.DskEmbed`, and fetches each plugin when its first element appears.
+- **Fat bundle** `dist/embed.bundle.js` (≈ 563 KB gzipped): the same elements
+  and API with everything inside, no import map.
+- **Elements**: `<dsk-video>`, `<dsk-audio>`, `<dsk-diagram>`,
+  `<dsk-openapi>` (reference, operation, block), `<dsk-flow>` (view with
+  `poll-url` / `toggle-url` / `subgraph-url` conventions, or the editor),
+  `<dsk-markdown>`, `<dsk-editor>` (form-ready: `name`, `input`, `input` /
+  `change` events). Light DOM, attributes ↔ properties, `loading="lazy"`.
+- **Blocks**: a page-wide registry (`DskEmbed.blocks.register`) with the
+  live-block contract of the kit and the editor; built-in `mermaid`,
+  `openapi`, `flow`, `video`, `audio`; `DskEmbed.renderBlocks(root)` makes
+  stored HTML live, idempotently.
+- **Configuration**: theme (`light`, `dark`, `system`, or the page's
+  `data-theme`) and locale (`en`, `ru`, or the page's `lang`) for every
+  element from one place; one Vue app context for every mount.
+- **Events**: bubbling `dsk:*` DOM events and `DskEmbed.on/once/off/emit`;
+  `openapi-target` and `media-target` wire a process to an API reference and
+  a video declaratively.
+- The kit's locale is provided app-wide (`provideAppLocale`); the editor's
+  toolbar follows it. Video chapters come from the kit (`chapters`,
+  `seekToChapter`), with `playChapter()` and `dsk:chapter` /
+  `dsk:chapterchange` on top. Flow toggles persist through `persistToggle`
+  and report `{ ok }` in `dsk:toggle`. `<dsk-openapi proxy>` sends try-it
+  through the host (`proxySend`); a fixed `height` also sizes the
+  reference's sticky navigation (`--oa-viewport-h`).
+- The icons the packages import from `lucide-vue-next` (76, now only
+  openapi, flow and the editor's toolbar) are served as one file; pages
+  with players or markdown alone no longer fetch them.
+- `scripts/mirror.mjs` for self-hosting in the CDN's layout;
+  `dist/importmap.json` for pages that write their own map.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Denis Skripchenko
+
+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.

package/README.md

@@ -1,3 +1,128 @@
-# Temporary Holding Version
+# @dskripchenko/embed
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm](https://img.shields.io/npm/v/@dskripchenko/embed.svg)](https://www.npmjs.com/package/@dskripchenko/embed)
+[![license](https://img.shields.io/npm/l/@dskripchenko/embed.svg)](LICENSE)
+
+Video and audio players, Mermaid diagrams, OpenAPI references, process flows,
+live markdown and a WYSIWYG editor — as HTML tags on **any** page: plain HTML,
+a CMS, WordPress, Blade, React. One script from a CDN. The elements share one
+Vue and one UI kit, render each other's blocks, and talk through DOM events.
+
+[**English**](docs/en/getting-started.md) · [Русский](docs/ru/getting-started.md) · [Deutsch](docs/de/getting-started.md) · [中文](docs/zh/getting-started.md)
+
+```html
+<head>
+  <script src="https://cdn.jsdelivr.net/npm/@dskripchenko/embed@1/dist/embed.js"></script>
+</head>
+<body>
+  <dsk-flow src="/process.json" poll-url="/process/state" openapi-target="#api" media-target="#tour"></dsk-flow>
+  <dsk-video id="tour" src="/tour.mp4">
+    <track kind="chapters" src="/tour.chapters.vtt" default>
+  </dsk-video>
+  <dsk-openapi id="api" src="/openapi.yaml" height="720"></dsk-openapi>
+
+  <dsk-markdown>
+    <script type="text/markdown">
+      ```mermaid
+      sequenceDiagram
+        Shop->>Payments: charge
+      ```
+    </script>
+  </dsk-markdown>
+
+  <form method="post"><dsk-editor name="body"></dsk-editor></form>
+</body>
+```
+
+Clicking a process step opens its API operation and plays its chapter of the
+video; the markdown's diagram is live; the editor submits HTML with the form.
+
+## Elements
+
+| | | Built on |
+|---|---|---|
+| `<dsk-video>` | player: sources and quality menu, subtitles, chapters, thumbnails, HLS | [`@dskripchenko/ui`](https://github.com/dskripchenko/ui) |
+| `<dsk-audio>` | player, playlist, waveform | `@dskripchenko/ui` |
+| `<dsk-diagram>` | Mermaid → SVG, 11 diagram types, no Vue loaded | [`@dskripchenko/diagrams`](https://github.com/dskripchenko/diagrams) |
+| `<dsk-openapi>` | full reference (several specs), one operation, or a live API block | [`@dskripchenko/openapi`](https://github.com/dskripchenko/openapi) |
+| `<dsk-flow>` | process view with monitoring, toggles and sub-processes over plain HTTP — or the editor | [`@dskripchenko/flow`](https://github.com/dskripchenko/flow) |
+| `<dsk-markdown>` | markdown with live `mermaid` / `openapi` / `flow` / `video` / `audio` blocks | `@dskripchenko/ui` |
+| `<dsk-editor>` | WYSIWYG with the same live blocks; a form field | [`@dskripchenko/wysiwyg`](https://github.com/dskripchenko/wysiwyg) |
+
+All of them: attributes ↔ properties, `dsk:*` events, `ready`, `loading="lazy"`,
+light DOM (your CSS applies). → [Elements](docs/en/elements.md)
+
+## Working together
+
+- **One runtime.** The loader writes an import map pinning Vue, the kit and
+  the plugin packages to the exact versions of the release; every element and
+  live block renders in one Vue app context — one locale, one theme, one set
+  of block renderers.
+- **Blocks.** `DskEmbed.blocks.register('chart', renderer)` — the live-block
+  contract of the kit and the editor — makes ```` ```chart ```` live in
+  markdown, in the editor and in `DskEmbed.renderBlocks(root)`, which turns
+  stored HTML (`<pre><code class="language-…">`) into widgets. → [Blocks](docs/en/blocks.md)
+- **Configuration.** `DskEmbed.configure({ theme: 'light' | 'dark' | 'system', locale: 'en' | 'ru' })`,
+  or just the page's `<html data-theme lang>`. → [Configuration and events](docs/en/config-and-events.md)
+- **Events.** `DskEmbed.on('node', …)`, or `addEventListener('dsk:node', …)` on
+  any ancestor; React and other hosts use refs and plain listeners. →
+  [Frameworks](docs/en/frameworks.md)
+
+## Loader or bundle
+
+| | gzipped | |
+|---|---|---|
+| `dist/embed.js` — the loader | **9.1 KB** | Classic script; elements, API, import map. Everything else on demand. |
+| `dist/embed.bundle.js` — the fat bundle | **563 KB** (2.0 MB) | Everything inside; no import map, no further requests. |
+
+What the loader fetches on demand (gzip -9 of the published files; jsDelivr
+serves Brotli, a little smaller):
+
+| First element of… | Fetches | |
+|---|---|---|
+| any Vue element | Vue runtime 41.5 KB, `@dskripchenko/ui` 102.6 KB (its icons inside) + CSS 30.1 KB | once per page |
+| `<dsk-video>` / `<dsk-audio>` | plugin 3.5 KB; the HLS adapter 14.6 KB only for `.m3u8` | |
+| `<dsk-diagram>` | plugin 0.8 KB, `@dskripchenko/diagrams` 99.7 KB, kit tokens 2.4 KB | no Vue, no kit components |
+| `<dsk-openapi>` | plugin 1.4 KB, `@dskripchenko/openapi` 180.5 KB + CSS 10.5 KB, icons 5.2 KB | |
+| `<dsk-flow>` | plugin 2.5 KB, `@dskripchenko/flow` 79.9 KB + CSS 4.6 KB, icons 5.2 KB; the Mermaid import (2.4 KB + diagrams) only for Mermaid sources and the editor | |
+| `<dsk-markdown>` | plugin 0.5 KB | blocks load their own plugins |
+| `<dsk-editor>` | plugin 1.1 KB, `@dskripchenko/wysiwyg` 18.2 KB + CSS 2.3 KB, icons 5.2 KB | |
+
+The icons file (76 icons, one file) is shared: fetched once, by the first of
+openapi, flow and the editor.
+
+→ [Getting started](docs/en/getting-started.md): snippets, self-hosting,
+composing with your own import map, CSP, versioning.
+
+## Browsers
+
+Current Chromium, Safari and Firefox. The loader needs import maps; there is
+no legacy build. Tested in Chromium and WebKit (Playwright): both builds,
+both themes, both languages, desktop and phone.
+
+## Known limitations
+
+- **The theme is page-wide** (`<html data-theme>`): the kit's themes are
+  defined on `:root`, and its menus and dialogs live in `<body>`.
+
+## Development
+
+```bash
+pnpm install
+pnpm build              # dist/ and the size table
+pnpm test               # unit tests (vitest, jsdom)
+pnpm lint && pnpm typecheck
+node scripts/fixtures.mjs           # media fixtures for the browser check (ffmpeg)
+pnpm check:browser                  # Chromium + WebKit against a local mirror of the CDN
+node scripts/mirror.mjs <dir>       # self-hosting: the runtime in the CDN's layout
+node scripts/demo.mjs <dir> --local # the demo page (examples/demo) for a host site
+```
+
+The browser check serves `node_modules` the way jsDelivr serves npm
+(`/npm/<pkg>@<version>/…`, exact versions only) from a second origin, so the
+import map, cross-origin module loading and the version pins are exercised
+for real.
+
+## License
+
+[MIT](LICENSE)

package/dist/chunks/attrs-DGIcWUXu.js

@@ -0,0 +1 @@
+var e=[{prop:`locale`,type:`string`},{prop:`loading`,type:`enum`,values:[`lazy`,`eager`]}],t=[{prop:`src`,type:`string`},{prop:`loop`,type:`boolean`},{prop:`preload`,type:`enum`,values:[`none`,`metadata`,`auto`]},{prop:`crossorigin`,type:`enum`,values:[``,`anonymous`,`use-credentials`]},{prop:`exclusive`,type:`boolean`},{prop:`resumeKey`,type:`string`},{prop:`rates`,type:`numbers`},{prop:`hotkeys`,type:`boolean`},{prop:`hlsOptions`,type:`json`}];[...e,...t],[...e,...t],[...e],[...e],[...e],[...e],[...e];function n(e){if(typeof e==`number`&&Number.isFinite(e))return String(e);if(typeof e==`string`&&e.trim()!==``)return e.trim().replace(/\s*[:/]\s*/,` / `)}function r(e,t){return typeof e==`number`&&Number.isFinite(e)?`${e}px`:typeof e==`string`&&e.trim()!==``?/^\d+(\.\d+)?$/.test(e.trim())?`${e.trim()}px`:e.trim():t}export{r as n,n as t};

package/dist/chunks/runtime-BsSsgPsG.js

@@ -0,0 +1 @@
+import{computed as e,createApp as t,createVNode as n,defineComponent as r,h as i,render as a,shallowReactive as o,shallowRef as s}from"vue";import{en as c,markdownBlockRenderersKey as l,provideAppLocale as u,provideLocale as d,ru as f}from"@dskripchenko/ui";var p=o({locale:`en`,theme:`light`,renderers:{}}),m=null,h=null,g={};function _(e){if(h)return;h=e,m=t({render:()=>null}),m.config.errorHandler=(e,t,n)=>{console.error(`[dsk-embed] ${n}:`,e)},m.provide(l,g),u(m,()=>y(p.locale));let n=()=>{let t=e.config();p.locale=t.locale,p.theme=t.resolvedTheme},r=()=>{let t=e.blocks.all();for(let e of Object.keys(g))e in t||delete g[e];Object.assign(g,t),p.renderers=t};n(),r(),e.onConfig(n),e.blocks.subscribe(r)}function v(){if(!h)throw Error(`the embed runtime is not set up`);return h}function y(e){return e===`ru`?f:c}var b=r({name:`DskEmbedLocale`,props:{locale:{type:Function,required:!0},content:{type:Function,required:!0}},setup(t){return d(e(()=>y(t.locale()))),()=>t.content()}}),x=r({name:`DskEmbedContent`,props:{content:{type:Function,required:!0}},setup(e){return()=>e.content()}});function S(e,t,r){if(!m)throw Error(`the embed runtime is not set up`);let i=r?n(b,{locale:r,content:t}):n(x,{content:t});return i.appContext=m._context,a(i,e),{unmount(){a(null,e)}}}function C(e,t){let n=o({props:e.props(),source:e.source(),children:e.children(),locale:e.locale()}),r=e.host.onConfig(()=>{n.locale=e.locale()}),i=e.el.hasAttribute(`locale`)||typeof e.props().locale==`string`,a=S(e.container,()=>t(n),i?()=>n.locale:void 0);return{view:n,refresh(){n.props=e.props(),n.source=e.source(),n.children=e.children(),n.locale=e.locale()},unmount(){r(),a.unmount()}}}function w(){let e=s(null);return{ref:e,set:t=>{e.value=t??null}}}var T=/* @__PURE__ */ new Map;function E(e){let t=T.get(e);return t||(t=fetch(e,{credentials:`same-origin`}).then(t=>{if(!t.ok)throw Error(`${e}: HTTP ${t.status}`);return t.text()}),t.catch(()=>T.delete(e)),T.set(e,t)),t}function D(e){return e instanceof Error?e.message:String(e)}var O=i;export{C as a,_ as c,w as i,p as l,E as n,S as o,O as r,v as s,D as t};