@kubohiroya/turbowarp-plus-editor-layout 0.1.12 → 0.1.14

package/dist/stage-surface.d.ts

@@ -15,7 +15,7 @@ export declare function stageDockActionLabel(locale: string, { drawer, detached,
     drawer?: boolean;
     detached: boolean;
     external?: boolean;
-}): "ドックに戻す" | "Dock stage" | "ステージを別ウィンドウで開く" | "別ウィンドウで開く" | "Open in a separate window" | "アンドック" | "Undock stage";
+}): "ステージをエディターに戻す" | "Dock stage" | "ステージを別ウィンドウで開く" | "別ウィンドウで開く" | "Open in a separate window" | "アンドック" | "Undock stage";
 type StagePlacement = Pick<NonNullable<ReturnType<typeof useDockviewStage>>, 'surface' | 'inlineRef' | 'docked'>;
 export declare function createStageSurface(React: typeof import('react'), { context, EdgeDrawer, Panel }: {
     context: Context<{

package/dist/stage-surface.js

@@ -53,7 +53,7 @@ const isJapanese = (locale) => /^ja(?:-|$)/i.test(locale);
 export function stageDockActionLabel(locale, { drawer, detached, external }) {
     const japanese = isJapanese(locale);
     if (detached)
-        return japanese ? 'ドックに戻す' : 'Dock stage';
+        return japanese ? 'ステージをエディターに戻す' : 'Dock stage';
     if (external)
         return japanese ? (drawer ? 'ステージを別ウィンドウで開く' : '別ウィンドウで開く') : 'Open in a separate window';
     return japanese ? 'アンドック' : 'Undock stage';
@@ -81,7 +81,8 @@ export function createStageSurface(React, { context, EdgeDrawer, Panel }) {
             edge: 'right',
             label: japanese ? 'ステージを展開' : 'Reveal stage',
             onOpenChange: setStageDrawerOpen,
-            portalContent: Boolean(placement)
+            portalContent: Boolean(placement),
+            holdOpenSelector: '[data-turbowarp-app-shell-source-chooser][role="dialog"][aria-modal="true"]'
         }, inline) : inline;
         return placement ? React.createElement(React.Fragment, null, dock, createPortal(panel, placement.surface)) : dock;
     };

package/dist/standard-layout.d.ts

@@ -16,12 +16,13 @@ export declare function createStandardLayout(React: any, { styles, targetStyles,
         Container: any;
         render: any;
     }) => any;
-    EdgeDrawer: ({ edge, label, pinned, onOpenChange, portalContent, children }: {
+    EdgeDrawer: ({ edge, label, pinned, onOpenChange, portalContent, holdOpenSelector, children }: {
         edge: any;
         label: any;
         pinned?: boolean;
         onOpenChange: any;
         portalContent?: boolean;
+        holdOpenSelector?: string;
         children: any;
     }) => any;
     TargetLayout: ({ compact, render }: {

package/dist/standard-layout.js

@@ -12,7 +12,7 @@ export function createStandardLayout(React, { styles, targetStyles, context, Lay
     const targetTools = React.createContext(null);
     function StandardLayout({ enabled, splitter, windowLayout, stageActionEnabled, stageDrawer = false, onPaletteModeChange, windowTools, Container, render, ...props }) {
         const [showUndock, setShowUndock] = useState(false);
-        const [targetsPinned, setTargetsPinned] = useState(false);
+        const [targetsPinned, setTargetsPinned] = useState(true);
         const [showStage, setShowStage] = useState(true);
         const [stageDrawerOpen, setStageDrawerOpen] = useState(false);
         const [size, setSize] = useState(null);
@@ -136,13 +136,33 @@ export function createStandardLayout(React, { styles, targetStyles, context, Lay
                 stageDrawer: plusLayout && stageDrawer, setStageDrawerOpen, locale: props.locale
             } }, Container ? element(Container, { locale: props.locale }, layout) : layout);
     }
-    function EdgeDrawer({ edge, label, pinned = false, onOpenChange, portalContent = false, children }) {
+    function EdgeDrawer({ edge, label, pinned = false, onOpenChange, portalContent = false, holdOpenSelector = '', children }) {
         const [hovered, setHovered] = useState(false);
         const [engaged, setEngaged] = useState(false);
+        const [heldOpen, setHeldOpen] = useState(false);
         const drawer = useRef(null);
         const trigger = useRef(null);
         const panel = useRef(null);
-        const open = pinned || hovered || engaged;
+        const open = pinned || hovered || engaged || heldOpen;
+        useLayoutEffect(() => {
+            if (!holdOpenSelector)
+                return;
+            const node = panel.current;
+            const view = node.ownerDocument.defaultView;
+            if (!view)
+                return;
+            const update = () => setHeldOpen(Array.from(node.querySelectorAll(holdOpenSelector)).some(element => !element.hasAttribute('hidden') && element.getAttribute('aria-hidden') !== 'true' &&
+                view.getComputedStyle(element).display !== 'none'));
+            const observer = new view.MutationObserver(records => {
+                if (records.some(record => record.type === 'childList' ||
+                    record.target.matches(holdOpenSelector)))
+                    update();
+            });
+            observer.observe(node, { subtree: true, childList: true, attributes: true,
+                attributeFilter: ['style', 'hidden', 'aria-hidden'] });
+            update();
+            return () => observer.disconnect();
+        }, [holdOpenSelector]);
         useLayoutEffect(() => { onOpenChange?.(open); }, [open, onOpenChange]);
         const enter = (event) => {
             if (event.pointerType === 'mouse')
@@ -180,7 +200,7 @@ export function createStandardLayout(React, { styles, targetStyles, context, Lay
             'data-pinned': pinned || undefined,
             ...(!portalContent && { onPointerEnter: enter, onPointerLeave: leave, onFocus: focus, onBlur: blur }),
             onKeyDown: event => {
-                if (event.key !== 'Escape' || pinned || !open || event.defaultPrevented)
+                if (event.key !== 'Escape' || pinned || heldOpen || !open || event.defaultPrevented)
                     return;
                 setHovered(false);
                 setEngaged(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubohiroya/turbowarp-plus-editor-layout",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "Resizable panes and layout for TurboWarp Plus Editor",
   "type": "module",
   "license": "GPL-3.0-or-later",

package/src/stage-surface.ts

@@ -71,7 +71,7 @@ export function stageDockActionLabel(locale: string, {drawer, detached, external
     external?: boolean;
 }) {
     const japanese = isJapanese(locale);
-    if (detached) return japanese ? 'ドックに戻す' : 'Dock stage';
+    if (detached) return japanese ? 'ステージをエディターに戻す' : 'Dock stage';
     if (external) return japanese ? (drawer ? 'ステージを別ウィンドウで開く' : '別ウィンドウで開く') : 'Open in a separate window';
     return japanese ? 'アンドック' : 'Undock stage';
 }
@@ -107,7 +107,8 @@ export function createStageSurface(React: typeof import('react'), {
             edge: 'right',
             label: japanese ? 'ステージを展開' : 'Reveal stage',
             onOpenChange: setStageDrawerOpen,
-            portalContent: Boolean(placement)
+            portalContent: Boolean(placement),
+            holdOpenSelector: '[data-turbowarp-app-shell-source-chooser][role="dialog"][aria-modal="true"]'
         }, inline) : inline;
         return placement ? React.createElement(React.Fragment, null, dock, createPortal(panel, placement.surface)) : dock;
     };

package/src/standard-layout.ts

@@ -18,7 +18,7 @@ export function createStandardLayout(React, {styles, targetStyles, context, Layo
         onPaletteModeChange, windowTools, Container, render, ...props
     }) {
         const [showUndock, setShowUndock] = useState(false);
-        const [targetsPinned, setTargetsPinned] = useState(false);
+        const [targetsPinned, setTargetsPinned] = useState(true);
         const [showStage, setShowStage] = useState(true);
         const [stageDrawerOpen, setStageDrawerOpen] = useState(false);
         const [size, setSize] = useState(null);
@@ -151,13 +151,33 @@ export function createStandardLayout(React, {styles, targetStyles, context, Layo
             Container ? element(Container, {locale: props.locale}, layout) : layout);
     }
 
-    function EdgeDrawer({edge, label, pinned = false, onOpenChange, portalContent = false, children}) {
+    function EdgeDrawer({edge, label, pinned = false, onOpenChange, portalContent = false, holdOpenSelector = '', children}) {
         const [hovered, setHovered] = useState(false);
         const [engaged, setEngaged] = useState(false);
+        const [heldOpen, setHeldOpen] = useState(false);
         const drawer = useRef(null);
         const trigger = useRef(null);
         const panel = useRef(null);
-        const open = pinned || hovered || engaged;
+        const open = pinned || hovered || engaged || heldOpen;
+
+        useLayoutEffect(() => {
+            if (!holdOpenSelector) return;
+            const node = panel.current as HTMLElement;
+            const view = node.ownerDocument.defaultView;
+            if (!view) return;
+            const update = () => setHeldOpen(Array.from(node.querySelectorAll(holdOpenSelector)).some(element =>
+                !element.hasAttribute('hidden') && element.getAttribute('aria-hidden') !== 'true' &&
+                view.getComputedStyle(element).display !== 'none'
+            ));
+            const observer = new view.MutationObserver(records => {
+                if (records.some(record => record.type === 'childList' ||
+                    (record.target as Element).matches(holdOpenSelector))) update();
+            });
+            observer.observe(node, {subtree: true, childList: true, attributes: true,
+                attributeFilter: ['style', 'hidden', 'aria-hidden']});
+            update();
+            return () => observer.disconnect();
+        }, [holdOpenSelector]);
 
         useLayoutEffect(() => {onOpenChange?.(open);}, [open, onOpenChange]);
 
@@ -195,7 +215,7 @@ export function createStandardLayout(React, {styles, targetStyles, context, Layo
             'data-pinned': pinned || undefined,
             ...(!portalContent && {onPointerEnter: enter, onPointerLeave: leave, onFocus: focus, onBlur: blur}),
             onKeyDown: event => {
-                if (event.key !== 'Escape' || pinned || !open || event.defaultPrevented) return;
+                if (event.key !== 'Escape' || pinned || heldOpen || !open || event.defaultPrevented) return;
                 setHovered(false);
                 setEngaged(false);
                 trigger.current.focus();