Add island bar layout and Settings controls

Group workspaces with Overview and status controls with the clock. Keep themed backgrounds and borders around each island, with click-through gaps and configurable side padding defaulting to 4 px.

Capture blur within each panel region and update material and input regions when island bounds change. Cover layout reloads and padding changes with widget and native shell tests.

shell/ferese-settings/src/schema.rs

@@ -853,6 +853,26 @@ pub fn fields(page: Page) -> Vec<Field> {
             ),
         ],
         Page::Bar => vec![
+            choice(
+                "status.bar_layout",
+                "Layout",
+                "Use one continuous background or separate islands around the controls.",
+                "continuous",
+                &[("continuous", "Continuous"), ("islands", "Islands")],
+            ),
+            range(
+                "status.bar_island_padding",
+                "Island side padding",
+                "Space on each side between the island background and its bordered controls.",
+                RangeSpec {
+                    default: f64::from(ferese_config::default_bar_island_padding()),
+                    min: 0.0,
+                    max: 32.0,
+                    step: 1.0,
+                    suffix: " px",
+                    integer: false,
+                },
+            ),
             toggle(
                 "status.window_title",
                 "Focused window title",

shell/ferese-shell/src/bar.rs

@@ -3,6 +3,9 @@ use super::{
     bar_icon, button, color, color_with_opacity, container, control, motion, row, status_ui, text, theme, window,
 };
 use cosmic::iced::border::Shape as BorderShape;
+use ferese_config::BarLayout;
+
+pub(super) mod presentation;
 
 impl FereseShell {
     pub(super) fn output_for_bar(&self, id: window::Id) -> Option<&control::OutputSnapshot> {
@@ -22,22 +25,38 @@ impl FereseShell {
         let focused_output = self.output_for_bar(id);
         let shell_theme = self.config.theme.for_bar();
         let bar = BarMetrics::from(shell_theme);
+        let mode = self.config.status.bar_layout;
+        let islands = mode == BarLayout::Islands;
+        let output = self.outputs.iter().find(|output| output.bar == id);
+        let effects = output.and_then(|output| output.effects.as_ref());
+        let compositor_material = effects.is_some();
+        let control_height = if islands {
+            bar.group_item_height
+        } else {
+            bar.control_height
+        };
+        let control_metrics = BarMetrics { control_height, ..bar };
         let mut workspace_row = row::with_capacity(self.snapshot.workspaces.len() + 1)
-            .spacing(3)
+            .spacing(if islands { 8 } else { 3 })
             .align_y(cosmic::iced::Alignment::Center);
 
-        workspace_row = workspace_row.push(motion::button(
-            button::custom(overview_control(bar, color(shell_theme.accent)))
-                .height(bar.control_height)
+        let overview = motion::button(
+            button::custom(overview_control(control_metrics, color(shell_theme.accent)))
+                .height(control_height)
                 .padding([0, 7])
                 .on_press(cosmic::Action::App(Message::ToggleOverview)),
             color(shell_theme.text_primary),
             self.overview_active,
             1.0,
-        ));
-        let mut workspace_buttons = row::with_capacity(self.snapshot.workspaces.len())
+        );
+        let mut workspace_buttons = row::with_capacity(self.snapshot.workspaces.len() + usize::from(islands))
             .spacing(1)
             .align_y(cosmic::iced::Alignment::Center);
+        if islands {
+            workspace_buttons = workspace_buttons.push(overview);
+        } else {
+            workspace_row = workspace_row.push(overview);
+        }
 
         for workspace in self
             .snapshot
@@ -88,12 +107,17 @@ impl FereseShell {
             // accessible button name, without an overlay stealing its target.
             workspace_buttons = workspace_buttons.push(selector);
         }
-        workspace_row = workspace_row.push(
+        workspace_row = workspace_row.push(island(
             container(workspace_buttons)
                 .padding([2, 3])
                 .height(bar.group_height)
-                .class(theme::Container::custom(move |_| bar_group_style(shell_theme))),
-        );
+                .class(theme::Container::custom(move |_| bar_group_style(shell_theme)))
+                .into(),
+            shell_theme,
+            self.config.status.bar_island_padding,
+            islands,
+            compositor_material,
+        ));
 
         let foreground = color(shell_theme.text_primary);
         let left = cosmic::iced::widget::scrollable(workspace_row)
@@ -103,9 +127,9 @@ impl FereseShell {
                     .scroller_width(0),
             ))
             .width(Length::Fill)
-            .height(bar.group_height);
+            .height(if islands { bar.height } else { bar.group_height });
         let (date, time) = self.clock.split_once(", ").unwrap_or(("", &self.clock));
-        let clock = container(motion::button(
+        let clock = motion::button(
             button::custom(
                 container(
                     row![
@@ -137,11 +161,17 @@ impl FereseShell {
                 .as_ref()
                 .is_some_and(|menu| menu.kind == status_ui::Menu::Calendar),
             1.0,
-        ))
-        .padding([2, 3])
-        .height(bar.group_height)
-        .align_y(alignment::Vertical::Center)
-        .class(theme::Container::custom(move |_| bar_group_style(shell_theme)));
+        );
+        let clock: Element<'_, cosmic::Action<Message>> = if islands {
+            clock
+        } else {
+            container(clock)
+                .padding([2, 3])
+                .height(bar.group_height)
+                .align_y(alignment::Vertical::Center)
+                .class(theme::Container::custom(move |_| bar_group_style(shell_theme)))
+                .into()
+        };
         let mut right = row![
             self.view_status_bar().map(move |action| match action {
                 cosmic::Action::App(Message::OpenMenu(kind, anchor)) =>
@@ -153,13 +183,13 @@ impl FereseShell {
         .spacing(8)
         .align_y(cosmic::iced::Alignment::Center);
         if self.display_mode.external_connected() {
-            right = right.push(motion::button(
+            let display = motion::button(
                 button::custom(bar_content(
                     bar_icon(ferese_theme::icons::DISPLAY, bar.icon_size, foreground),
-                    bar.control_height,
+                    control_height,
                 ))
                 .name("Display mode")
-                .height(bar.control_height)
+                .height(control_height)
                 .padding([0, 7])
                 .on_press(cosmic::Action::App(Message::OpenDisplays(
                     self.outputs
@@ -170,8 +200,24 @@ impl FereseShell {
                 foreground,
                 self.display_mode.open,
                 1.0,
-            ));
+            );
+            right = right.push(display);
         }
+        let right: Element<'_, cosmic::Action<Message>> = if islands {
+            island(
+                container(right)
+                    .padding([2, 3])
+                    .height(bar.group_height)
+                    .class(theme::Container::custom(move |_| bar_group_style(shell_theme)))
+                    .into(),
+                shell_theme,
+                self.config.status.bar_island_padding,
+                true,
+                compositor_material,
+            )
+        } else {
+            right.into()
+        };
         let available = self
             .outputs
             .iter()
@@ -188,7 +234,7 @@ impl FereseShell {
         let center = text(title)
             .size(bar.text_size)
             .width(title_width)
-            .height(bar.control_height)
+            .height(control_height)
             .align_x(alignment::Horizontal::Center)
             .align_y(alignment::Vertical::Center)
             .wrapping(cosmic::iced::widget::text::Wrapping::None)
@@ -196,6 +242,21 @@ impl FereseShell {
                 cosmic::iced::advanced::text::EllipsizeHeightLimit::Lines(1),
             ))
             .class(theme::Text::Color(foreground));
+        let center: Element<'_, cosmic::Action<Message>> = if islands && !title.is_empty() {
+            island(
+                container(center)
+                    .height(bar.group_height)
+                    .align_y(alignment::Vertical::Center)
+                    .class(theme::Container::custom(move |_| bar_group_style(shell_theme)))
+                    .into(),
+                shell_theme,
+                self.config.status.bar_island_padding,
+                true,
+                compositor_material,
+            )
+        } else {
+            center.into()
+        };
         let right = cosmic::iced::widget::scrollable(container(right).width(Length::Shrink))
             .direction(cosmic::iced::widget::scrollable::Direction::Horizontal(
                 cosmic::iced::widget::scrollable::Scrollbar::default()
@@ -204,7 +265,7 @@ impl FereseShell {
             ))
             .anchor_right()
             .width(Length::Shrink)
-            .height(bar.group_height);
+            .height(if islands { bar.height } else { bar.group_height });
         let content = row![
             container(left).width(Length::Fill),
             center,
@@ -216,18 +277,28 @@ impl FereseShell {
         .align_y(cosmic::iced::Alignment::Center)
         .height(Length::Fill);
 
-        let compositor_material = self
-            .outputs
-            .iter()
-            .any(|entry| entry.bar == id && entry.effects.is_some());
-        container(content)
+        let content = container(content)
             .width(Length::Fill)
             .height(Length::Fill)
             .padding([0, shell_theme.panel_padding.round() as u16])
             .class(theme::Container::custom(move |_| {
-                bar_style(shell_theme, compositor_material)
+                bar_style(shell_theme, compositor_material, islands)
             }))
-            .into()
+            .into();
+        presentation::frame(
+            content,
+            mode,
+            shell_theme.bar_radius,
+            move |regions| {
+                if let Some(effects) = effects
+                    && let Err(error) =
+                        effects.set_material_regions(regions, super::ferese_surface_effects_v1::Role::Panel)
+                {
+                    eprintln!("ferese-shell: could not update bar material: {error}");
+                }
+            },
+            move |regions| cosmic::Action::App(Message::BarRegionsChanged(id, regions)),
+        )
     }
 }
 
@@ -356,8 +427,12 @@ pub(super) fn workspace_selector_style(
     }
 }
 
-pub(super) fn bar_style(theme: ShellTheme, compositor_material: bool) -> container::Style {
-    let mut style = ferese_theme::controls::surface_appearance(color(theme.bar_background), theme.bar_radius);
+pub(super) fn bar_style(theme: ShellTheme, compositor_material: bool, islands: bool) -> container::Style {
+    let mut style = if islands {
+        container::Style::default()
+    } else {
+        ferese_theme::controls::surface_appearance(color(theme.bar_background), theme.bar_radius)
+    };
     if compositor_material {
         style.background = None;
     }
@@ -367,6 +442,60 @@ pub(super) fn bar_style(theme: ShellTheme, compositor_material: bool) -> contain
     style
 }
 
+pub(super) fn island<'a>(
+    content: Element<'a, cosmic::Action<Message>>,
+    theme: ShellTheme,
+    horizontal_padding: f32,
+    islands: bool,
+    compositor_material: bool,
+) -> Element<'a, cosmic::Action<Message>> {
+    if !islands {
+        return content;
+    }
+
+    let bar = BarMetrics::from(theme);
+    container(content)
+        .id(presentation::island_id())
+        .padding(cosmic::iced::Padding {
+            top: (bar.height - bar.group_height) * 0.5,
+            bottom: (bar.height - bar.group_height) * 0.5,
+            left: horizontal_padding,
+            right: horizontal_padding,
+        })
+        .height(bar.height)
+        .align_y(alignment::Vertical::Center)
+        .class(cosmic::theme::Container::custom(move |_| {
+            bar_style(theme, compositor_material, false)
+        }))
+        .into()
+}
+
+pub(super) fn input_region(
+    mode: BarLayout,
+    hidden: bool,
+    regions: &[[f32; 5]],
+) -> Option<Vec<cosmic::iced::Rectangle>> {
+    if hidden {
+        return Some(Vec::new());
+    }
+
+    if mode == BarLayout::Continuous {
+        return None;
+    }
+
+    Some(
+        regions
+            .iter()
+            .map(|r| cosmic::iced::Rectangle {
+                x: r[0].floor(),
+                y: r[1].floor(),
+                width: (r[0] + r[2]).ceil() - r[0].floor(),
+                height: (r[1] + r[3]).ceil() - r[1].floor(),
+            })
+            .collect(),
+    )
+}
+
 pub(super) fn bar_group_style(theme: ShellTheme) -> container::Style {
     container::Style {
         background: Some(Background::Color(color_with_opacity(theme.border, 0.25))),
@@ -380,3 +509,45 @@ pub(super) fn bar_group_style(theme: ShellTheme) -> container::Style {
         ..Default::default()
     }
 }
+
+#[cfg(test)]
+mod island_tests {
+    use super::*;
+
+    #[test]
+    fn island_gaps_are_click_through_and_fullscreen_disables_every_input_region() {
+        let regions = [[12.25, 2.5, 80.5, 24., 14.], [400., 2., 160., 24., 14.]];
+        let input = input_region(BarLayout::Islands, false, &regions).unwrap();
+        assert_eq!(input.len(), 2);
+        assert_eq!(
+            input[0],
+            cosmic::iced::Rectangle::new((12., 2.).into(), (81., 25.).into())
+        );
+        assert!(!input.iter().any(|region| region.contains((240., 14.).into())));
+        assert_eq!(input_region(BarLayout::Islands, true, &regions), Some(Vec::new()));
+        assert_eq!(input_region(BarLayout::Continuous, false, &regions), None);
+        assert_eq!(input_region(BarLayout::Continuous, true, &regions), Some(Vec::new()));
+    }
+
+    #[test]
+    fn islands_reuse_the_bar_background_without_replacing_the_inner_section_style() {
+        let theme = ShellTheme {
+            bar_background: [12, 24, 36, 153],
+            ..Default::default()
+        };
+        let frame = bar_style(theme, false, true);
+        assert!(frame.background.is_none());
+        assert_eq!(frame.border.width, 0.);
+        assert_eq!(frame.shadow.color.a, 0.);
+        let outer = bar_style(theme, false, false);
+        assert_eq!(outer.background, Some(Background::Color(color(theme.bar_background))));
+        assert_eq!(outer.border.radius, theme.bar_radius.into());
+        assert!(bar_style(theme, true, false).background.is_none());
+        let inner = bar_group_style(theme);
+        assert_eq!(
+            inner.background,
+            Some(Background::Color(color_with_opacity(theme.border, 0.25)))
+        );
+        assert_eq!(inner.border.width, 1.);
+    }
+}

shell/ferese-shell/src/bar/presentation.rs

@@ -0,0 +1,369 @@
+use cosmic::iced::advanced::{Clipboard, Layout, Shell, Widget, layout, mouse, renderer, widget};
+use cosmic::iced::{Event, Length, Rectangle, Size, Vector};
+use cosmic::{Element, Theme};
+use ferese_config::BarLayout;
+
+pub(crate) fn island_id() -> widget::Id {
+    static ID: std::sync::OnceLock<widget::Id> = std::sync::OnceLock::new();
+    ID.get_or_init(widget::Id::unique).clone()
+}
+
+pub(super) fn frame<'a, M: 'a>(
+    content: Element<'a, M>,
+    mode: BarLayout,
+    radius: f32,
+    present: impl Fn(&[[f32; 5]]) + 'a,
+    changed: impl Fn(Vec<[f32; 5]>) -> M + 'a,
+) -> Element<'a, M> {
+    Element::new(Presentation {
+        content,
+        mode,
+        radius,
+        present: Box::new(present),
+        changed: Box::new(changed),
+    })
+}
+
+#[derive(Default)]
+struct State {
+    mode: Option<BarLayout>,
+    current: Vec<[f32; 5]>,
+    scratch: Vec<[f32; 5]>,
+    scroll_starts: Vec<usize>,
+}
+
+type Present<'a> = Box<dyn Fn(&[[f32; 5]]) + 'a>;
+
+struct Presentation<'a, M> {
+    content: Element<'a, M>,
+    mode: BarLayout,
+    radius: f32,
+    present: Present<'a>,
+    changed: Box<dyn Fn(Vec<[f32; 5]>) -> M + 'a>,
+}
+
+impl<M> Widget<M, Theme, cosmic::Renderer> for Presentation<'_, M> {
+    fn tag(&self) -> widget::tree::Tag {
+        widget::tree::Tag::of::<State>()
+    }
+
+    fn state(&self) -> widget::tree::State {
+        widget::tree::State::new(State::default())
+    }
+
+    fn children(&self) -> Vec<widget::Tree> {
+        vec![widget::Tree::new(&self.content)]
+    }
+
+    fn diff(&mut self, tree: &mut widget::Tree) {
+        tree.diff_children(std::slice::from_mut(&mut self.content));
+    }
+
+    fn size(&self) -> Size<Length> {
+        self.content.as_widget().size()
+    }
+
+    fn layout(
+        &mut self,
+        tree: &mut widget::Tree,
+        renderer: &cosmic::Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        self.content
+            .as_widget_mut()
+            .layout(&mut tree.children[0], renderer, limits)
+    }
+
+    fn a11y_nodes(
+        &self,
+        layout: Layout<'_>,
+        tree: &widget::Tree,
+        cursor: mouse::Cursor,
+    ) -> iced_accessibility::A11yTree {
+        self.content.as_widget().a11y_nodes(layout, &tree.children[0], cursor)
+    }
+
+    fn update(
+        &mut self,
+        tree: &mut widget::Tree,
+        event: &Event,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        renderer: &cosmic::Renderer,
+        clipboard: &mut dyn Clipboard,
+        shell: &mut Shell<'_, M>,
+        viewport: &Rectangle,
+    ) {
+        self.content.as_widget_mut().update(
+            &mut tree.children[0],
+            event,
+            layout,
+            cursor,
+            renderer,
+            clipboard,
+            shell,
+            viewport,
+        );
+        if !matches!(event, Event::Window(cosmic::iced::window::Event::RedrawRequested(_))) {
+            return;
+        }
+
+        let state = tree.state.downcast_mut::<State>();
+        let mut collector = Collect {
+            regions: std::mem::take(&mut state.scratch),
+            scroll_starts: std::mem::take(&mut state.scroll_starts),
+            radius: self.radius,
+        };
+        collector.regions.clear();
+        collector.scroll_starts.clear();
+        if self.mode == BarLayout::Islands {
+            self.content
+                .as_widget_mut()
+                .operate(&mut tree.children[0], layout, renderer, &mut collector);
+        } else {
+            let bounds = layout.bounds();
+            collector
+                .regions
+                .push([bounds.x, bounds.y, bounds.width, bounds.height, self.radius]);
+        }
+
+        collector.clip_from(0, layout.bounds(), Vector::ZERO);
+        collector.regions.retain(|region| region[2] > 0.0 && region[3] > 0.0);
+        (self.present)(&collector.regions);
+        if state.mode != Some(self.mode) || state.current != collector.regions {
+            state.mode = Some(self.mode);
+            state.current.clone_from(&collector.regions);
+            shell.publish((self.changed)(collector.regions.clone()));
+        }
+
+        state.scratch = collector.regions;
+        state.scroll_starts = collector.scroll_starts;
+    }
+
+    fn draw(
+        &self,
+        tree: &widget::Tree,
+        renderer: &mut cosmic::Renderer,
+        theme: &Theme,
+        style: &renderer::Style,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        viewport: &Rectangle,
+    ) {
+        self.content
+            .as_widget()
+            .draw(&tree.children[0], renderer, theme, style, layout, cursor, viewport);
+    }
+
+    fn mouse_interaction(
+        &self,
+        tree: &widget::Tree,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        viewport: &Rectangle,
+        renderer: &cosmic::Renderer,
+    ) -> mouse::Interaction {
+        self.content
+            .as_widget()
+            .mouse_interaction(&tree.children[0], layout, cursor, viewport, renderer)
+    }
+
+    fn operate(
+        &mut self,
+        tree: &mut widget::Tree,
+        layout: Layout<'_>,
+        renderer: &cosmic::Renderer,
+        operation: &mut dyn widget::Operation,
+    ) {
+        self.content
+            .as_widget_mut()
+            .operate(&mut tree.children[0], layout, renderer, operation);
+    }
+
+    fn overlay<'a>(
+        &'a mut self,
+        tree: &'a mut widget::Tree,
+        layout: Layout<'a>,
+        renderer: &cosmic::Renderer,
+        viewport: &Rectangle,
+        translation: Vector,
+    ) -> Option<cosmic::iced::advanced::overlay::Element<'a, M, Theme, cosmic::Renderer>> {
+        self.content
+            .as_widget_mut()
+            .overlay(&mut tree.children[0], layout, renderer, viewport, translation)
+    }
+}
+
+struct Collect {
+    regions: Vec<[f32; 5]>,
+    scroll_starts: Vec<usize>,
+    radius: f32,
+}
+
+impl Collect {
+    fn clip_from(&mut self, start: usize, viewport: Rectangle, translation: Vector) {
+        for region in &mut self.regions[start..] {
+            let bounds = Rectangle {
+                x: region[0] - translation.x,
+                y: region[1] - translation.y,
+                width: region[2],
+                height: region[3],
+            };
+            let bounds = bounds.intersection(&viewport).unwrap_or_default();
+            region[..4].copy_from_slice(&[bounds.x, bounds.y, bounds.width, bounds.height]);
+        }
+    }
+}
+
+impl widget::Operation for Collect {
+    fn traverse(&mut self, children: &mut dyn FnMut(&mut dyn widget::Operation)) {
+        children(self);
+    }
+
+    fn container(&mut self, id: Option<&widget::Id>, bounds: Rectangle) {
+        if id == Some(&island_id()) {
+            self.regions
+                .push([bounds.x, bounds.y, bounds.width, bounds.height, self.radius]);
+        }
+    }
+
+    fn pre_operation(&mut self, _id: Option<&widget::Id>) {
+        // Iced visits scrollable content before its scrollable callback. Record
+        // the range so only that subtree receives its offset and viewport clip.
+        self.scroll_starts.push(self.regions.len());
+    }
+
+    fn scrollable(
+        &mut self,
+        _id: Option<&widget::Id>,
+        bounds: Rectangle,
+        _content: Rectangle,
+        translation: Vector,
+        _state: &mut dyn widget::operation::Scrollable,
+    ) {
+        if let Some(start) = self.scroll_starts.pop() {
+            self.clip_from(start, bounds, translation);
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use cosmic::iced::advanced::{clipboard, renderer::Headless};
+    use cosmic::iced::{Font, Pixels, widget as widgets};
+    use cosmic::widget::{container, row};
+
+    #[test]
+    fn measured_islands_and_live_layout_switches_publish_only_changed_bounds() {
+        let runtime = tokio::runtime::Builder::new_current_thread()
+            .enable_all()
+            .build()
+            .unwrap();
+        let renderer = runtime
+            .block_on(<cosmic::Renderer as Headless>::new(
+                Font::default(),
+                Pixels(14.),
+                Some("tiny-skia"),
+            ))
+            .unwrap();
+        let viewport = Rectangle::new((0., 0.).into(), (600., 28.).into());
+        let mut tree = None;
+        let theme = crate::ShellTheme {
+            bar_height: 28.,
+            panel_padding: 12.,
+            bar_radius: 14.,
+            ..Default::default()
+        };
+
+        for (mode, padding) in [
+            (BarLayout::Islands, 12.),
+            (BarLayout::Islands, 4.),
+            (BarLayout::Islands, 0.),
+            (BarLayout::Continuous, 32.),
+            (BarLayout::Islands, 12.),
+        ] {
+            let section = |width| {
+                let inner = container(widgets::Space::new().width(width).height(24))
+                    .class(cosmic::theme::Container::custom(move |_| {
+                        crate::bar::bar_group_style(theme)
+                    }))
+                    .into();
+                crate::bar::island(inner, theme, padding, mode == BarLayout::Islands, true)
+            };
+            let islands = row![section(100), section(200),].spacing(60);
+            let content = container(islands)
+                .padding([0, 12])
+                .width(600)
+                .height(28)
+                .align_y(cosmic::iced::alignment::Vertical::Center)
+                .into();
+            let mut view = frame(
+                content,
+                mode,
+                14.,
+                |_| {},
+                |regions| {
+                    cosmic::Action::App(crate::Message::BarRegionsChanged(
+                        cosmic::iced::window::Id::unique(),
+                        regions,
+                    ))
+                },
+            );
+            let tree = tree.get_or_insert_with(|| widget::Tree::new(&view));
+            tree.diff(&mut view);
+            let node = view
+                .as_widget_mut()
+                .layout(tree, &renderer, &layout::Limits::new(Size::ZERO, viewport.size()));
+            let mut messages = Vec::new();
+
+            for _ in 0..5 {
+                view.as_widget_mut().update(
+                    tree,
+                    &Event::Window(cosmic::iced::window::Event::RedrawRequested(std::time::Instant::now())),
+                    Layout::new(&node),
+                    mouse::Cursor::Unavailable,
+                    &renderer,
+                    &mut clipboard::Null,
+                    &mut Shell::new(&mut messages),
+                    &viewport,
+                );
+            }
+
+            assert_eq!(messages.len(), 1, "unchanged frames must not rebuild input regions");
+            let expected = if mode == BarLayout::Islands {
+                vec![
+                    [12., 0., 100. + 2. * padding, 28., 14.],
+                    [172. + 2. * padding, 0., 200. + 2. * padding, 28., 14.],
+                ]
+            } else {
+                vec![[0., 0., 600., 28., 14.]]
+            };
+            let cosmic::Action::App(crate::Message::BarRegionsChanged(_, regions)) = &messages[0] else {
+                panic!("expected measured bar regions");
+            };
+            assert_eq!(*regions, expected);
+        }
+    }
+
+    #[test]
+    fn scrolling_clips_only_its_own_islands_and_preserves_fractional_positions() {
+        let mut collector = Collect {
+            regions: vec![[400., 2., 80., 24., 14.], [10.25, 2., 180., 24., 14.]],
+            scroll_starts: Vec::new(),
+            radius: 14.,
+        };
+        collector.clip_from(
+            1,
+            Rectangle::new((20., 0.).into(), (100., 28.).into()),
+            Vector::new(40.5, 0.),
+        );
+        assert_eq!(
+            collector.regions,
+            vec![[400., 2., 80., 24., 14.], [20., 2., 100., 24., 14.]]
+        );
+        collector.clip_from(0, Rectangle::new((0., 0.).into(), (200., 28.).into()), Vector::ZERO);
+        collector.regions.retain(|region| region[2] > 0. && region[3] > 0.);
+        assert_eq!(collector.regions, vec![[20., 2., 100., 24., 14.]]);
+    }
+}

shell/ferese-shell/src/config.rs

@@ -20,6 +20,9 @@ pub(crate) struct ShellConfig {
 #[derive(Clone, Debug, Deserialize)]
 #[serde(default)]
 pub(crate) struct StatusConfig {
+    pub(crate) bar_layout: ferese_config::BarLayout,
+    #[serde(deserialize_with = "ferese_config::deserialize_bar_island_padding")]
+    pub(crate) bar_island_padding: f32,
     pub(crate) keybinding_guide: bool,
     pub(crate) battery_percentage: bool,
     pub(crate) window_title: bool,
@@ -30,6 +33,8 @@ pub(crate) struct StatusConfig {
 impl Default for StatusConfig {
     fn default() -> Self {
         Self {
+            bar_layout: ferese_config::BarLayout::Continuous,
+            bar_island_padding: ferese_config::default_bar_island_padding(),
             keybinding_guide: true,
             battery_percentage: true,
             window_title: true,
@@ -634,6 +639,47 @@ mod tests {
         );
     }
 
+    #[test]
+    fn island_layout_is_opt_in_and_does_not_change_modal_opacity() {
+        assert_eq!(
+            parse_test_source("").unwrap().status.bar_layout,
+            ferese_config::BarLayout::Continuous
+        );
+        let normal = parse_test_source("theme { material { style \"translucent\"; opacity 0.7; }; }").unwrap();
+        let islands = parse_test_source(
+            "status { bar-layout \"islands\"; }\ntheme { material { style \"translucent\"; opacity 0.7; }; }",
+        )
+        .unwrap();
+        assert_eq!(islands.status.bar_layout, ferese_config::BarLayout::Islands);
+        assert_eq!(islands.theme.surface_popover, normal.theme.surface_popover);
+        assert_eq!(islands.theme.surface_base, normal.theme.surface_base);
+        assert_eq!(islands.theme.bar_background, normal.theme.bar_background);
+        assert!(parse_test_source("status { bar-layout \"invalid\"; }").is_err());
+    }
+
+    #[test]
+    fn island_padding_accepts_compact_and_fractional_values_without_changing_panel_padding() {
+        let defaults = parse_test_source("").unwrap();
+        assert_eq!(defaults.status.bar_island_padding, 4.);
+        assert_eq!(
+            parse_test_source("status { bar-layout \"islands\"; }")
+                .unwrap()
+                .status
+                .bar_island_padding,
+            4.
+        );
+        for padding in [0., 4., 4.5, 32.] {
+            let source = format!("status {{ bar-island-padding {padding}; }}");
+            let config = parse_test_source(&source).unwrap();
+            assert_eq!(config.status.bar_island_padding, padding);
+            assert_eq!(config.theme.panel_padding, defaults.theme.panel_padding);
+        }
+
+        for value in ["-1", "32.5", "\"small\""] {
+            assert!(parse_test_source(&format!("status {{ bar-island-padding {value}; }}")).is_err());
+        }
+    }
+
     #[test]
     fn parses_theme_without_rejecting_compositor_sections() {
         let config: FereseConfig = ferese_config::from_str(

shell/ferese-shell/src/main.rs

@@ -223,11 +223,13 @@ struct OutputSurfaces {
     notes: Vec<(String, window::Id)>,
     size: Option<(i32, i32)>,
     effects: Option<EffectsBinding>,
+    bar_regions: Vec<[f32; 5]>,
     hidden: bool,
 }
 
 #[derive(Clone, Debug)]
 enum Message {
+    BarRegionsChanged(window::Id, Vec<[f32; 5]>),
     ThemeChanged(Box<ferese_ipc::theme::Snapshot>),
     ThemeMode(ferese_config::theme::Mode),
     ThemeModeSet(Result<(), String>),
@@ -413,6 +415,18 @@ impl cosmic::Application for FereseShell {
 
     fn update(&mut self, message: Self::Message) -> Task<Self::Message> {
         match message {
+            Message::BarRegionsChanged(id, regions) => {
+                let Some(output) = self.outputs.iter_mut().find(|output| output.bar == id) else {
+                    return Task::none();
+                };
+
+                output.bar_regions = regions;
+                set_input_zone(
+                    id,
+                    bar::input_region(self.config.status.bar_layout, output.hidden, &output.bar_regions),
+                )
+            }
+
             Message::ThemeChanged(snapshot) => {
                 let mut config = self.config.clone();
                 config.apply_theme(&snapshot.presented);
@@ -793,7 +807,10 @@ impl cosmic::Application for FereseShell {
                             {
                                 eprintln!("ferese-shell: could not update panel material: {error}");
                             }
-                            tasks.push(set_input_zone(entry.bar, if hidden { Some(Vec::new()) } else { None }));
+                            tasks.push(set_input_zone(
+                                entry.bar,
+                                bar::input_region(self.config.status.bar_layout, hidden, &entry.bar_regions),
+                            ));
                         }
                         if self.bar_hidden(self.bar_surface_id) {
                             tasks.push(self.destroy_menu());
@@ -1116,7 +1133,7 @@ mod tests {
     fn startup_surface_clear_is_transparent_and_bar_fallback_is_dark() {
         let theme = ShellTheme::default();
         assert_eq!(shell_surface_style(theme).background_color, Color::TRANSPARENT);
-        let Some(Background::Color(background)) = bar_style(theme.for_bar(), false).background else {
+        let Some(Background::Color(background)) = bar_style(theme.for_bar(), false, false).background else {
             panic!("first frame needs a fallback fill before material attachment");
         };
         assert!(background.r < 0.15 && background.g < 0.15 && background.b < 0.20);
@@ -1127,7 +1144,7 @@ mod tests {
     #[test]
     fn bar_fallback_uses_the_matching_dark_palette_and_geometry() {
         let theme = ShellTheme::default().for_bar();
-        let style = bar_style(theme, false);
+        let style = bar_style(theme, false, false);
         assert_eq!(style.background, Some(Background::Color(color(theme.bar_background))));
         assert_eq!(style.text_color, Some(color(theme.bar_text_primary)));
         assert_eq!(style.border.radius, theme.bar_radius.into());
@@ -1137,7 +1154,7 @@ mod tests {
     #[test]
     fn bar_does_not_cover_the_selected_compositor_material() {
         let theme = ShellTheme::default().for_bar();
-        let style = bar_style(theme, true);
+        let style = bar_style(theme, true, false);
         assert_eq!(style.background, None);
         assert_eq!(style.text_color, Some(color(theme.bar_text_primary)));
         assert_eq!(style.border.radius, theme.bar_radius.into());

shell/ferese-shell/src/status_ui/bar.rs

@@ -5,13 +5,12 @@ use cosmic::{Element, theme};
 
 use super::Menu;
 use crate::status::Snapshot;
-use crate::{
-    BarMetrics, FereseShell, Message, accented_icon, bar_content, bar_group_style, color, motion, recording, text,
-};
+use crate::{BarMetrics, FereseShell, Message, accented_icon, bar_content, color, motion, recording, text};
 
 impl FereseShell {
     pub fn view_status_bar(&self) -> Element<'_, cosmic::Action<Message>> {
         let theme = self.config.theme.for_bar();
+        let islands = self.config.status.bar_layout == ferese_config::BarLayout::Islands;
         let metrics = BarMetrics::from(theme);
         let mut controls = row::with_capacity(6).spacing(1).align_y(Alignment::Center);
         for kind in [
@@ -125,10 +124,14 @@ impl FereseShell {
                 });
             controls = controls.push(motion::button(control, foreground, selected, 1.0));
         }
+        if islands {
+            return controls.into();
+        }
+
         container(controls)
             .padding([2, 3])
             .height(metrics.group_height)
-            .class(theme::Container::custom(move |_| bar_group_style(theme)))
+            .class(theme::Container::custom(move |_| crate::bar::bar_group_style(theme)))
             .into()
     }
 }

shell/ferese-shell/src/surfaces.rs

@@ -75,6 +75,7 @@ impl FereseShell {
         let bar_surface_id = window::Id::unique();
         let wallpaper_surface_id = window::Id::unique();
         let shell_theme = self.config.theme;
+        let bar_layout = self.config.status.bar_layout;
         let bar = BarMetrics::from(shell_theme);
         let wallpaper_output = output.clone();
         let bar_output = output.clone();
@@ -94,6 +95,7 @@ impl FereseShell {
                 .is_none()
                 .then_some(wallpaper_surface_id),
             effects: None,
+            bar_regions: Vec::new(),
             clock: None,
             notes: Vec::new(),
             size,
@@ -122,7 +124,7 @@ impl FereseShell {
             |_| Default::default(),
             move |_| SctkLayerSurfaceSettings {
                 id: bar_surface_id,
-                input_zone: hidden.then(Vec::new),
+                input_zone: super::bar::input_region(bar_layout, hidden, &[]),
                 layer: Layer::Top,
                 keyboard_interactivity: KeyboardInteractivity::None,
                 anchor: Anchor::TOP | Anchor::LEFT | Anchor::RIGHT,
@@ -394,6 +396,7 @@ impl FereseShell {
 
     pub(super) fn attach_effects(&mut self, id: window::Id, surface: &wl_surface::WlSurface) {
         let hidden = self.bar_hidden(id);
+        let islands = self.config.status.bar_layout == ferese_config::BarLayout::Islands;
         let Some(entry) = self.outputs.iter_mut().find(|entry| entry.bar == id) else {
             return;
         };
@@ -404,7 +407,14 @@ impl FereseShell {
 
         EFFECT_FRAME_PENDING.store(false, Ordering::Relaxed);
 
-        match EffectsBinding::attach(surface, !hidden) {
+        let binding = if islands {
+            // Wait for measured island bounds rather than briefly painting the full bar.
+            EffectsBinding::attach_role(surface, None, 1.0)
+        } else {
+            EffectsBinding::attach(surface, !hidden)
+        };
+
+        match binding {
             Ok(binding) => entry.effects = Some(binding),
             Err(error) => eprintln!("ferese-shell: panel material unavailable: {error}"),
         }