react-bwin 0.3.5 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +1 -1
  2. package/dist/react-bwin.css +1 -1
  3. package/dist/react-bwin.d.ts +4 -0
  4. package/dist/react-bwin.js +505 -202
  5. package/dist/react-bwin.umd.js +2 -2
  6. package/package.json +2 -2
package/README.md CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  A React-based tiling window manager featuring resizable panes, drag-and-drop, and more. Built on top of the [Binary Window](https://github.com/bhjsdev/bwin) library.
7
7
 
8
- [![A react-bwin tiling layout with resizable panes showing charts and a data table](docs/screenshot.png)](https://bhjsdev.github.io/bwin-docs)
8
+ [![A react-bwin tiling layout with resizable panes showing charts and a data table](docs/screenshot.png)](https://bhjsdev.github.io/bwin-docs?theme=dark)
9
9
 
10
10
  [Documentation](https://bhjsdev.github.io/bwin-docs/react/get-started)
11
11
 
package/dist/react-bwin.css CHANGED
@@ -1,2 +1,2 @@
1
- bw-window{--bw-font-family:system-ui;--bw-font-size:14px;--bw-drop-area-bg-color:#0000000d;--bw-glass-clearance:2px;--bw-glass-border-radius:2px;--bw-glass-border-color:#1a1a1a;--bw-glass-border-color-disabled:#ccc;--bw-glass-bg-color-disabled:#f7f7f7;--bw-glass-header-height:30px;--bw-glass-header-gap:4px;--bw-glass-header-bg-color:#f7f7f7;--bw-sill-gap:6px}bw-window[theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bw-glass-border-color:#666;--bw-glass-border-color-disabled:#4d4d4d;--bw-glass-header-bg-color:#2e2e2e;--bw-glass-bg-color-disabled:#292929;--bw-drop-area-bg-color:#ffffff1a}bw-window[theme=dark] bw-pane,bw-window[theme=dark] bw-muntin{background-color:#242424}bw-window[theme=dark] bw-glass{color:#e6e6e6;background-color:#292929}bw-window[theme=dark] .bw-glass-tab:hover,bw-window[theme=dark] .bw-glass-action:hover,bw-window[theme=dark] .bw-minimized-glass:hover{background-color:#424242}.body--bw-resize-x{-webkit-user-select:none;user-select:none;cursor:ew-resize}.body--bw-resize-y{-webkit-user-select:none;user-select:none;cursor:ns-resize}bw-window{box-sizing:border-box;display:block;position:absolute}bw-window:has(>bw-pane[maximized])>:is(bw-pane,bw-muntin):not([maximized]){display:none}bw-pane{box-sizing:border-box;background-color:#f2f2f2;position:absolute;overflow:auto}bw-pane[drop-area]:before{content:"";background-color:var(--bw-drop-area-bg-color);position:absolute}bw-pane[drop-area=top]:before{height:50%;top:0;left:0;right:0}bw-pane[drop-area=right]:before{width:50%;top:0;bottom:0;right:0}bw-pane[drop-area=bottom]:before{height:50%;bottom:0;left:0;right:0}bw-pane[drop-area=left]:before{width:50%;top:0;bottom:0;left:0}bw-pane[drop-area=center]:before{inset:0}bw-muntin{box-sizing:border-box;background-color:#fff;position:absolute}bw-muntin[horizontal]{cursor:ns-resize}bw-muntin[vertical]{cursor:ew-resize}bw-muntin[resizable=false]{cursor:auto}bw-window:has(bw-glass) bw-pane{background-color:#0000}bw-window:has(bw-glass) bw-pane[drop-area]:before{z-index:1}bw-window:has(bw-glass) bw-pane[drop-area=top]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=right]:before{top:var(--bw-glass-clearance);right:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=bottom]:before{bottom:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=left]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=center]:before{inset:var(--bw-glass-clearance)}bw-window:has(bw-glass) bw-muntin{background-color:#0000}bw-glass{inset:var(--bw-glass-clearance);border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);font-family:var(--bw-font-family);font-size:var(--bw-font-size);box-sizing:border-box;background-color:#fff;flex-direction:column;display:flex;position:absolute}bw-glass[draggable=true]:active{cursor:move;opacity:.4}bw-glass-header{box-sizing:border-box;flex-basis:var(--bw-glass-header-height);align-items:center;gap:var(--bw-glass-header-gap);padding-inline:var(--bw-glass-header-gap);border-bottom:1px solid var(--bw-glass-border-color);border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);background-color:var(--bw-glass-header-bg-color);flex-shrink:0;display:flex;overflow:hidden}bw-glass-title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}bw-glass-tab-container{align-self:flex-end;gap:var(--bw-glass-header-gap);display:flex}.bw-glass-tab{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);cursor:pointer;border-bottom:none}.bw-glass-tab:hover{background-color:#fff}.bw-glass-tab:active{transform:translateY(1px)}bw-glass-action-container{flex-shrink:0;gap:2px;margin-left:auto;display:flex}.bw-glass-action{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);cursor:pointer}.bw-glass-action:hover{background-color:#fff}.bw-glass-action:active{transform:scale(.95)}.bw-glass-action:disabled{border:1px solid var(--bw-glass-border-color-disabled);background-color:var(--bw-glass-bg-color-disabled);cursor:not-allowed}.bw-glass-action:disabled:hover{background-color:var(--bw-glass-bg-color-disabled)}.bw-glass-action:disabled:active{transform:scale(1)}.bw-glass-action--close:before{content:"✕"}.bw-glass-action--maximize:before{content:"☐"}bw-pane[maximized] .bw-glass-action--maximize:before{content:"◱"}.bw-glass-action--minimize:before{content:"−"}bw-glass-content{box-sizing:border-box;flex-grow:1;display:block;overflow:auto}bw-sill{margin-top:calc(var(--bw-sill-gap) - var(--bw-glass-clearance));gap:var(--bw-sill-gap);box-sizing:border-box;width:100%;padding-inline:var(--bw-glass-clearance);display:flex;position:absolute;top:100%}.bw-minimized-glass{border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);cursor:pointer;background-color:var(--bw-glass-header-bg-color);flex-basis:10%;height:10px;display:block}.bw-minimized-glass:hover{background-color:#fff}.bw-minimized-glass:active{transform:scale(.95)}
1
+ bw-window{--bw-font-family:system-ui;--bw-font-size:14px;--bw-drop-area-bg-color:#0000000d;--bw-glass-clearance:2px;--bw-glass-border-radius:2px;--bw-glass-border-color:#1a1a1a;--bw-glass-border-color-disabled:#ccc;--bw-glass-bg-color-disabled:#f7f7f7;--bw-glass-header-height:30px;--bw-glass-header-gap:4px;--bw-glass-header-bg-color:#f7f7f7;--bw-minimized-glass-highlight-color:#d9d9d9;--bw-detached-glass-shadow:0 2px 6px #0000001f, 0 4px 14px #00000038;--bw-detached-glass-shadow-active:0 4px 10px #00000038, 0 10px 30px #00000061;--bw-detached-glass-resize-handle-size:12px;--bw-sill-gap:6px}bw-window[theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bw-glass-border-color:#666;--bw-glass-border-color-disabled:#4d4d4d;--bw-glass-header-bg-color:#2e2e2e;--bw-glass-bg-color-disabled:#292929;--bw-drop-area-bg-color:#ffffff1a;--bw-detached-glass-shadow:0 2px 6px #0000008c, 0 4px 14px #000000a6;--bw-detached-glass-shadow-active:0 4px 10px #000000a6, 0 10px 30px #000c;--bw-minimized-glass-highlight-color:#a6a6a6cc}bw-window[theme=dark] bw-pane,bw-window[theme=dark] bw-muntin{background-color:#242424}bw-window[theme=dark] bw-glass{color:#e6e6e6;background-color:#292929}bw-window[theme=dark] .bw-glass-tab:hover,bw-window[theme=dark] .bw-glass-action:hover,bw-window[theme=dark] .bw-minimized-glass:hover{background-color:#424242}.body--bw-resize-x{-webkit-user-select:none;user-select:none;cursor:ew-resize}.body--bw-resize-y{-webkit-user-select:none;user-select:none;cursor:ns-resize}bw-window{box-sizing:border-box;display:block;position:absolute}bw-window:has(>bw-pane[maximized])>:is(bw-pane,bw-muntin):not([maximized]){display:none}bw-pane{isolation:isolate;box-sizing:border-box;background-color:#f2f2f2;position:absolute;overflow:auto}bw-pane[drop-area]:before{content:"";background-color:var(--bw-drop-area-bg-color);position:absolute}bw-pane[drop-area=top]:before{height:50%;top:0;left:0;right:0}bw-pane[drop-area=right]:before{width:50%;top:0;bottom:0;right:0}bw-pane[drop-area=bottom]:before{height:50%;bottom:0;left:0;right:0}bw-pane[drop-area=left]:before{width:50%;top:0;bottom:0;left:0}bw-pane[drop-area=center]:before{inset:0}bw-muntin{box-sizing:border-box;background-color:#fff;position:absolute}bw-muntin[horizontal]{cursor:ns-resize}bw-muntin[vertical]{cursor:ew-resize}bw-muntin[resizable=false]{cursor:auto}bw-window:has(bw-glass) bw-pane{background-color:#0000}bw-window:has(bw-glass) bw-pane[drop-area]:before{z-index:1}bw-window:has(bw-glass) bw-pane[drop-area=top]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=right]:before{top:var(--bw-glass-clearance);right:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=bottom]:before{bottom:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=left]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=center]:before{inset:var(--bw-glass-clearance)}bw-window:has(bw-glass) bw-muntin{background-color:#0000}bw-glass{inset:var(--bw-glass-clearance);border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);font-family:var(--bw-font-family);font-size:var(--bw-font-size);box-sizing:border-box;background-color:#fff;flex-direction:column;display:flex;position:absolute}bw-glass[draggable=true]:active{cursor:move;opacity:.4}bw-glass-header{box-sizing:border-box;flex-basis:var(--bw-glass-header-height);-webkit-user-select:none;user-select:none;align-items:center;gap:var(--bw-glass-header-gap);padding-inline:var(--bw-glass-header-gap);border-bottom:1px solid var(--bw-glass-border-color);border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);background-color:var(--bw-glass-header-bg-color);flex-shrink:0;display:flex;overflow:hidden}bw-glass-title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}bw-glass-tab-container{align-self:flex-end;gap:var(--bw-glass-header-gap);display:flex}.bw-glass-tab{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);cursor:pointer;border-bottom:none}.bw-glass-tab:hover{background-color:#fff}.bw-glass-tab:active{transform:translateY(1px)}bw-glass-action-container{flex-shrink:0;gap:2px;margin-left:auto;display:flex}.bw-glass-action{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);cursor:pointer}.bw-glass-action:hover{background-color:#fff}.bw-glass-action:active{transform:scale(.95)}.bw-glass-action:disabled{border:1px solid var(--bw-glass-border-color-disabled);background-color:var(--bw-glass-bg-color-disabled);cursor:not-allowed}.bw-glass-action:disabled:hover{background-color:var(--bw-glass-bg-color-disabled)}.bw-glass-action:disabled:active{transform:scale(1)}.bw-glass-action--minimize:before{content:"−"}.bw-glass-action--detach:before{content:"☐"}.bw-glass-action--attach:before{content:"◱"}.bw-glass-action--maximize:before{content:"🡥"}bw-pane[maximized] .bw-glass-action--maximize:before{content:"🡧"}.bw-glass-action--close:before{content:"✕"}bw-glass-content{box-sizing:border-box;flex-grow:1;display:block;overflow:auto}bw-glass[detached]{box-shadow:var(--bw-detached-glass-shadow)}bw-glass[detached][active]{box-shadow:var(--bw-detached-glass-shadow-active)}bw-glass[detached]>bw-glass-header[can-drag=true]:active{cursor:move}bw-glass-resize-handle{z-index:2;touch-action:none;position:absolute}bw-glass-resize-handle[resize-dir=n]{top:calc(var(--bw-detached-glass-resize-handle-size) / -2);height:var(--bw-detached-glass-resize-handle-size);cursor:ns-resize;left:0;right:0}bw-glass-resize-handle[resize-dir=s]{bottom:calc(var(--bw-detached-glass-resize-handle-size) / -2);height:var(--bw-detached-glass-resize-handle-size);cursor:ns-resize;left:0;right:0}bw-glass-resize-handle[resize-dir=e]{top:0;bottom:0;right:calc(var(--bw-detached-glass-resize-handle-size) / -2);width:var(--bw-detached-glass-resize-handle-size);cursor:ew-resize}bw-glass-resize-handle[resize-dir=w]{top:0;bottom:0;left:calc(var(--bw-detached-glass-resize-handle-size) / -2);width:var(--bw-detached-glass-resize-handle-size);cursor:ew-resize}bw-glass-resize-handle[resize-dir=ne]{top:calc(var(--bw-detached-glass-resize-handle-size) / -2);right:calc(var(--bw-detached-glass-resize-handle-size) / -2);width:var(--bw-detached-glass-resize-handle-size);height:var(--bw-detached-glass-resize-handle-size);cursor:nesw-resize}bw-glass-resize-handle[resize-dir=nw]{top:calc(var(--bw-detached-glass-resize-handle-size) / -2);left:calc(var(--bw-detached-glass-resize-handle-size) / -2);width:var(--bw-detached-glass-resize-handle-size);height:var(--bw-detached-glass-resize-handle-size);cursor:nwse-resize}bw-glass-resize-handle[resize-dir=se]{bottom:calc(var(--bw-detached-glass-resize-handle-size) / -2);right:calc(var(--bw-detached-glass-resize-handle-size) / -2);width:var(--bw-detached-glass-resize-handle-size);height:var(--bw-detached-glass-resize-handle-size);cursor:nwse-resize}bw-glass-resize-handle[resize-dir=sw]{bottom:calc(var(--bw-detached-glass-resize-handle-size) / -2);left:calc(var(--bw-detached-glass-resize-handle-size) / -2);width:var(--bw-detached-glass-resize-handle-size);height:var(--bw-detached-glass-resize-handle-size);cursor:nesw-resize}bw-sill{margin-top:calc(var(--bw-sill-gap) - var(--bw-glass-clearance));gap:var(--bw-sill-gap);box-sizing:border-box;width:100%;padding-inline:var(--bw-glass-clearance);display:flex;position:absolute;top:100%}.bw-minimized-glass,.bw-minimized-detached-glass{border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);cursor:pointer;background-color:var(--bw-glass-header-bg-color);flex-basis:10%;height:10px;display:block}:is(.bw-minimized-glass,.bw-minimized-detached-glass):hover{background-color:#fff}:is(.bw-minimized-glass,.bw-minimized-detached-glass):active{transform:scale(.95)}.bw-minimized-glass,.bw-minimized-detached-glass{animation:2s ease-out bw-minimized-glass-highlight}@keyframes bw-minimized-glass-highlight{0%{background-color:var(--bw-glass-header-bg-color)}30%{background-color:var(--bw-minimized-glass-highlight-color)}to{background-color:var(--bw-glass-header-bg-color)}}
2
2
  /*$vite$:1*/
package/dist/react-bwin.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  declare module 'react-bwin' {
2
2
  export const BUILTIN_ACTIONS: Action[]
3
+ export const DEFAULT_GLASS_ACTIONS: Action[]
4
+ export const DEFAULT_DETACHED_GLASS_ACTIONS: Action[]
3
5
  export const Window: React.ForwardRefExoticComponent<
4
6
  WindowProps & React.RefAttributes<WindowHandle>
5
7
  >
@@ -63,6 +65,7 @@ declare global {
63
65
  height?: number
64
66
  fitContainer?: boolean
65
67
  theme?: string
68
+ actions?: Actions | [Actions, Actions?]
66
69
  title?: React.ReactNode
67
70
  content?: React.ReactNode
68
71
  children?: ConfigNode[]
@@ -75,6 +78,7 @@ declare global {
75
78
  containerElement: HTMLElement
76
79
  sillElement: HTMLElement
77
80
  theme: string
81
+ actions: [Action[], Action[]]
78
82
  mount(container: HTMLElement): void
79
83
  enableFeatures(): void
80
84
  fit(): void