Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .dockerignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
node_modules
.git
.svelte-kit
dist
.cursor
*.md
49 changes: 33 additions & 16 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
@@ -1,25 +1,42 @@
name: Docker Build

on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
push:
branches: [main]
pull_request:
branches: [main]

jobs:
build:
runs-on: ubuntu-latest
steps:
-
name: Check the code
uses: actions/checkout@v1
-
name: Push code
- name: Check out repository
uses: actions/checkout@v4

- name: Set up Node
uses: actions/setup-node@v4
with:
node-version: 22
cache: npm

- name: Install dependencies
run: npm ci

- name: Run type and Svelte checks
run: npm run check

- name: Run tests
run: npm run test

- name: Build Docker image
run: docker build -t stephen10121/sveltewindows:1.${{ github.run_number }} .

- name: Push Docker image
if: github.event_name == 'push'
run: |
echo "${{ secrets.DOCKERPW }}" | docker login -u "stephen10121" --password-stdin
docker build -t stephen10121/sveltewindows:1.${{ github.run_number }} .
docker tag stephen10121/sveltewindows:1.${{ github.run_number }} stephen10121/sveltewindows:prod
docker tag stephen10121/sveltewindows:1.${{ github.run_number }} stephen10121/sveltewindows:1.${{ github.run_number }}
docker image ls
docker image push stephen10121/sveltewindows:prod
docker image push stephen10121/sveltewindows:1.${{ github.run_number }}
echo "${{ secrets.DOCKERPW }}" | docker login -u "stephen10121" --password-stdin
docker tag stephen10121/sveltewindows:1.${{ github.run_number }} stephen10121/sveltewindows:prod
docker tag stephen10121/sveltewindows:1.${{ github.run_number }} stephen10121/sveltewindows:1.${{ github.run_number }}
docker image ls
docker image push stephen10121/sveltewindows:prod
docker image push stephen10121/sveltewindows:1.${{ github.run_number }}
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
node_modules
.cursor/

# Output
.output
Expand Down
11 changes: 5 additions & 6 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
FROM node:slim AS builder
FROM node:22-slim AS builder
WORKDIR /app
COPY package*.json .
COPY package*.json ./

RUN npm ci
COPY . .
RUN npm run build
RUN npm prune --production

FROM node:slim
FROM node:22-slim
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev
COPY --from=builder /app/build build/
COPY --from=builder /app/node_modules node_modules/
COPY package.json .
EXPOSE 3011

ENV NODE_ENV=production
Expand Down
97 changes: 95 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,95 @@
# Svelte Windows
A draggable and resizable window manager that works seamlessly in you projects. Works in scroll areas, overflow situations. Includes window stacking based on how recently it was active.
# svelte-windows

[![npm version](https://img.shields.io/npm/v/svelte-windows)](https://www.npmjs.com/package/svelte-windows)
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE.md)

Draggable, resizable desktop-style windows for Svelte 5. Built for overflow layouts, touch interaction, and intelligent active-window stacking.

## Preview

![svelte-windows preview](./static/defaultapp.jpg)

## Install

```bash
npm install svelte-windows
```

## Quick start

```svelte
<script lang="ts">
import { WindowManager, Window } from "svelte-windows";

const dragRegions = [{ width: "100%", height: "40px", top: "0px", left: "0px" }];
</script>

<div style="width: 640px; height: 480px;">
<WindowManager>
{#snippet children(context)}
<Window
id="window-1"
{context}
windowDragRegions={dragRegions}
outerClassName="shadow-2xl"
>
<section style="width: 100%; height: 100%; background: #111827;">
My window content
</section>
</Window>
{/snippet}
</WindowManager>
</div>
```

## Why use it

- Drag and resize windows in bounded desktop regions
- Edge and corner resize handles with mouse + touch support
- Automatic active window stacking and z-order management
- iframe-safe focus handling (clicking iframes still activates the parent window)
- Bindable `top`, `left`, `width`, and `height` for external state sync
- Style hooks for both window shell and inner content

## Lifecycle callbacks

`Window` supports optional callbacks:

- `onActiveStateChanged(isActive)`
- `onDragStart({ top, left })`
- `onDragEnd({ top, left })`
- `onResizeStart({ width, height })`
- `onResizeEnd({ width, height })`

## API exports

```ts
import {
WindowManager,
Window,
MouseContext,
WindowContext,
INACTIVE_MOUSE_ID,
type WindowDragConfig,
type WindowPosition,
type WindowDimensions,
type ActualWindowProps
} from "svelte-windows";
```

## Documentation

- Website: [windows.stephengruzin.dev](https://windows.stephengruzin.dev)
- Docs page: [windows.stephengruzin.dev/docs](https://windows.stephengruzin.dev/docs)
- Playground: [windows.stephengruzin.dev/playground](https://windows.stephengruzin.dev/playground)

## Development

```bash
npm install
npm run dev
```

## License

[MIT](./LICENSE.md)
Loading
Loading