@bagelink/vue 1.15.94 → 1.15.96

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.94",
+  "version": "1.15.96",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Card.vue

@@ -1,15 +1,25 @@
 <script setup lang="ts">
 defineOptions({ name: 'BglCard' })
 import type { GradientDirProp, GradientProp } from '@bagelink/vue'
-import { computed } from 'vue'
+import { computed, useSlots } from 'vue'
 import { useGradientVariant } from '@bagelink/vue'
 
+const slots = useSlots()
+
 const props = defineProps<{
 	label?: string
-	/** Card header title. Pairs with the `#header-action` slot (e.g. a "View all"
-	    button or a more-menu) to render a divided header row — replacing the common
-	    hand-rolled `<div class="flex space-between border-bottom">…</div>` pattern.
-	    For full control use the `#header` slot instead. */
+	/** Card header title. Sits in the center of the header row. Pairs with the
+	    surrounding slots to build a 6-region card:
+
+	      ┌ #top-start ──── #header / title ──── #top-end (or #header-action) ┐
+	      │                      (default slot)                              │
+	      └ #bottom-start ─────── #footer ──────────────── #bottom-end ──────┘
+
+	    Start/end are logical (RTL-aware). The header row renders if any of
+	    `title` / `#header` / `#top-start` / `#top-end` / `#header-action` is
+	    present; the footer row renders if any of `#footer` / `#bottom-start` /
+	    `#bottom-end` is present. For full control of the header center, use the
+	    `#header` slot instead of `title`. */
 	title?: string
 	thin?: boolean
 	outline?: boolean
@@ -62,6 +72,15 @@ const is = computed(() => {
 	if (props.to !== undefined && props.to !== '') { return 'router-link' }
 	return 'div'
 })
+
+// Header row shows if any of the header pieces are present (or a title is set).
+const hasHeader = computed(() =>
+	!!(props.title || slots.header || slots['header-action'] || slots['top-start'] || slots['top-end']),
+)
+// Footer row shows if any footer piece is present.
+const hasFooter = computed(() =>
+	!!(slots.footer || slots['bottom-start'] || slots['bottom-end']),
+)
 </script>
 
 <template>
@@ -80,14 +99,47 @@ const is = computed(() => {
 		<span v-if="label" class="card_label block label">
 			{{ label }}
 		</span>
-		<!-- Header row: title + optional trailing action. Full override via #header. -->
-		<div v-if="$slots.header || title || $slots['header-action']" class="card_header flex space-between align-items-center">
-			<slot name="header">
-				<span class="card_header_title">{{ title }}</span>
-				<span class="card_header_action flex align-items-center gap-05"><slot name="header-action" /></span>
-			</slot>
+		<!-- Header row: [top-start] [header / title] [top-end / header-action].
+		     Logical (RTL-aware) start/end. A full `#header` override still replaces
+		     the title slot only, so `#top-start` / `#top-end` (and the legacy
+		     `#header-action`) keep working alongside it. -->
+		<div
+			v-if="hasHeader"
+			class="card_header flex space-between align-items-center w-100p"
+		>
+			<span v-if="$slots['top-start']" class="card_header_start flex align-items-center gap-05">
+				<slot name="top-start" />
+			</span>
+			<span class="card_header_main flex-grow w-100p">
+				<slot name="header">
+					<span class="card_header_title">{{ title }}</span>
+				</slot>
+			</span>
+			<span
+				v-if="$slots['top-end'] || $slots['header-action']"
+				class="card_header_action flex align-items-center gap-05"
+			>
+				<slot name="top-end"><slot name="header-action" /></slot>
+			</span>
 		</div>
+
 		<slot />
+
+		<!-- Footer row: [bottom-start] [footer] [bottom-end]. -->
+		<div
+			v-if="hasFooter"
+			class="card_footer flex space-between align-items-center"
+		>
+			<span v-if="$slots['bottom-start']" class="card_footer_start flex align-items-center gap-05">
+				<slot name="bottom-start" />
+			</span>
+			<span class="card_footer_main flex-grow">
+				<slot name="footer" />
+			</span>
+			<span v-if="$slots['bottom-end']" class="card_footer_end flex align-items-center gap-05">
+				<slot name="bottom-end" />
+			</span>
+		</div>
 	</component>
 </template>
 
@@ -106,10 +158,23 @@ padding: 0.85rem var(--bgl-card-pad);
 border-bottom: 1px solid var(--bgl-border-color);
 min-height: 0;
 }
+.card_header_main {
+text-align: start;
+min-width: 0;
+}
 .card_header_title {
 font-weight: 600;
 }
 
+/* Footer row: mirrors the header — full-bleed divider via negative margins,
+   border on top instead of bottom. */
+.card_footer {
+margin: var(--bgl-card-pad) calc(var(--bgl-card-pad) * -1) calc(var(--bgl-card-pad) * -1);
+padding: 0.85rem var(--bgl-card-pad);
+border-top: 1px solid var(--bgl-border-color);
+min-height: 0;
+}
+
 .bgl_card {
 --bgl-card-pad: 2rem;
 border-radius: var(--bgl-card-border-radius);
@@ -129,7 +194,6 @@ padding: var(--bgl-card-pad);
 /* When padding is stripped via the p-0 utility, the header supplies its own. */
 .bgl_card.p-0 { --bgl-card-pad: 0rem; }
 .bgl_card.p-0 .card_header { padding-inline: 1rem; padding-block: 0.75rem; margin-bottom: 0; }
-/* Likewise the label hangs off the card edge on a p-0 card, so give it its own. */
 .bgl_card.p-0 .card_label { padding-inline: 1rem; padding-top: 0.75rem; }
 
 .bgl_card.BagelTable {

package/src/components/ListItem.vue

@@ -229,40 +229,47 @@ opacity: 0.5;
 pointer-events: none;
 }
 
+/* Non-clickable rows render as a plain <div> — keep the default arrow cursor
+   (the base .list-item rule sets `cursor: pointer` for the interactive case).
+   The hover tint is already scoped to .list-item-fullrow, so nothing to undo. */
+.notClickable {
+cursor: default;
+}
+
 /* Accent used by the icon-chip and (for rounded/active) the tint. Defaults to
    primary; set per-item via `color` prop → --bgl-list-item-accent. */
 .list-item-row {
 --bgl-list-item-accent: var(--bgl-primary);
 }
 
-/* Hover/active use Bagelink's translucent gray tint, which already flips from
-   translucent-dark (light mode) to translucent-light (.bgl-dark-mode) — so it
-   reads correctly on any background. Override per-list with --bgl-list-item-hover. */
-.list-item:hover,
-.list-item.router-link-exact-active {
+/* Hover/active paint on the ROW (not the inner clickable element) so the tint
+   spans the whole item — including the #start/#end slots that live outside the
+   clickable area. Bagelink's translucent gray tint already flips from
+   translucent-dark (light mode) to translucent-light (.bgl-dark-mode), so it
+   reads correctly on any background. Override per-list with --bgl-list-item-hover.
+   Only interactive rows (those carrying .list-item-fullrow) get the tint — a
+   plain non-clickable row must stay flat. */
+.list-item-fullrow:hover,
+.list-item-row:has(.list-item.router-link-exact-active) {
 background-color: var(--bgl-list-item-hover, var(--bgl-gray-tint));
 }
-.list-item.router-link-exact-active,
-.list-item-active .list-item {
+.list-item-row:has(.list-item.router-link-exact-active),
+.list-item-active {
 background-color: var(--bgl-list-item-active, color-mix(in srgb, var(--bgl-list-item-accent) 12%, transparent));
 color: var(--bgl-list-item-accent);
 }
 
-/* Rounded card-style rows: pill-radius, tinted accent hover, no divider. */
-.list-item-rounded .list-item {
+/* Match the painted background to the row's corner style: flush rows are square,
+   while rounded/standalone rows pick up the card radius so the tint follows the
+   pill shape rather than bleeding past it. */
+.list-item-rounded {
 border-radius: var(--bgl-card-border-radius);
 }
-.list-item-rounded .list-item:hover {
+.list-item-rounded:hover {
 background-color: var(--bgl-list-item-hover, color-mix(in srgb, var(--bgl-list-item-accent) 8%, transparent));
 }
 
-.notClickable,
-.notClickable:hover {
-background-color: unset;
-cursor: default;
-}
-
-.list-item:active {
+.list-item-fullrow:active {
 filter: var(--bgl-hover-filter);
 }
 

package/src/components/layout/AppLayout.vue

@@ -13,6 +13,11 @@ interface Props {
 	/** Persist sidebar state to localStorage (desktop only). Default true. */
 	persist?: boolean
 	storageKey?: string
+	/** Width of the end-docked aside panel (e.g. an AI chat). Reserved as content
+	    margin while `asideOpen` is true. */
+	asideWidth?: string
+	/** v-model:asideOpen — controls whether content reserves room for the aside. */
+	asideOpen?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -22,6 +27,8 @@ const props = withDefaults(defineProps<Props>(), {
 	open: undefined,
 	persist: true,
 	storageKey: 'bgl-sidebar-open',
+	asideWidth: '400px',
+	asideOpen: false,
 })
 
 const emit = defineEmits<{ 'update:open': [value: boolean] }>()
@@ -73,11 +80,14 @@ function closeOnMobile() {
 
 // Computed styles for main content margin
 const mainContentStyles = computed(() => {
+	// The end-docked aside reserves room on desktop only (it overlays on mobile).
+	const marginInlineEnd = !isMobile.value && props.asideOpen ? props.asideWidth : '0'
 	if (isMobile.value) {
-		return { marginInlineStart: '0' }
+		return { marginInlineStart: '0', marginInlineEnd }
 	}
 	return {
-		marginInlineStart: isOpen.value ? props.sidebarWidth : sidebarCollapsedWidth
+		marginInlineStart: isOpen.value ? props.sidebarWidth : sidebarCollapsedWidth,
+		marginInlineEnd,
 	}
 })
 
@@ -113,6 +123,10 @@ onUnmounted(() => {
 		<!-- Sidebar Slot -->
 		<slot name="sidebar" v-bind="{ isOpen, isMobile, toggleMenu, closeOnMobile }" />
 
+		<!-- End-docked aside slot (e.g. AI chat). Owns its own open state +
+		     launcher; sync it to `asideOpen` so content reserves room for it. -->
+		<slot name="aside" v-bind="{ isMobile }" />
+
 		<!-- Main Content Area -->
 		<main
 			class="main-content flex column ease-300"
@@ -157,7 +171,9 @@ z-index: 40;
 .main-content {
 flex: 1;
 overflow: hidden;
-transition: margin-inline-start 400ms ease;
+/* Pushes when the sidebar or end aside opens/closes. Keep in sync with the
+   aside panel's own slide transition (see ChatPanel) so they move together. */
+transition: margin 300ms ease;
 	min-height: 100vh
 }