@dskripchenko/embed 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @dskripchenko/embed
 
+## 1.2.0 — Unreleased
+
+### Added
+- **Full screen** for `<dsk-diagram>`, `<dsk-flow>`, `<dsk-board>` and
+  `<dsk-openapi>`: a button on hover puts the element full screen (the
+  Fullscreen API, or the whole window where it is not available); Escape or
+  the button leaves. Flows and boards fit their content to the new size.
+  `fullscreen="false"` hides the button; `enterFullscreen()`,
+  `exitFullscreen()`, `fullscreen`, `dsk:fullscreen` `{ active }`.
+
 ## 1.1.0 — 2026-10-29
 
 ### Added

package/README.md

@@ -51,7 +51,7 @@ video; the markdown's diagram is live; the editor submits HTML with the form.
 | `<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)
+light DOM (your CSS applies); diagrams, flows, boards and references open full screen. → [Elements](docs/en/elements.md)
 
 ## Working together
 

package/dist/chunks/fullscreen-Bb8W3ga9.js

@@ -0,0 +1 @@
+function e(e){return e.head.querySelector(`link[rel="stylesheet"]:not([data-dsk-embed]), style:not([data-dsk-embed])`)}function t(e){let t=e.head.querySelectorAll(`link[data-dsk-embed], style[data-dsk-embed]`);return t.length>0?t[t.length-1]:null}function n(n,r){let i=t(n);if(i)i.after(r);else{let t=e(n);t?t.before(r):n.head.appendChild(r)}}function r(e,t,r=document){if(r.querySelector(`style[data-dsk-embed="${e}"]`))return;let i=r.createElement(`style`);i.setAttribute(`data-dsk-embed`,e),i.textContent=t,n(r,i)}var i={en:{enter:`Full screen`,exit:`Exit full screen`},ru:{enter:`Во весь экран`,exit:`Выйти из полноэкранного режима`}},a=`<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>`,o=`<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M16 21v-3a2 2 0 0 1 2-2h3"/></svg>`;function s(e,t,n){r(`fullscreen`,`:where(dsk-diagram,dsk-flow,dsk-board,dsk-openapi)[data-dsk-state=ready]{position:relative}.dsk-fs-button{z-index:20;border:1px solid var(--uid-border-subtle,#e5e7eb);border-radius:var(--uid-radius-md,8px);background:var(--uid-surface-raised,#fff);width:30px;height:30px;color:var(--uid-text-secondary,#4b5563);cursor:pointer;opacity:0;justify-content:center;align-items:center;padding:0;transition:opacity .15s;display:inline-flex;position:absolute;top:8px;right:8px;box-shadow:0 2px 8px #0f172a14}:where(dsk-diagram,dsk-flow,dsk-board,dsk-openapi):hover>.dsk-fs-button,.dsk-fs-button:focus-visible,[data-dsk-fullscreen]>.dsk-fs-button{opacity:1}.dsk-fs-button:hover{color:var(--uid-text-primary,#111827)}@media (hover:none){.dsk-fs-button{opacity:1}}dsk-board>.dsk-fs-button,dsk-flow>.dsk-fs-button{left:8px;right:auto}dsk-openapi>.dsk-fs-button{top:auto;bottom:8px}:where(dsk-diagram,dsk-flow,dsk-board,dsk-openapi)[data-dsk-fullscreen]{--dsk-flow-height:100vh;--dsk-board-height:100vh;--dsk-openapi-height:calc(100vh - 32px);box-sizing:border-box;background:var(--uid-surface,#fff);overflow:auto}:where(dsk-diagram,dsk-openapi)[data-dsk-fullscreen]{padding:16px}[data-dsk-fullscreen] .dsk-flow-frame,[data-dsk-fullscreen] .dsk-board-frame{border:0;border-radius:0}dsk-diagram[data-dsk-fullscreen] .dsk-diagram{justify-content:center;align-items:center;min-height:calc(100vh - 32px);display:flex}dsk-diagram[data-dsk-fullscreen] .dsk-diagram svg{width:100%!important;max-width:none!important;height:calc(100vh - 32px)!important}.dsk-fs-fallback{z-index:2147483000;inset:0;margin:0!important;position:fixed!important}.dsk-fs-locked,.dsk-fs-locked body{overflow:hidden!important}`,e.ownerDocument);let s=document.createElement(`button`);s.type=`button`,s.className=`dsk-fs-button`;let c=i[t===`ru`?`ru`:`en`],l=!1,u=!1,d=()=>{let e=l?c.exit:c.enter;s.innerHTML=l?o:a,s.setAttribute(`aria-label`,e),s.title=e,s.setAttribute(`aria-pressed`,String(l))},f=t=>{t!==l&&(l=t,t?document.addEventListener(`keydown`,p):document.removeEventListener(`keydown`,p),e.toggleAttribute(`data-dsk-fullscreen`,t),d(),n(t))},p=e=>{e.key===`Escape`&&l&&_()},m=()=>{u||f(document.fullscreenElement===e)};function h(){u=!0,e.classList.add(`dsk-fs-fallback`),document.documentElement.classList.add(`dsk-fs-locked`),f(!0)}function g(){if(l)return;let t=e.requestFullscreen;document.fullscreenEnabled&&typeof t==`function`?t.call(e).catch(h):h()}function _(){l&&(u?(u=!1,e.classList.remove(`dsk-fs-fallback`),document.documentElement.classList.remove(`dsk-fs-locked`),f(!1)):document.fullscreenElement===e?document.exitFullscreen().catch(()=>f(!1)):f(!1))}return s.addEventListener(`click`,e=>{e.stopPropagation(),l?_():g()}),s.addEventListener(`pointerdown`,e=>e.stopPropagation()),document.addEventListener(`fullscreenchange`,m),d(),e.appendChild(s),{get active(){return l},enter:g,exit:_,toggle:()=>l?_():g(),relabel(e){c=i[e===`ru`?`ru`:`en`],d()},destroy(){_(),document.removeEventListener(`fullscreenchange`,m),s.remove()}}}function c(e,t){return e.el.getAttribute(`fullscreen`)===`false`?null:s(e.el,e.locale(),n=>{if(e.emit(`fullscreen`,{active:n}),!t)return;let r=!1,i=()=>{r||(r=!0,a?.disconnect(),requestAnimationFrame(()=>{try{t()}catch{}}))},a=typeof ResizeObserver==`function`?new ResizeObserver(()=>setTimeout(i,50)):null;a?.observe(e.el),setTimeout(i,400)})}export{c as t};