@human-synthesis/norns-ui 0.0.7 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@human-synthesis/norns-ui",
-	"version": "0.0.7",
+	"version": "0.0.8",
 	"description": "UI library for the Norns ecosystem — Pug + Civet components on Tailwind v4.",
 	"license": "MIT",
 	"author": "Daniel Teodoroiu (https://humansynthesis.ai)",

package/src/auto-import.js

@@ -55,6 +55,7 @@ export function presetUI() {
 			// 0.0.4 — display layer
 			Icon: c('Icon'),
 			Card: c('Card'),
+			Window: c('Window'),
 			Surface: c('Surface'),
 			Banner: c('Banner'),
 			Badge: c('Badge'),

package/src/components/Window.n

@@ -0,0 +1,43 @@
+.norns-window(class!="{classes}")
+	+if('!hideHeader')
+		header.norns-window-header
+			.norns-window-title.truncate {title}
+			.norns-window-actions
+				+if('actions')
+					| {@render actions()}
+				+if('onClose')
+					button.norns-window-close(type="button" aria-label="Close" onclick!="{onClose}")
+						| ✕
+	section.norns-window-body(class!="{bodyClasses}")
+		| {@render children?.()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	// Layout-only window: chrome (header + close + custom actions) wrapping
+	// a body slot. Sizing is the caller's responsibility — pass dimensions
+	// via `class` (e.g. `class="w-[520px] h-[380px]"`) or compose inside a
+	// parent that constrains the box (a SvelteFlow node, a fixed panel,
+	// a flex child, etc).
+	//
+	// Header layout: title on the left (truncated), then a flex row of
+	// caller-provided action elements (via the `actions` snippet), then an
+	// optional `✕` close button when `onClose` is supplied. The close button
+	// is rendered after the snippet so the snippet can position icons / chips
+	// alongside it.
+	//
+	// `hideHeader` removes the entire header bar (useful for windows that
+	// already have their own custom chrome but still want the rounded shell).
+	{
+		title = ''
+		hideHeader = false
+		onClose
+		actions
+		children
+		class: extra = ''
+		bodyClass = ''
+	} := $props()
+
+	classes := cn 'norns-window', extra
+	bodyClasses := cn 'norns-window-body', bodyClass
+</script>

package/src/styles/atoms.css

@@ -652,6 +652,70 @@
 		box-shadow: var(--ui-focus-ring);
 	}
 
+	/* ============================================================ */
+	/* Window                                                       */
+	/* ============================================================ */
+	.norns-window {
+		display: flex;
+		flex-direction: column;
+		background-color: var(--color-bg-elevated);
+		color: var(--color-fg);
+		border: 1px solid var(--color-border);
+		border-radius: var(--ui-radius-lg);
+		overflow: hidden;
+		box-shadow: var(--ui-elev-1, 0 1px 2px rgb(0 0 0 / 0.04));
+	}
+	.norns-window-header {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		padding: 0.4rem 0.625rem;
+		border-bottom: 1px solid var(--color-border);
+		background-color: var(--color-bg-subtle);
+		user-select: none;
+		cursor: move;
+	}
+	.norns-window-title {
+		flex: 1;
+		min-width: 0;
+		font-size: 0.85rem;
+		font-weight: 600;
+		color: var(--color-fg);
+	}
+	.norns-window-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		flex-shrink: 0;
+	}
+	.norns-window-close {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.25rem;
+		height: 1.25rem;
+		border-radius: var(--ui-radius-sm);
+		background: transparent;
+		color: var(--color-fg-muted);
+		border: 0;
+		cursor: pointer;
+		font-size: 0.85rem;
+		line-height: 1;
+		padding: 0;
+	}
+	.norns-window-close:hover {
+		background: var(--color-bg-muted);
+		color: var(--color-fg);
+	}
+	.norns-window-body {
+		flex: 1;
+		min-height: 0;
+		overflow: auto;
+		background-color: var(--color-bg);
+	}
+
 	/* ============================================================ */
 	/* Banner                                                       */
 	/* ============================================================ */