hyperbook 0.90.0 → 0.91.1

package/dist/assets/directive-pyide/style.css

@@ -5,6 +5,7 @@
   flex-direction: column;
   overflow: hidden;
   gap: 8px;
+  height: var(--pyide-height, calc(100dvh - 80px));
 }
 
 .directive-pyide code-input {
@@ -14,7 +15,9 @@
 .directive-pyide .container {
   width: 100%;
   overflow: hidden;
-  height: 200px;
+  min-height: 120px;
+  min-width: 120px;
+  flex: 0 0 200px;
   display: flex;
   flex-direction: column;
 }
@@ -35,6 +38,57 @@
   font-family: hyperbook-monospace, monospace;
 }
 
+.directive-pyide .output .error-line {
+  color: #b42318;
+}
+
+.directive-pyide .canvas-wrapper {
+  overflow: auto;
+  height: 100%;
+  border: 1px solid var(--color-spacer);
+  border-radius: 8px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.directive-pyide .canvas {
+  display: block;
+  width: auto;
+  height: auto;
+  min-height: 300px;
+}
+
+.directive-pyide .canvas-header,
+.directive-pyide .output-header {
+  border: 1px solid var(--color-spacer);
+  border-bottom: none;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  padding: 8px 16px;
+  background-color: var(--color-spacer);
+  color: var(--color-text);
+  font-weight: 600;
+  text-align: center;
+}
+
+.directive-pyide .canvas-output-splitter {
+  display: none;
+  width: 100%;
+  height: 4px;
+  margin: 10px 0;
+  cursor: row-resize;
+  background: var(--color-spacer);
+  border-radius: 999px;
+  flex-shrink: 0;
+  touch-action: none;
+  opacity: 0.45;
+  transition: opacity 0.15s ease-in-out;
+}
+
+.directive-pyide .canvas-output-splitter:hover {
+  opacity: 0.65;
+}
+
 .directive-pyide .hidden {
   display: none;
 }
@@ -43,7 +97,43 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  height: 400px;
+  min-height: 120px;
+  min-width: 120px;
+  flex: 1 1 400px;
+  overflow: hidden;
+}
+
+.directive-pyide .splitter {
+  background: var(--color-spacer);
+  border-radius: 999px;
+  flex-shrink: 0;
+  touch-action: none;
+  opacity: 0.45;
+  transition: opacity 0.15s ease-in-out;
+}
+
+.directive-pyide .splitter:hover {
+  opacity: 0.65;
+}
+
+.directive-pyide.split-vertical .splitter {
+  width: 100%;
+  height: 4px;
+  cursor: row-resize;
+}
+
+.directive-pyide.split-horizontal .splitter {
+  width: 4px;
+  height: 100%;
+  cursor: col-resize;
+}
+
+.directive-pyide.resizing {
+  user-select: none;
+}
+
+.directive-pyide.resizing .splitter {
+  opacity: 0.75;
 }
 
 .directive-pyide .editor {
@@ -52,6 +142,20 @@
   flex: 1;
 }
 
