@signal9/era-ui 1.18.1 → 1.19.0

package/dist/os/notification-center.svelte

@@ -5,10 +5,12 @@
 	import BellOff from '@lucide/svelte/icons/bell-off';
 	import { cn } from '../utils/index.js';
 	import { getNotifications, type AppNotification } from './notifications.svelte.js';
+	import { getWindowManager } from './wm.svelte.js';
 	import { LAYER } from './layers.js';
 
 	let { open = $bindable(false) }: { open?: boolean } = $props();
 	const notif = getNotifications();
+	const wm = getWindowManager();
 
 	const accent: Record<AppNotification['tone'], string> = {
 		default: 'bg-(--era-highlight)',
@@ -40,9 +42,13 @@
 			onclick={() => (open = false)}
 		></button>
 
+		<!-- Hangs off whichever edge(s) the chrome reserved — a top taskbar pushes
+		     it down, a bottom one stops it short — so it never slides under a bar. -->
 		<aside
 			transition:eraFly={{ x: 320, duration: 200 }}
-			class="absolute top-0 right-0 bottom-(--era-h-lg) flex w-80 flex-col border-l border-divider-faded bg-(--era-surface-bg) shadow-(--era-shadow-lg) glass-blur"
+			style:top="{wm.insets.top}px"
+			style:bottom="{wm.insets.bottom}px"
+			class="absolute right-0 flex w-80 flex-col border-l border-divider-faded bg-(--era-surface-bg) shadow-(--era-shadow-lg) glass-blur"
 		>
 			<header
 				class="flex shrink-0 items-center gap-(--era-gap) border-b border-divider-faded px-(--era-pad-md) py-(--era-inset-sm)"

package/dist/os/taskbar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Component } from 'svelte';
+	import type { Component, Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import type { IconProps } from '@lucide/svelte';
 	import { Button } from '../ui/button';
@@ -11,28 +11,40 @@
 	import { LAYER } from './layers.js';
 
 	let {
+		position = 'bottom',
 		pinned = [],
 		onLauncher,
 		onNotifications,
+		start,
+		end,
 		class: className,
 		...restProps
 	}: HTMLAttributes<HTMLDivElement> & {
+		/** Which shell edge the bar docks to (default bottom). It registers its
+		 *  height as that edge's inset, so maximize / drag containment follow. */
+		position?: 'top' | 'bottom';
 		/** Pinned launchers — click spawns that app even when it isn't running. */
 		pinned?: { appId: string; title: string; icon?: Component<IconProps> | null }[];
 		onLauncher?: () => void;
 		onNotifications?: () => void;
+		/** Extra chrome before the launcher button (branding, menus…). */
+		start?: Snippet;
+		/** Extra chrome in the system tray, before the clock. */
+		end?: Snippet;
 	} = $props();
 
 	const wm = getWindowManager();
 	const notif = getNotifications();
 
-	// Register our height as reserved chrome: maximize stops above the bar, and
-	// drag containment keeps window bars reachable above it (not hidden behind).
+	// Register our height as reserved chrome on whichever edge we dock to:
+	// maximize stops at the bar, and drag containment keeps window bars
+	// reachable beside it (not hidden behind).
 	let barHeight = $state(0);
 	$effect(() => {
-		wm.insets.bottom = barHeight;
+		const edge = position === 'top' ? 'top' : 'bottom';
+		wm.insets[edge] = barHeight;
 		return () => {
-			wm.insets.bottom = 0;
+			wm.insets[edge] = 0;
 		};
 	});
 
@@ -45,18 +57,24 @@
 	const time = $derived(now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
 </script>
 
-<!-- Flush left/right/bottom; the exposed OUTER corners are the top two, rounded
-     at the bar's own tier (h-lg → rd-lg). The corners axis gates it for free:
-     data-corners="square" zeroes --era-roundness-scale and with it rd-lg. -->
+<!-- Flush on three edges; the exposed OUTER corners are the two facing the
+     desktop, rounded at the bar's own tier (h-lg → rd-lg). The corners axis
+     gates it for free: data-corners="square" zeroes --era-roundness-scale and
+     with it rd-lg. -->
 <div
 	bind:clientHeight={barHeight}
 	class={cn(
-		'absolute inset-x-0 bottom-0 flex h-(--era-h-lg) items-center gap-(--era-gap) rounded-t-(--era-rd-lg) border-t border-divider-faded bg-(--era-surface-bg-elevated) px-(--era-inset-sm) shadow-(--era-shadow-lg) glass-blur',
+		'absolute inset-x-0 flex h-(--era-h-lg) items-center gap-(--era-gap) border-divider-faded bg-(--era-surface-bg-elevated) px-(--era-inset-sm) shadow-(--era-shadow-lg) glass-blur',
+		position === 'top'
+			? 'top-0 rounded-b-(--era-rd-lg) border-b'
+			: 'bottom-0 rounded-t-(--era-rd-lg) border-t',
 		LAYER.taskbar,
 		className
 	)}
 	{...restProps}
 >
+	{@render start?.()}
+
 	<Button icon size="default" aria-label="Open launcher" onclick={onLauncher}>
 		<LayoutGrid class="size-(--era-h-xs)" />
 	</Button>
@@ -89,6 +107,7 @@
 
 	<!-- System tray -->
 	<div class="ml-auto flex shrink-0 items-center gap-(--era-gap)">
+		{@render end?.()}
 		<span class="px-(--era-inset-sm) text-body text-muted tabular-nums">{time}</span>
 		<div class="relative">
 			<Button icon size="default" aria-label="Notifications" onclick={onNotifications}>

package/dist/os/taskbar.svelte.d.ts

@@ -1,7 +1,10 @@
-import type { Component } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { IconProps } from '@lucide/svelte';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    /** Which shell edge the bar docks to (default bottom). It registers its
+     *  height as that edge's inset, so maximize / drag containment follow. */
+    position?: 'top' | 'bottom';
     /** Pinned launchers — click spawns that app even when it isn't running. */
     pinned?: {
         appId: string;
@@ -10,6 +13,10 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     }[];
     onLauncher?: () => void;
     onNotifications?: () => void;
+    /** Extra chrome before the launcher button (branding, menus…). */
+    start?: Snippet;
+    /** Extra chrome in the system tray, before the clock. */
+    end?: Snippet;
 };
 declare const Taskbar: Component<$$ComponentProps, {}, "">;
 type Taskbar = ReturnType<typeof Taskbar>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "1.18.1",
+	"version": "1.19.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",