@falcondev-oss/nuxt-layers-base 0.41.3 → 0.42.0

package/app/components/layout/LayoutNavbar.tsx

@@ -11,6 +11,7 @@ import type {
 import type { MaybeRefOrGetter, Ref, VNode } from 'vue'
 import type { ToolbarTool } from '../../composables/useToolbar'
 import type { AddPropertyPrefix } from '../../types/helpers'
+import { useResizeObserver } from '@vueuse/core'
 import * as R from 'remeda'
 import {
   ForwardSlots,
@@ -20,8 +21,10 @@ import {
   UDashboardSidebarCollapse,
   UDashboardToolbar,
   UNavigationMenu,
+  UOverflowButtons,
   USeparator,
 } from '#components'
+import { useAvailableWidth } from '../../composables/useAvailableWidth'
 import { toolbarToolsKey } from '../../composables/useToolbar'
 import { mergeSlotClass } from '../../utils/ui'
 
@@ -87,13 +90,64 @@ export default defineSetupComponent(
           ...providedTools.value.map((tool) => toValue(tool)),
         ])
 
-        const toolsMenu = () => (
-          <UNavigationMenu items={toolItems.value} highlight ui={props.tools?.ui} />
+        /** `compact`: tighter rows, for the wrapped toolbar where the tools are the only line. */
+        const toolsMenu = (compact = false) => (
+          <UNavigationMenu
+            items={toolItems.value}
+            ui={{
+              ...props.tools?.ui,
+              ...(compact && {
+                item: mergeSlotClass(props.tools?.ui?.item, 'py-1'),
+              }),
+            }}
+          />
+        )
+
+        // how much of the tabs' toolbar is left for the tools, next to the tabs. Measured off an
+        // anchor that stays at the end of that toolbar, so the answer doesn't change once the
+        // tools have moved to a toolbar of their own — they'd have no way back.
+        const toolsAnchor = ref<HTMLElement>()
+        const toolsSpace = useAvailableWidth(toolsAnchor)
+        // only ever the inline row — the wrapped one is compact, and a width measured there
+        // would not be the width the tools need to come back up
+        const toolsRow = ref<HTMLElement>()
+        // `shrink-0`, so this stays the tools' natural width even once the row runs short
+        const toolsWidth = ref(0)
+        useResizeObserver(toolsRow, () => {
+          const width = toolsRow.value?.offsetWidth
+          if (width) toolsWidth.value = width
+        })
+        // while wrapped the tools are out of the inline row, so nothing would re-measure them
+        // there. Forget the width when they change, and they come back up to be measured again.
+        watch(toolItems, () => {
+          toolsWidth.value = 0
+        })
+
+        const toolsWrapped = computed(
+          () => toolsSpace.value < toolsWidth.value + 7 /* 2*gap-1.5 + 1px divider */,
+        )
+        // the tools sit flush right, so what is left of the row past their own width is the
+        // clear space between them and the tabs
+        const toolsCrowded = computed(
+          () => !toolsWrapped.value && toolsSpace.value - toolsWidth.value < 3 * 16 /* 3rem */,
+        )
+        /** A divider goes between the tabs and the tools whenever they share a line and sit
+         * close enough to run together. Left-aligned tools always do — they follow the tabs. */
+        const showDivider = computed(
+          () =>
+            !!props.tabs &&
+            toolItems.value.length > 0 &&
+            !toolsWrapped.value &&
+            (props.tools?.left || toolsCrowded.value),
         )
 
         const navbarUi = computed<DashboardNavbarProps['ui']>(() => ({
           ...props.navbar?.ui,
           toggle: mergeSlotClass(props.navbar?.ui?.toggle, '-ml-1'),
+          // Sized by its own content up to half the row, never squeezed by the actions: the edge
+          // they measure their room from has to stay put, or an action that gives way frees space
+          // for the title to grow into and comes straight back.
+          left: mergeSlotClass(props.navbar?.ui?.left, 'max-w-1/2 shrink-0'),
           ...(props.navbar?.breadcrumb && {
             root: mergeSlotClass(props.navbar.ui?.root, 'h-auto min-h-(--ui-header-height) py-2'),
           }),
@@ -109,6 +163,7 @@ export default defineSetupComponent(
                       <ForwardSlots slots={navbarSlots.value}>
                         <UDashboardNavbar
                           ui={navbarUi.value}
+                          {...useAvailableWidth.root}
                           class="bg-white"
                           title={props.navbar.title}
                           v-slots={vSlots(UDashboardNavbar, {
@@ -118,7 +173,14 @@ export default defineSetupComponent(
                                 : []),
 
                               <div class="flex min-w-0 flex-col items-start gap-0.5">
-                                <div class="flex min-w-0 items-center gap-1.5">
+                                <div
+                                  class={[
+                                    'flex min-w-0 items-center gap-1.5',
+                                    // the breadcrumb sets the column's width and the title
+                                    // truncates into it, instead of the other way round
+                                    props.navbar?.breadcrumb && 'w-0 min-w-full',
+                                  ]}
+                                >
                                   <h1 class="text-highlighted truncate font-semibold">
                                     {slots['navbar-title']?.() ?? props.navbar?.title}
                                   </h1>
@@ -145,9 +207,9 @@ export default defineSetupComponent(
                             ],
                             right: (slotProps) => [
                               <>{slots['navbar-right']?.(slotProps)}</>,
-                              <div id="navbar-actions" class="flex items-center gap-2">
+                              <UOverflowButtons id="navbar-actions">
                                 {slots['navbar-actions']?.()}
-                              </div>,
+                              </UOverflowButtons>,
                             ],
                           })}
                         />
@@ -157,30 +219,95 @@ export default defineSetupComponent(
                 ...(props.tabs || toolItems.value.length > 0
                   ? [
                       <UDashboardToolbar
-                        ui={props.toolbarUi}
+                        ui={{
+                          ...props.toolbarUi,
+                          // right-aligned tools: stretched, so the space held open past the
+                          // tabs is the row's own and the divider can centre itself in it
+                          ...(!props.tools?.left &&
+                            props.tabs && {
+                              left: mergeSlotClass(props.toolbarUi?.left, 'grow'),
+                            }),
+                        }}
+                        {...useAvailableWidth.root}
                         class={['bg-white', (props.tabs || props.tools?.left) && '*:first:-ml-2']}
                         v-slots={vSlots(UDashboardToolbar, {
                           ...((props.tabs || props.tools?.left) && {
                             left: () => [
+                              // the fixed edge the room for the tools is measured from
                               ...(props.tabs
                                 ? [
                                     <UNavigationMenu
                                       items={props.tabs.items}
                                       highlight
                                       variant="link"
+                                      class="shrink-0"
                                       ui={props.tabs.ui}
                                     />,
                                   ]
                                 : []),
-                              ...(props.tabs && props.tools?.left && toolItems.value.length > 0
-                                ? [<USeparator orientation="vertical" class="h-7" />]
-                                : []),
-                              ...(props.tools?.left ? [toolsMenu()] : []),
+                              // Everything past the tabs is room the tools may take, so all of it
+                              // counts as free for the measurement, whether the tools are
+                              // standing in it or not, and they keep their way back.
+                              ...(props.tools?.left
+                                ? [
+                                    ...(showDivider.value
+                                      ? [
+                                          <USeparator
+                                            {...useAvailableWidth.free}
+                                            orientation="vertical"
+                                            class="h-7"
+                                          />,
+                                        ]
+                                      : []),
+                                    ...(toolsWrapped.value
+                                      ? []
+                                      : [
+                                          <div
+                                            ref={toolsRow}
+                                            {...useAvailableWidth.free}
+                                            class="shrink-0"
+                                          >
+                                            {toolsMenu()}
+                                          </div>,
+                                        ]),
+                                  ]
+                                : // right-aligned: held open here, for the divider to centre in
+                                  [
+                                    <div
+                                      {...useAvailableWidth.free}
+                                      class="flex grow justify-center"
+                                    >
+                                      {showDivider.value ? (
+                                        <USeparator orientation="vertical" class="h-7" />
+                                      ) : null}
+                                    </div>,
+                                  ]),
                             ],
                           }),
-                          ...(!props.tools?.left && {
-                            right: () => [toolsMenu()],
-                          }),
+                          right: () => [
+                            // `hidden`, so it measures the row without taking a place in it
+                            <div ref={toolsAnchor} class="hidden" />,
+                            // the room the tools stand in is the room the anchor measures — read
+                            // as free whether they are in it or not, so they keep their way back
+                            ...(!props.tools?.left && !toolsWrapped.value
+                              ? [
+                                  <div ref={toolsRow} {...useAvailableWidth.free} class="shrink-0">
+                                    {toolsMenu()}
+                                  </div>,
+                                ]
+                              : []),
+                          ],
+                        })}
+                      />,
+                    ]
+                  : []),
+                ...(toolsWrapped.value
+                  ? [
+                      <UDashboardToolbar
+                        ui={props.toolbarUi}
+                        class="min-h-fit! bg-white"
+                        v-slots={vSlots(UDashboardToolbar, {
+                          default: () => [<div class="-ml-2 shrink-0">{toolsMenu(true)}</div>],
                         })}
                       />,
                     ]

package/app/components/u/UOverflowButtons.tsx

@@ -0,0 +1,141 @@
+import type { VNode } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import { Comment, Fragment, isVNode } from 'vue'
+import { UButton, UPopover } from '#components'
+import { useAvailableWidth } from '../../composables/useAvailableWidth'
+
+/** JSX children and `v-if`/`v-for` arrive nested — unpack them to reach the individual actions.
+ * A `v-if` that didn't take leaves a comment placeholder behind, which is not an action. */
+function flattenActions(nodes: unknown[]): VNode[] {
+  return nodes.flatMap((node) => {
+    if (Array.isArray(node)) return flattenActions(node)
+    if (!isVNode(node) || node.type === Comment) return []
+    if (node.type === Fragment && Array.isArray(node.children)) return flattenActions(node.children)
+    return [node]
+  })
+}
+
+/** `gap-2` between the actions, as a number to compute with. */
+const GAP = 8
+
+/** Out of flow, so the trigger keeps its measurable width without taking up a slot in the row. */
+const PARKED = 'pointer-events-none invisible absolute left-0'
+
+export default defineSetupComponent(
+  (_: {
+    props: {
+      id?: string
+    }
+    // the id only labels the row in the DOM, so it rides along as an inherited attribute
+    propKeys: never
+    slots: {
+      default: () => VNode[]
+    }
+  }) =>
+    options(_, {
+      name: 'UOverflowButtons',
+      props: [],
+      emits: [],
+      setup: (_props, { slots }) => {
+        const root = ref<HTMLElement>()
+        const space = useAvailableWidth(root)
+
+        const triggerWidth = ref(0)
+        /** Action widths by index, kept from when the action last stood in the row — one that has
+         * given way is in the popover instead, where its width says nothing about the row. */
+        const widths = ref<(number | undefined)[]>([])
+
+        function measure() {
+          const next = [...widths.value]
+          let changed = false
+          const children = [...(root.value?.children ?? [])] as HTMLElement[]
+          for (const child of children) {
+            // `github/no-dataset` wants `getAttribute`, `unicorn/dom-node-dataset` wants this
+            // eslint-disable-next-line github/no-dataset
+            const index = child.dataset.actionIndex
+            const width = child.offsetWidth
+            if (index === undefined) {
+              triggerWidth.value = width
+            } else if (next[Number(index)] !== width) {
+              next[Number(index)] = width
+              changed = true
+            }
+          }
+          if (changed) widths.value = next
+        }
+        onMounted(measure)
+        onUpdated(measure)
+        // an action that only reaches its final width later — an icon, a font — resizes the row
+        useResizeObserver(root, measure)
+
+        /** How many actions have to give way, counting from the left. */
+        function overflowCount(count: number) {
+          const actions = Array.from({ length: count }, (_, index) => widths.value[index])
+          // an action that has never stood in the row has no width yet: show it and measure it
+          if (actions.includes(undefined)) return 0
+
+          const known = actions as number[]
+          const full = known.reduce((sum, width) => sum + width + GAP, -GAP)
+          if (full <= space.value) return 0
+
+          let used = triggerWidth.value
+          let visible = 0
+          for (const width of known.toReversed()) {
+            used += width + GAP
+            if (used > space.value) break
+            visible++
+          }
+          return count - visible
+        }
+
+        return () => {
+          const actions = flattenActions(slots.default?.() ?? [])
+          const overflowing = overflowCount(actions.length)
+
+          return (
+            <div ref={root} class="relative flex items-center gap-2">
+              {/* always rendered, so its width is known before the row has to make room for it */}
+              <div class={overflowing > 0 ? 'shrink-0' : PARKED}>
+                <UPopover
+                  // remounted when the row stops overflowing, so an open menu doesn't stay
+                  // open and empty once its actions have gone back into the row
+                  key={String(overflowing > 0)}
+                  v-slots={vSlots(UPopover, {
+                    content: () => [
+                      <div class="flex flex-col items-stretch gap-2 p-2">
+                        {/* a second call to the slot, but for the actions the row leaves out —
+                            no action is ever mounted in both places.
+                            Rightmost first, so the menu continues where the row leaves off. */}
+                        {flattenActions(slots.default?.() ?? [])
+                          .slice(0, overflowing)
+                          .toReversed()}
+                      </div>,
+                    ],
+                  })}
+                >
+                  <UButton
+                    icon="i-lucide-ellipsis"
+                    color="neutral"
+                    variant="subtle"
+                    aria-label="Weitere Aktionen"
+                  />
+                </UPopover>
+              </div>
+
+              {actions.slice(overflowing).map((action, index) => (
+                // `shrink-0`, so a row that has run short measures the action's natural width
+                // — the width it would need to stay — rather than its squeezed one
+                <div
+                  key={overflowing + index}
+                  data-action-index={overflowing + index}
+                  class="shrink-0"
+                >
+                  {action}
+                </div>
+              ))}
+            </div>
+          )
+        }
+      },
+    }),
+)

package/app/components/u/URibbonCard.tsx

@@ -1,10 +1,20 @@
 import type { CardProps, CardSlots } from '@nuxt/ui'
 import type { VNode } from 'vue'
 import { useForwardProps } from 'reka-ui'
-import { omit } from 'remeda'
+import { omit, partition } from 'remeda'
+import { Fragment } from 'vue'
 import { UCard } from '#components'
 import { mergeSlotClass } from '../../utils/ui'
 
+/** `v-if`/`v-for` in the slot arrive as fragments — unpack them to reach the sections. */
+function flattenSections(nodes: VNode[]): VNode[] {
+  return nodes.flatMap((node) =>
+    node.type === Fragment && Array.isArray(node.children)
+      ? flattenSections(node.children as VNode[])
+      : [node],
+  )
+}
+
 export default defineSetupComponent(
   (_: {
     props: CardProps
@@ -21,34 +31,47 @@ export default defineSetupComponent(
       setup: (props, { slots, attrs }) => {
         const forwarded = useForwardProps(props)
 
-        return () => (
-          <div class="flex flex-col">
-            {slots.ribbon ? (
-              // the ribbon's lower edge runs behind the card, so the card keeps its own rounded top
-              <div
-                class={[
-                  'divide-default ring-default bg-elevated flex items-stretch divide-x overflow-x-auto rounded-t-lg shadow-[inset_0_2px_3px_-2px_rgb(0_0_0/0.06),inset_2px_0_3px_-2px_rgb(0_0_0/0.06),inset_-2px_0_3px_-2px_rgb(0_0_0/0.06)] ring',
-                  slots.default ? '-mb-2 pb-2' : 'rounded-b-lg',
-                ]}
-              >
-                {slots.ribbon()}
-              </div>
-            ) : null}
+        return () => {
+          const [endSections, leadingSections] = slots.ribbon
+            ? partition(flattenSections(slots.ribbon()), (node) => Boolean(node.props?.end))
+            : [[], []]
+
+          return (
+            <div class="flex flex-col">
+              {slots.ribbon ? (
+                // the ribbon's lower edge runs behind the card, so the card keeps its own rounded top;
+                // sections draw their own top/left border shifted by -1px, so the outer ones get clipped
+                <div
+                  class={[
+                    'ring-default bg-elevated flex flex-wrap justify-end overflow-hidden rounded-t-lg shadow-[inset_0_2px_3px_-2px_rgb(0_0_0/0.06),inset_2px_0_3px_-2px_rgb(0_0_0/0.06),inset_-2px_0_3px_-2px_rgb(0_0_0/0.06)] ring',
+                    slots.default ? '-mb-2 pb-2' : 'rounded-b-lg',
+                  ]}
+                >
+                  {leadingSections}
+
+                  {endSections.length > 0 ? (
+                    // one flex item, so the end sections wrap onto their own line as a group
+                    // instead of splitting up — the leading sections give way first
+                    <div class="flex flex-wrap justify-end">{endSections}</div>
+                  ) : null}
+                </div>
+              ) : null}
 
-            {slots.default ? (
-              <UCard
-                {...attrs}
-                {...forwarded.value}
-                ui={{
-                  ...forwarded.value.ui,
-                  body: mergeSlotClass(forwarded.value.ui?.body, 'p-0!'),
-                }}
-                class="relative shadow-[0_-2px_3px_-1px_rgb(0_0_0/0.08)]"
-                v-slots={vSlots(UCard, omit(slots, ['ribbon']))}
-              />
-            ) : null}
-          </div>
-        )
+              {slots.default ? (
+                <UCard
+                  {...attrs}
+                  {...forwarded.value}
+                  ui={{
+                    ...forwarded.value.ui,
+                    body: mergeSlotClass(forwarded.value.ui?.body, 'p-0!'),
+                  }}
+                  class="relative shadow-[0_-2px_3px_-1px_rgb(0_0_0/0.08)]"
+                  v-slots={vSlots(UCard, omit(slots, ['ribbon']))}
+                />
+              ) : null}
+            </div>
+          )
+        }
       },
     }),
 )

package/app/components/u/URibbonSection.tsx

@@ -21,9 +21,12 @@ export default defineSetupComponent(
           <div
             data-end={props.end || undefined}
             class={[
-              'flex shrink-0 flex-col gap-1.5 px-3 py-2',
-              props.end &&
-                'border-default [&:not([data-end]~*)]:ml-auto [&:not([data-end]~*)]:border-l',
+              'border-default -mt-px -ml-px flex min-w-fit flex-col gap-1.5 border-l px-3 py-2',
+              // the row separator spans the full ribbon width (clipped by its overflow-hidden), so a
+              // partially filled wrapped line still gets an unbroken line above it
+              'before:border-default relative before:absolute before:inset-x-[-100vw] before:top-0 before:border-t',
+              // end sections hug their content, so the leading sections absorb the spare space
+              props.end ? 'flex-none' : 'flex-1',
             ]}
           >
             {props.title ? <p class="text-dimmed text-[10px] leading-none">{props.title}</p> : null}

package/app/components/u/UToggleButton.tsx

@@ -19,7 +19,12 @@ export default defineSetupComponent(
           <UButton
             color="neutral"
             variant="soft"
-            class={['ring-accented px-1.5! ring', props.modelValue && 'bg-accented']}
+            class={[
+              'ring-accented px-1.5! py-1.5! ring ring-inset',
+              props.modelValue && 'bg-white',
+            ]}
+            label={props.label}
+            ui={{ label: props.modelValue ? undefined : 'text-toned' }}
             aria-pressed={props.modelValue}
             onClick={() => {
               emit('update:modelValue', !props.modelValue)
@@ -30,13 +35,14 @@ export default defineSetupComponent(
                 <span
                   class={[
                     'flex size-5 items-center justify-center rounded-sm transition-colors',
-                    props.modelValue ? 'bg-primary text-inverted' : 'text-muted',
+                    props.modelValue
+                      ? 'bg-primary text-inverted'
+                      : 'text-muted bg-white/50 shadow-[inset_0_0_2px_1px_rgb(0_0_0/0.04),inset_0_0_2px_rgb(0_0_0/0.1)]',
                   ]}
                 >
                   <Icon name={props.icon} class="size-4" />
                 </span>
               ),
-              default: () => props.label,
             }}
           </UButton>
         ),

package/app/composables/useAvailableWidth.ts

@@ -0,0 +1,130 @@
+import type { MaybeComputedElementRef } from '@vueuse/core'
+import { unrefElement, useResizeObserver } from '@vueuse/core'
+
+/** `Number()` stops at the `px` suffix computed styles come with. */
+// eslint-disable-next-line unicorn/prefer-number-coercion
+const px = (value: string) => Number.parseFloat(value)
+
+const FREE_ATTR = 'data-available-width-free'
+const ROOT_ATTR = 'data-available-width-root'
+
+const FREE = `[${FREE_ATTR}]`
+const ROOT = `[${ROOT_ATTR}]`
+
+/** The element next to `node` on `side`, skipping the ones that count as free. */
+function siblingOf(node: Element | null | undefined, side: 'left' | 'right') {
+  const step = (el: Element) =>
+    side === 'left' ? el.previousElementSibling : el.nextElementSibling
+  let sibling = node && step(node)
+  while (sibling?.matches(FREE)) sibling = step(sibling)
+  return (sibling ?? undefined) as HTMLElement | undefined
+}
+
+const leftOf = (node: Element | null | undefined) => siblingOf(node, 'left')
+const rightOf = (node: Element | null | undefined) => siblingOf(node, 'right')
+
+/** Which edge of an element the content left of `target` ends at. One that trails off into
+ * opted-out children hands over to the last child that isn't; one made of nothing but those
+ * ends where it begins, however wide it grew. */
+function contentEdge(el: HTMLElement): { el: HTMLElement; side: 'left' | 'right' } {
+  if (!el.lastElementChild?.matches(FREE)) return { el, side: 'right' }
+  const last = leftOf(el.lastElementChild)
+  return last ? contentEdge(last) : { el, side: 'left' }
+}
+
+/** The elements bounding `target` on either side, and the box they sit in. */
+function anchors(target: MaybeComputedElementRef) {
+  let node = unrefElement(target) as HTMLElement | null | undefined
+  let blocker: HTMLElement | undefined
+  while (node && !node.matches(ROOT)) {
+    // the innermost right-hand neighbour along the climb: room `target` may not spill into
+    blocker ??= rightOf(node)
+    if (leftOf(node)) break
+    node = node.parentElement
+  }
+
+  // at the root the climb ends whether or not something sits to its left: that is another row
+  const neighbor = node?.matches(ROOT) ? undefined : leftOf(node)
+  return {
+    // the edge may sit inside the neighbour, past the opted-out elements it ends with
+    edge: neighbor ? contentEdge(neighbor) : undefined,
+    blocker,
+    container: (node?.matches(ROOT) ? node : node?.parentElement) ?? undefined,
+  }
+}
+
+/**
+ * How much horizontal room `target` has to itself: from the right edge of the content left of it
+ * to the left edge of whatever follows it, or to their shared container's content box where
+ * nothing does. Stays meaningful when `target` overflows — unlike its own width, which is why it
+ * can decide what still fits.
+ *
+ *   useAvailableWidth.root
+ *  ┌───────────────────────────────────────────────────────┐
+ *  │  ┌───────────┐  ┌╌╌╌╌╌╌╌╌╌┐  ┌────────┐  ┌─────────┐  │
+ *  │  │ neighbour │  ╎  free   ╎  │ target │  │ blocker │  │
+ *  │  └───────────┘  └╌╌╌╌╌╌╌╌╌┘  └────────┘  └─────────┘  │
+ *  └─────────────────┬──────────────────────┬──────────────┘
+ *                    from                   to
+ *                    └─────── space ───────┘
+ *
+ * Elements spread with `useAvailableWidth.free` are read as empty space rather than as content
+ * — the measurement runs straight through them, so `target` may grow into the room they hold. The
+ * row containing `target` should carry `useAvailableWidth.root`: without it a target with nothing
+ * to its left keeps climbing and ends up measured against something elsewhere on the page.
+ *
+ * Either neighbour may be missing, in which case that end falls back to the container's content
+ * box. `target` itself is never measured — which is what keeps the answer meaningful once it
+ * overflows, and what lets an element that has given way find its way back.
+ */
+export function useAvailableWidth(target: MaybeComputedElementRef) {
+  // until measured, whatever asks gets "plenty" and renders in full
+  const space = ref(Infinity)
+
+  // which elements bound the gap is a fact about the current DOM, not a reactive derivation of
+  // `target` — re-resolve it on every measure, or the observer keeps watching elements that left
+  const container = shallowRef<HTMLElement>()
+  const edge = shallowRef<HTMLElement>()
+  const blocker = shallowRef<HTMLElement>()
+
+  function measure() {
+    const anchor = anchors(target)
+    container.value = anchor.container
+    edge.value = anchor.edge?.el
+    blocker.value = anchor.blocker
+    // detached, or no row to measure in: back to "plenty", not a stale answer about a gone DOM
+    if (!anchor.container) {
+      space.value = Infinity
+      return
+    }
+
+    const style = getComputedStyle(anchor.container)
+    const box = anchor.container.getBoundingClientRect()
+    // the container's own gap is not room `target` may use — unless that side stands open
+    const gap = px(style.columnGap) || 0
+
+    const from = anchor.edge
+      ? anchor.edge.el.getBoundingClientRect()[anchor.edge.side] +
+        (anchor.edge.side === 'right' ? gap : 0)
+      : box.left + px(style.paddingLeft)
+    const to = anchor.blocker
+      ? anchor.blocker.getBoundingClientRect().left - gap
+      : box.right - px(style.paddingRight)
+
+    space.value = to - from
+  }
+
+  useResizeObserver([container, edge, blocker], measure)
+  onMounted(measure)
+  // the elements bounding the gap come and go with the surrounding component's re-renders
+  onUpdated(measure)
+
+  return space
+}
+
+/** Spread onto the box the search for a target's neighbours stops at. */
+useAvailableWidth.root = { [ROOT_ATTR]: '' }
+
+/** Spread onto an element that only fills room the others left over — a divider centred in the
+ * gap, say. It sits in the flow, but the width it covers still counts as free. */
+useAvailableWidth.free = { [FREE_ATTR]: '' }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@falcondev-oss/nuxt-layers-base",
   "type": "module",
-  "version": "0.41.3",
+  "version": "0.42.0",
   "description": "Nuxt layer with lots of useful helpers and @nuxt/ui components",
   "license": "MIT",
   "repository": {