+.directive-pyide .editor.running {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.directive-pyide.locked-by-other {
+  outline: 2px solid #f59e0b;
+  outline-offset: 2px;
+}
+
+.directive-pyide.locked-by-other .buttons {
+  border-color: #f59e0b;
+}
+
 .directive-pyide .buttons {
   display: flex;
   border: 1px solid var(--color-spacer);
@@ -59,6 +163,7 @@
   border-bottom: none;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
+  overflow: hidden;
 }
 
 .directive-pyide .buttons.bottom {
@@ -90,10 +195,26 @@
   cursor: pointer;
 }
 
-.directive-pyide .buttons:last-child {
+.directive-pyide .buttons button:last-child {
   border-right: none;
 }
 
+.directive-pyide .buttons:not(.bottom) button:first-child {
+  border-top-left-radius: 8px;
+}
+
+.directive-pyide .buttons:not(.bottom) button:last-child {
+  border-top-right-radius: 8px;
+}
+
+.directive-pyide .buttons.bottom button:first-child {
+  border-bottom-left-radius: 8px;
+}
+
+.directive-pyide .buttons.bottom button:last-child {
+  border-bottom-right-radius: 8px;
+}
+
 .directive-pyide button.active {
   background-color: var(--color-spacer);
 }
@@ -108,24 +229,80 @@
   opacity: 0.5;
 }
 
+.directive-pyide button.stopping {
+  pointer-events: auto;
+  cursor: progress;
+  opacity: 0.75;
+}
+
+.directive-pyide button.locked {
+  color: #b45309;
+  font-weight: 600;
+}
+
+.directive-pyide button.fullscreen {
+  flex: 0 0 auto;
+  min-width: 42px;
+  width: 42px;
+  padding: 8px 0;
+}
+
+.directive-pyide button.stop {
+  flex: 0 0 auto;
+  min-width: 96px;
+  color: #b42318;
+}
+
+.directive-pyide button.stop:disabled {
+  color: var(--color-text);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.directive-pyide:fullscreen {
+  width: 100vw;
+  height: 100dvh !important;
+  padding: 12px;
+  box-sizing: border-box;
+  background-color: var(--color-background, var(--color--background, #fff));
+}
+
+.directive-pyide:fullscreen::backdrop {
+  background-color: var(--color-background, var(--color--background, #fff));
+}
+
 @media screen and (min-width: 1024px) {
   .directive-pyide {
     flex-direction: row;
-    height: calc(100dvh - 128px);
 
     .output {
       height: 100%;
     }
 
     .container {
-      flex: 1;
       height: 100% !important;
     }
 
     .editor-container {
-      flex: 3;
       height: 100%;
       overflow: hidden;
     }
   }
+
+  .directive-pyide[data-canvas="true"].canvas-split-mode .canvas-wrapper,
+  .directive-pyide[data-canvas="true"].canvas-split-mode .output {
+    flex: 1 1 0;
+    min-height: 120px;
+    border-radius: 8px;
+  }
+
+  .directive-pyide[data-canvas="true"].canvas-split-mode .canvas-wrapper,
+  .directive-pyide[data-canvas="true"].canvas-split-mode .output {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .directive-pyide[data-canvas="true"].canvas-split-mode .canvas-output-splitter {
+    display: block;
+  }
 }

package/dist/assets/directive-sqlide/style.css

@@ -3,6 +3,9 @@
   border-radius: 8px;
   background: #1e1e1e;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  height: var(--sqlide-height, calc(100dvh - 80px));
 
   .jo_iconButton.img_whole-window-dark {
     display: none;
@@ -19,6 +22,11 @@
   }
 }
 
+.directive-sqlide .sql-online {
+  flex: 1;
+  min-height: 0;
+}
+
 .directive-sqlide .menu {
   display: flex;
   border-top: 1px solid var(--color-spacer);

package/dist/assets/directive-typst/client.js

@@ -1148,6 +1148,92 @@ hyperbook.typst = (function () {
   // TYPST EDITOR
   // ============================================================================
 
+  function setupSplitter(elem, container, editorContainer, splitter) {
+    if (!container || !editorContainer || !splitter) return;
+
+    const minPanelSize = 120;
+
+    const getIsHorizontal = () =>
+      getComputedStyle(elem).flexDirection.startsWith('row');
+
+    const applySplitSize = (rawSize, isHorizontal) => {
+      const total = isHorizontal ? elem.clientWidth : elem.clientHeight;
+      const splitterSize = isHorizontal ? splitter.offsetWidth : splitter.offsetHeight;
+      const maxSize = Math.max(minPanelSize, total - splitterSize - minPanelSize);
+      const clamped = Math.max(minPanelSize, Math.min(rawSize, maxSize));
+      container.style.flex = `0 0 ${clamped}px`;
+      return clamped;
+    };
+
+    const applyStoredSplitSize = () => {
+      const isHorizontal = getIsHorizontal();
+      elem.classList.toggle('split-horizontal', isHorizontal);
+      elem.classList.toggle('split-vertical', !isHorizontal);
+      const key = isHorizontal ? 'splitHorizontal' : 'splitVertical';
+      const rawStored = Number(elem.dataset[key]);
+      if (!Number.isFinite(rawStored) || rawStored <= 0) {
+        container.style.flex = '';
+        return;
+      }
+      applySplitSize(rawStored, isHorizontal);
+    };
+
+    applyStoredSplitSize();
+
+    splitter.addEventListener('pointerdown', (event) => {
+      event.preventDefault();
+      splitter.setPointerCapture(event.pointerId);
+
+      const isHorizontal = getIsHorizontal();
+      const key = isHorizontal ? 'splitHorizontal' : 'splitVertical';
+      const startPointer = isHorizontal ? event.clientX : event.clientY;
+      const startSize = isHorizontal
+        ? container.getBoundingClientRect().width
+        : container.getBoundingClientRect().height;
+
+      elem.classList.add('resizing');
+
+      const onPointerMove = (moveEvent) => {
+        const pointer = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
+        const delta = pointer - startPointer;
+        const size = applySplitSize(startSize + delta, isHorizontal);
+        elem.dataset[key] = String(Math.round(size));
+      };
+
+      const onPointerUp = () => {
+        elem.classList.remove('resizing');
+        splitter.removeEventListener('pointermove', onPointerMove);
+        splitter.removeEventListener('pointerup', onPointerUp);
+        splitter.removeEventListener('pointercancel', onPointerUp);
+      };
+
+      splitter.addEventListener('pointermove', onPointerMove);
+      splitter.addEventListener('pointerup', onPointerUp);
+      splitter.addEventListener('pointercancel', onPointerUp);
+    });
+
+    window.addEventListener('resize', applyStoredSplitSize);
+  }
+
+  const updateFullscreenButtonState = (elem, button) => {
+    if (!elem || !button) return;
+    const isFullscreen = document.fullscreenElement === elem;
+    const label = i18nGet('ide-fullscreen-enter', 'Fullscreen');
+    button.textContent = '⛶';
+    button.title = label;
+    button.setAttribute('aria-label', label);
+    button.classList.toggle('active', isFullscreen);
+  };
+
+  const toggleFullscreen = async (elem) => {
+    if (!elem) return;
+    if (document.fullscreenElement === elem) {
+      await document.exitFullscreen();
+      return;
+    }
+    await elem.requestFullscreen();
+  };
+
   class TypstEditor {
     constructor({
       elem,
@@ -1178,13 +1264,24 @@ hyperbook.typst = (function () {
       this.preview = elem.querySelector('.typst-preview');
       this.loadingIndicator = elem.querySelector('.typst-loading');
       this.editor = elem.querySelector('.editor.typst');
+      this.editorContainer = elem.querySelector('.editor-container');
+      this.splitter = elem.querySelector('.splitter');
       this.sourceTextarea = elem.querySelector('.typst-source');
+      this.fullscreenBtn = elem.querySelector('.fullscreen');
+      this.editorInitialized = false;
+
+      setupSplitter(this.elem, this.previewContainer, this.editorContainer, this.splitter);
 
       // Setup UI callbacks
       this.setupUICallbacks();
 
       // Setup event handlers
       this.setupEventHandlers();
+      this.handleFullscreenChange = () => {
+        updateFullscreenButtonState(this.elem, this.fullscreenBtn);
+      };
+      document.addEventListener('fullscreenchange', this.handleFullscreenChange);
+      updateFullscreenButtonState(this.elem, this.fullscreenBtn);
 
       // Initialize
       this.initialize();
@@ -1208,12 +1305,14 @@ hyperbook.typst = (function () {
       const resetBtn = this.elem.querySelector('.reset');
       const addSourceFileBtn = this.elem.querySelector('.add-source-file');
       const addBinaryFileBtn = this.elem.querySelector('.add-binary-file');
+      const fullscreenBtn = this.elem.querySelector('.fullscreen');
 
       downloadBtn?.addEventListener('click', () => this.handleExportPdf());
       downloadProjectBtn?.addEventListener('click', () => this.handleExportProject());
       resetBtn?.addEventListener('click', () => this.handleReset());
       addSourceFileBtn?.addEventListener('click', () => this.handleAddSourceFile());
       addBinaryFileBtn?.addEventListener('click', (e) => this.handleAddBinaryFile(e));
+      fullscreenBtn?.addEventListener('click', () => this.handleFullscreenToggle());
     }
 
     /**
@@ -1221,8 +1320,9 @@ hyperbook.typst = (function () {
      */
     async initialize() {
       if (this.editor) {
-        // Edit mode - wait for code-input to load
-        this.editor.addEventListener('code-input_load', async () => {
+        const initializeEditor = async () => {
+          if (this.editorInitialized) return;
+          this.editorInitialized = true;
           await this.restoreState();
           this.uiManager.updateTabs();
           this.uiManager.updateBinaryFilesList();
@@ -1235,7 +1335,13 @@ hyperbook.typst = (function () {
             this.saveState();
             debouncedRerender();
           });
-        });
+        };
+
+        // Edit mode - wait for code-input to load (or initialize immediately if already ready)
+        this.editor.addEventListener('code-input_load', initializeEditor);
+        if (this.editor.querySelector('textarea')) {
+          await initializeEditor();
+        }
       } else if (this.sourceTextarea) {
         // Preview mode
         const initialCode = this.sourceTextarea.value;
@@ -1261,7 +1367,7 @@ hyperbook.typst = (function () {
       const result = await window.store?.typst?.get(this.id);
       
       if (result) {
-        this.editor.value = result.code;
+        this.setEditorValue(result.code || this.fileManager.getCurrentContent());
 
         if (result.sourceFiles) {
           this.fileManager.sourceFiles = result.sourceFiles;
@@ -1280,11 +1386,11 @@ hyperbook.typst = (function () {
           );
           if (file) {
             this.fileManager.currentFile = file;
-            this.editor.value = this.fileManager.getCurrentContent();
+            this.setEditorValue(this.fileManager.getCurrentContent());
           }
         }
       } else {
-        this.editor.value = this.fileManager.getCurrentContent();
+        this.setEditorValue(this.fileManager.getCurrentContent());
       }
     }
 
@@ -1294,11 +1400,11 @@ hyperbook.typst = (function () {
     async saveState() {
       if (!this.editor) return;
 
-      this.fileManager.updateCurrentContent(this.editor.value);
+      this.fileManager.updateCurrentContent(this.getEditorValue());
 
       await window.store?.typst?.put({
         id: this.id,
-        code: this.editor.value,
+        code: this.getEditorValue(),
         sourceFiles: this.fileManager.getSourceFiles(),
         binaryFiles: this.binaryFiles,
         currentFile: this.fileManager.currentFile.filename,
@@ -1311,7 +1417,7 @@ hyperbook.typst = (function () {
     rerender() {
       if (!this.editor) return;
 
-      this.fileManager.updateCurrentContent(this.editor.value);
+      this.fileManager.updateCurrentContent(this.getEditorValue());
 
       const mainFile = this.fileManager.findMainFile();
       const mainCode = mainFile 
@@ -1338,9 +1444,9 @@ hyperbook.typst = (function () {
      */
     handleFileSwitch(filename) {
       if (this.editor) {
-        this.fileManager.updateCurrentContent(this.editor.value);
+        this.fileManager.updateCurrentContent(this.getEditorValue());
         const content = this.fileManager.switchTo(filename);
-        this.editor.value = content;
+        this.setEditorValue(content);
         this.uiManager.updateTabs();
         this.saveState();
       }
@@ -1351,7 +1457,7 @@ hyperbook.typst = (function () {
      */
     handleFilesChange() {
       if (this.editor) {
-        this.editor.value = this.fileManager.getCurrentContent();
+        this.setEditorValue(this.fileManager.getCurrentContent());
       }
       this.saveState();
       this.rerender();
@@ -1389,7 +1495,7 @@ hyperbook.typst = (function () {
       }
 
       if (this.editor) {
-        this.editor.value = this.fileManager.getCurrentContent();
+        this.setEditorValue(this.fileManager.getCurrentContent());
       }
 
       this.uiManager.updateTabs();
@@ -1463,7 +1569,7 @@ hyperbook.typst = (function () {
      */
     async handleExportProject() {
       const mainFile = this.fileManager.findMainFile();
-      const code = mainFile ? mainFile.content : (this.editor ? this.editor.value : '');
+      const code = mainFile ? mainFile.content : this.getEditorValue();
 
       await this.exporter.export({
         code,
@@ -1489,6 +1595,40 @@ hyperbook.typst = (function () {
         window.location.reload();
       }
     }
+
+    async handleFullscreenToggle() {
+      try {
+        await toggleFullscreen(this.elem);
+      } catch (error) {
+        console.error(error.message);
+      }
+    }
+
+    getEditorValue() {
+      if (!this.editor) return '';
+      const textarea = this.editor.querySelector('textarea');
+      if (textarea) return textarea.value;
+      try {
+        if (typeof this.editor.value === 'string') {
+          return this.editor.value;
+        }
+      } catch (e) {}
+      return this.editor.textContent || '';
+    }
+
+    setEditorValue(value) {
+      if (!this.editor) return;
+      const normalizedValue = value ?? '';
+      const textarea = this.editor.querySelector('textarea');
+      if (textarea) {
+        textarea.value = normalizedValue;
+      }
+      try {
+        this.editor.value = normalizedValue;
+      } catch (e) {
+        this.editor.textContent = normalizedValue;
+      }
+    }
   }
 
   // ============================================================================

package/dist/assets/directive-typst/style.css

@@ -5,7 +5,7 @@
   flex-direction: column;
   overflow: hidden;
   gap: 8px;
-  height: calc(100dvh - 128px);
+  height: var(--typst-height, calc(100dvh - 80px));
 }
 
 code-input {
@@ -14,11 +14,14 @@ code-input {
 
 .directive-typst .preview-container {
   width: 100%;
+  min-height: 120px;
+  min-width: 120px;
   border: 1px solid var(--color-spacer);
   border-radius: 8px;
   overflow: auto;
   background-color: var(--color--background);
   position: relative;
+  flex: 1 1 0;
 }
 
 .directive-typst .typst-preview {
@@ -167,7 +170,42 @@ code-input {
   width: 100%;
   display: flex;
   flex-direction: column;
-  height: 400px;
+  min-height: 120px;
+  min-width: 120px;
+  flex: 1 1 0;
+}
+
+.directive-typst .splitter {
+  background: var(--color-spacer);
+  border-radius: 999px;
+  flex-shrink: 0;
+  touch-action: none;
+  opacity: 0.45;
+  transition: opacity 0.15s ease-in-out;
+}
+
+.directive-typst .splitter:hover {
+  opacity: 0.65;
+}
+
+.directive-typst.split-vertical .splitter {
+  width: 100%;
+  height: 4px;
+  cursor: row-resize;
+}
+
+.directive-typst.split-horizontal .splitter {
+  width: 4px;
+  height: 100%;
+  cursor: col-resize;
+}
+
+.directive-typst.resizing {
+  user-select: none;
+}
+
+.directive-typst.resizing .splitter {
+  opacity: 0.75;
 }
 
 .directive-typst .file-tabs {
@@ -398,6 +436,7 @@ code-input {
   border-bottom: none;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
+  overflow: hidden;
 }
 
 .directive-typst .buttons.bottom {
@@ -428,10 +467,17 @@ code-input {
   opacity: 0.6;
 }
 
-.directive-typst .buttons:last-child {
+.directive-typst .buttons button:last-child {
   border-right: none;
 }
 
+.directive-typst button.fullscreen {
+  flex: 0 0 auto;
+  min-width: 42px;
+  width: 42px;
+  padding: 8px 0;
+}
+
 .directive-typst button:hover {
   background-color: var(--color-spacer);
 }
@@ -447,10 +493,25 @@ code-input {
   display: none !important;
 }
 
+.directive-typst:fullscreen {
+  width: 100vw;
+  height: 100dvh !important;
+  padding: 12px;
+  box-sizing: border-box;
+  background-color: var(--color-background, var(--color--background, #fff));
+}
+
+.directive-typst:fullscreen::backdrop {
+  background-color: var(--color-background, var(--color--background, #fff));
+}
+
+.directive-typst:fullscreen.preview-only {
+  height: 100dvh !important;
+}
+
 @media screen and (min-width: 1024px) {
   .directive-typst:not(.preview-only) {
     flex-direction: row;
-    height: calc(100dvh - 128px);
 
     .preview-container {
       flex: 1;