@keyfunc/keybricks-ds 2.4.2 → 2.4.4

package/components/data/SmartTable.jsx

@@ -11,7 +11,8 @@ const Pill = ({ hue = "gray", children }) => <span style={{ display: "inline-fle
 
 /** Notion/Airtable-style database grid ("smart table"): field-type icons in headers, colored select pills, person/date/checkbox/url/progress cells, row hover + expand, inline text/number editing, + New row, add-field column, per-column footer aggregates, and a view toolbar (Hide fields · Filter · Group · Sort · search). */
  /* A size region that defaults to sm: a database grid is a dense surface, so rows are the sm bar height (36), cells and toolbar read the sm control text (12px, 13px in CJK) and the toolbar's buttons are 28px. Pass size="md" for a roomier grid.
-    density: "default" rows are --bar-h (36 / 40 / 48) with --cell-px; "compact" rows are --control-h (28 / 32 / 40, the Spreadsheet's cell height) with the Spreadsheet's 8px padding (so at sm only the height changes). Header and footer follow. The toolbar's "Row height" menu switches it; rowHeight (a raw height) overrides density. */
+    density: "default" rows are --bar-h (36 / 40 / 48) with --cell-px; "compact" rows are --control-h (28 / 32 / 40, the Spreadsheet's cell height) with the Spreadsheet's 8px padding (so at sm only the height changes). Header and footer follow. The toolbar's "Row height" menu switches it; rowHeight (a raw height) overrides density.
+    Frozen edges (like Spreadsheet): the field header row is sticky to the top and the 40px row-number column to the left; the corner cell is sticky on both axes. Sticky cells keep the --bg-inset fill so body cells never show through, and the frozen edge is a --border-subtle hairline. */
 const DENSITY = { default: { h: "var(--bar-h)", px: "var(--cell-px)" }, compact: { h: "var(--control-h)", px: "8px" } };
 export function SmartTable({ fields = [], rows = [], title = "Grid view", toolbar = true, height, rowHeight, density: densityProp, defaultDensity = "default", onDensityChange, size = "sm", onChange, style }) {
   const [data, setData] = React.useState(rows);
@@ -27,6 +28,10 @@ export function SmartTable({ fields = [], rows = [], title = "Grid view", toolba
   const grid = { display: "grid", gridTemplateColumns: widths.join(" "), width: "fit-content", minWidth: "100%" };
   const cellBase = { display: "flex", alignItems: "center", gap: 5, padding: "0 " + DENSITY[density].px, borderRight: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", height: rowH, boxSizing: "border-box", overflow: "hidden", whiteSpace: "nowrap", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: "var(--text-primary)" };
   const tierIcon = { width: "var(--control-icon)", height: "var(--control-icon)" };
+  // Frozen edges — zIndex 1 (row-number column) < 2 (header row) < 3 (corner, both axes); the editing input sits inside a body cell, under them.
+  const stickyTop = { position: "sticky", top: 0, zIndex: 2, background: "var(--bg-inset)" };
+  const stickyLeft = { position: "sticky", left: 0, zIndex: 1, background: "var(--bg-inset)" };
+  const stickyCorner = { ...stickyTop, left: 0, zIndex: 3 };
   const agg = (f) => {
     if (!f.aggregate) return "";
     const vals = data.map(r => r[f.key]);
@@ -64,16 +69,16 @@ export function SmartTable({ fields = [], rows = [], title = "Grid view", toolba
       </div>}
       <div style={{ overflow: "auto", maxHeight: height }}>
         <div style={grid}>
-          <span style={{ ...cellBase, background: "var(--bg-inset)", justifyContent: "center" }}></span>
-          {fields.map(f => <span key={f.key} style={{ ...cellBase, background: "var(--bg-inset)", color: "var(--text-secondary)", fontWeight: "var(--weight-semibold)" }}><Icon name={typeIcon[f.type] || "type"} size={14} style={{ ...tierIcon, color: "var(--text-muted)" }} />{f.label}</span>)}
-          <span style={{ ...cellBase, background: "var(--bg-inset)", justifyContent: "center", padding: 0 }}><IconButton icon="plus" muted label="Add field" /></span>
+          <span style={{ ...cellBase, ...stickyCorner, justifyContent: "center" }}></span>
+          {fields.map(f => <span key={f.key} style={{ ...cellBase, ...stickyTop, color: "var(--text-secondary)", fontWeight: "var(--weight-semibold)" }}><Icon name={typeIcon[f.type] || "type"} size={14} style={{ ...tierIcon, color: "var(--text-muted)" }} />{f.label}</span>)}
+          <span style={{ ...cellBase, ...stickyTop, justifyContent: "center", padding: 0 }}><IconButton icon="plus" muted label="Add field" /></span>
           {data.map((row, r) => [
-            <span key={"n" + r} onMouseEnter={() => setHover(r)} onMouseLeave={() => setHover(-1)} style={{ ...cellBase, justifyContent: "center", color: "var(--text-muted)", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", letterSpacing: 0, background: hover === r ? "var(--bg-inset)" : "transparent", cursor: "pointer" }}>{hover === r ? <Icon name="maximize-2" size={14} style={{ ...tierIcon, color: "var(--action-primary)" }} /> : r + 1}</span>,
+            <span key={"n" + r} onMouseEnter={() => setHover(r)} onMouseLeave={() => setHover(-1)} style={{ ...cellBase, ...stickyLeft, justifyContent: "center", color: "var(--text-muted)", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", letterSpacing: 0, cursor: "pointer" }}>{hover === r ? <Icon name="maximize-2" size={14} style={{ ...tierIcon, color: "var(--action-primary)" }} /> : r + 1}</span>,
             ...fields.map(f => <span key={r + f.key} onMouseEnter={() => setHover(r)} onMouseLeave={() => setHover(-1)} onDoubleClick={() => { if (f.type === "text" || f.type === "number" || f.type === "date" || f.type === "url") { setEditing({ r, key: f.key }); setDraft(String(row[f.key] == null ? "" : row[f.key])); } }} style={{ ...cellBase, position: "relative", background: hover === r ? "var(--bg-inset)" : "transparent" }}>{renderCell(f, row, r)}</span>),
             <span key={"a" + r} style={{ ...cellBase, background: hover === r ? "var(--bg-inset)" : "transparent" }}></span>,
           ])}
           <button type="button" onClick={() => { const empty = {}; fields.forEach(f => empty[f.key] = f.type === "multiSelect" ? [] : f.type === "checkbox" ? false : ""); const next = [...data, empty]; setData(next); onChange && onChange(next); }} style={{ gridColumn: "1 / -1", display: "flex", alignItems: "center", gap: 6, height: rowH, padding: "0 var(--edge-pad)", border: "none", borderBottom: "1px solid var(--border-subtle)", background: "transparent", cursor: "pointer", color: "var(--text-secondary)", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", letterSpacing: "var(--control-tracking)", textAlign: "left" }} onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-inset)"} onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}><Icon name="plus" size={13} />New</button>
-          <span style={{ ...cellBase, borderBottom: "none", background: "var(--bg-inset)" }}></span>
+          <span style={{ ...cellBase, ...stickyLeft, borderBottom: "none" }}></span>
           {fields.map(f => <span key={"g" + f.key} style={{ ...cellBase, borderBottom: "none", background: "var(--bg-inset)", justifyContent: "flex-end", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", letterSpacing: 0, color: "var(--text-secondary)" }}>{agg(f)}</span>)}
           <span style={{ ...cellBase, borderBottom: "none", background: "var(--bg-inset)" }}></span>
         </div>

package/components/data/SmartTable.vue

@@ -11,8 +11,13 @@ const typeIcon = { text: 'type', longText: 'align-left', number: 'hash', select:
 const props = defineProps({ fields: { type: Array, default: () => [] }, rows: { type: Array, default: () => [] }, title: { type: String, default: 'Grid view' }, toolbar: { type: Boolean, default: true }, height: [Number, String], rowHeight: [Number, String], density: String, defaultDensity: { type: String, default: 'default' }, size: { type: String, default: 'sm' }, style: Object })
 // A size region that defaults to sm: a database grid is a dense surface, so rows are the sm bar height (36), cells and toolbar read the sm control text (12px, 13px in CJK) and the toolbar's buttons are 28px. Pass size="md" for a roomier grid.
 // density: 'default' rows are --bar-h (36 / 40 / 48) with --cell-px; 'compact' rows are --control-h (28 / 32 / 40, the Spreadsheet's cell height) with the Spreadsheet's 8px padding (so at sm only the height changes). Header and footer follow. The toolbar's "Row height" menu switches it (emits density-change; v-model:density to control); rowHeight (a raw height) overrides density.
+// Frozen edges (like Spreadsheet): the field header row is sticky to the top and the 40px row-number column to the left; the corner cell is sticky on both axes. Sticky cells keep the --bg-inset fill so body cells never show through, and the frozen edge is a --border-subtle hairline.
 const DENSITY = { default: { h: 'var(--bar-h)', px: 'var(--cell-px)' }, compact: { h: 'var(--control-h)', px: '8px' } }
 const tierIcon = { width: 'var(--control-icon)', height: 'var(--control-icon)' }
+// Frozen edges — zIndex 1 (row-number column) < 2 (header row) < 3 (corner, both axes); the editing input sits inside a body cell, under them.
+const stickyTop = { position: 'sticky', top: 0, zIndex: 2, background: 'var(--bg-inset)' }
+const stickyLeft = { position: 'sticky', left: 0, zIndex: 1, background: 'var(--bg-inset)' }
+const stickyCorner = { ...stickyTop, left: 0, zIndex: 3 }
 const emit = defineEmits(['change', 'update:density', 'densityChange'])
 const densityState = ref(props.defaultDensity)
 const density = computed(() => DENSITY[props.density || densityState.value] ? (props.density || densityState.value) : 'default')
@@ -48,11 +53,11 @@ function agg(f) {
     </div>
     <div :style="{ overflow: 'auto', maxHeight: typeof height === 'number' ? height + 'px' : height }">
       <div :style="{ display: 'grid', gridTemplateColumns: gridCols, width: 'fit-content', minWidth: '100%' }">
-        <span :style="{ ...cellBase, height: rowH, background: 'var(--bg-inset)' }" />
-        <span v-for="f in fields" :key="f.key" :style="{ ...cellBase, height: rowH, background: 'var(--bg-inset)', color: 'var(--text-secondary)', fontWeight: 'var(--weight-semibold)' }"><Icon :name="typeIcon[f.type] || 'type'" :size="14" :style="{ ...tierIcon, color: 'var(--text-muted)' }" />{{ f.label }}</span>
-        <span :style="{ ...cellBase, height: rowH, background: 'var(--bg-inset)', justifyContent: 'center', padding: 0 }"><IconButton icon="plus" muted label="Add field" /></span>
+        <span :style="{ ...cellBase, height: rowH, ...stickyCorner }" />
+        <span v-for="f in fields" :key="f.key" :style="{ ...cellBase, height: rowH, ...stickyTop, color: 'var(--text-secondary)', fontWeight: 'var(--weight-semibold)' }"><Icon :name="typeIcon[f.type] || 'type'" :size="14" :style="{ ...tierIcon, color: 'var(--text-muted)' }" />{{ f.label }}</span>
+        <span :style="{ ...cellBase, height: rowH, ...stickyTop, justifyContent: 'center', padding: 0 }"><IconButton icon="plus" muted label="Add field" /></span>
         <template v-for="(row, r) in data" :key="r">
-          <span @mouseenter="hover = r" @mouseleave="hover = -1" :style="{ ...cellBase, height: rowH, justifyContent: 'center', color: 'var(--text-muted)', fontFamily: 'var(--font-sans)', fontVariantNumeric: 'tabular-nums', fontSize: 'var(--text-xs)', letterSpacing: 0, background: hover === r ? 'var(--bg-inset)' : 'transparent', cursor: 'pointer' }">
+          <span @mouseenter="hover = r" @mouseleave="hover = -1" :style="{ ...cellBase, height: rowH, ...stickyLeft, justifyContent: 'center', color: 'var(--text-muted)', fontFamily: 'var(--font-sans)', fontVariantNumeric: 'tabular-nums', fontSize: 'var(--text-xs)', letterSpacing: 0, cursor: 'pointer' }">
             <Icon v-if="hover === r" name="maximize-2" :size="14" :style="{ ...tierIcon, color: 'var(--action-primary)' }" /><template v-else>{{ r + 1 }}</template>
           </span>
           <span v-for="f in fields" :key="r + f.key" @mouseenter="hover = r" @mouseleave="hover = -1" @dblclick="startEdit(r, f, row)" :style="{ ...cellBase, height: rowH, position: 'relative', background: hover === r ? 'var(--bg-inset)' : 'transparent' }">
@@ -69,7 +74,7 @@ function agg(f) {
           <span :style="{ ...cellBase, height: rowH, background: hover === r ? 'var(--bg-inset)' : 'transparent' }" />
         </template>
         <button type="button" @click="addRow" class="kb-st-new" :style="{ gridColumn: '1 / -1', height: rowH }"><Icon name="plus" :size="14" :style="tierIcon" />New</button>
-        <span :style="{ ...cellBase, height: rowH, borderBottom: 'none', background: 'var(--bg-inset)' }" />
+        <span :style="{ ...cellBase, height: rowH, ...stickyLeft, borderBottom: 'none' }" />
         <span v-for="f in fields" :key="'g' + f.key" :style="{ ...cellBase, height: rowH, borderBottom: 'none', background: 'var(--bg-inset)', justifyContent: 'flex-end', fontFamily: 'var(--font-sans)', fontVariantNumeric: 'tabular-nums', fontSize: 'var(--text-xs)', letterSpacing: 0, color: 'var(--text-secondary)' }">{{ agg(f) }}</span>
         <span :style="{ ...cellBase, height: rowH, borderBottom: 'none', background: 'var(--bg-inset)' }" />
       </div>

package/components/navigation/Sidebar.d.ts

@@ -25,7 +25,7 @@ export interface SidebarProps {
   onToggleCollapse?: () => void;
   logo?: string;
   brand?: string;
-  /** Version line under the footer items ("Version 2.4.2"); the rail shows "v2.4.2" */
+  /** Version line under the footer items ("Version 2.4.4"); the rail shows "v2.4.4" */
   version?: string;
   tone?: "recessed" | "flush" | "contrast" | "custom";
   /** For tone "custom": a SIDEBAR_COLORS key (slate, navy, indigo, violet, plum, wine, forest, teal, umber, charcoal) or any hex */

package/components/navigation/Tree.d.ts

@@ -67,7 +67,7 @@ export interface TreeProps {
   /** Draw connector lines instead of plain indentation */
   showLine?: boolean;
   draggable?: boolean;
-  /** Also allow insert-between: a folder's outer 20% becomes a before/after rule. Off by default — a drag moves a node INTO a folder, and files are never drop targets. */
+  /** Also allow insert-between: a folder's outer 20% becomes a before/after rule, and a leaf becomes an insert target over its whole height (top half before, bottom half after) — so leaves can be reordered among themselves. Before / after draw an insert marker (2px line + 6px dot) on the gap between rows, starting at the target's indent. Off by default — a drag moves a node INTO a folder, and files are never drop targets. */
   reorder?: boolean;
   /** Highlights matches and auto-expands their ancestors */
   searchValue?: string;

package/components/navigation/Tree.jsx

@@ -4,6 +4,19 @@ import { Checkbox } from "../forms/Checkbox.jsx";
 
 const docHues = { orange: "var(--cat-transform)", green: "var(--cat-source)", purple: "var(--cat-merge)", blue: "var(--info-fg)", teal: "var(--cat-output)", gray: "var(--text-muted)" };
 const INDENT = 18;
+/* Insert marker (reorder before / after): a 2px --action-primary line with a 6px dot at its left end, drawn between rows.
+   It starts at the target row's content indent (8 + depth * INDENT — the chevron column, which is also the elbow column
+   under showLine) and ends at the row's 8px right padding, so the line says which level the item lands on. Its centre
+   sits on the gap between rows (gap 1px, or 0 under showLine). */
+function insertMarker(pos, depth, gap) {
+  const centre = -(gap / 2);
+  return {
+    position: "absolute", left: 8 + depth * INDENT - 3, right: 8, height: 6, pointerEvents: "none", zIndex: 1,
+    ...(pos === "before" ? { top: centre - 3 } : { bottom: centre - 3 }),
+  };
+}
+const markerDot = { position: "absolute", left: 0, top: 0, width: 6, height: 6, borderRadius: "50%", background: "var(--action-primary)" };
+const markerLine = { position: "absolute", left: 3, right: 0, top: 2, height: 2, borderRadius: 1, background: "var(--action-primary)" };
 
 const keyOf = (n) => (n.key != null ? n.key : n.label);
 const titleOf = (n) => (n.title != null ? n.title : n.label);
@@ -141,14 +154,14 @@ function Row({ item, state, cfg, api }) {
         onKeyDown={(e) => api.keyDown(e, item)}
         onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
         style={{
-          minHeight: "var(--h-tree-item)", borderRadius: "var(--radius-md)", display: "flex", alignItems: "center", gap: 6,
+          position: "relative", minHeight: "var(--h-tree-item)", borderRadius: "var(--radius-md)", display: "flex", alignItems: "center", gap: 6,
           padding: cfg.showLine ? "0 8px 0 2px" : "5px 8px", paddingLeft: cfg.showLine ? 2 : 8 + depth * INDENT, boxSizing: "border-box",
           cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.45 : 1,
           background: dropAt === "inside" ? "var(--soft-bg)" : selected ? "var(--bg-active)" : hover && !disabled ? "var(--bg-hover)" : "transparent",
           outline: dropAt === "inside" ? "2px solid var(--action-primary)" : ringed ? "2px solid var(--focus-border)" : "none", outlineOffset: -2,
-          boxShadow: dropAt === "before" ? "inset 0 2px 0 var(--action-primary)" : dropAt === "after" ? "inset 0 -2px 0 var(--action-primary)" : "none",
           transition: "var(--t-hover)",
         }}>
+        {dropAt === "before" || dropAt === "after" ? <span aria-hidden="true" data-drop-marker={dropAt} style={insertMarker(dropAt, depth, cfg.showLine ? 0 : 1)}><span style={markerDot} /><span style={markerLine} /></span> : null}
         {cfg.showLine ? <Guides trail={trail} isLast={isLast} hasKids={branch} /> : null}
         {chevron}
         {cfg.checkable && node.checkable !== false ? (
@@ -279,9 +292,11 @@ export function Tree({
     dragOver: (k, ratio) => {
       if (k == null) return setDrop(null);
       const node = indexNodes(data).byKey[k];
-      /* Only folders are drop targets: a file can't contain anything, so hovering one shows
-         nothing at all. With reorder, a folder's outer 20% becomes an insert rule instead. */
-      if (!node || node.disabled || !dragKey || !isBranch(node) || inSubtree(data, dragKey, k)) return setDrop(null);
+      if (!node || node.disabled || !dragKey || inSubtree(data, dragKey, k)) return setDrop(null);
+      /* Without reorder only folders are drop targets: a file can't contain anything, so hovering
+         one shows nothing at all. With reorder, a folder's outer 20% becomes an insert rule, and a
+         file is an insert target over its whole height — top half before, bottom half after. */
+      if (!isBranch(node)) return reorder ? setDrop({ key: k, pos: ratio < 0.5 ? "before" : "after" }) : setDrop(null);
       const pos = reorder ? (ratio < 0.2 ? "before" : ratio > 0.8 ? "after" : "inside") : "inside";
       setDrop({ key: k, pos });
     },
@@ -290,6 +305,7 @@ export function Tree({
       const info = drop && drop.key === k ? drop : null;
       setDrop(null);
       if (!dragKey || !info || inSubtree(data, dragKey, k)) return setDragKey(null);
+      if (info.pos === "inside" && !isBranch(indexNodes(data).byKey[k])) return setDragKey(null);
       /* Computed outside setData: React re-invokes updaters (StrictMode, concurrent
          rebasing), which would fire the consumer's onDrop twice for one gesture. */
       const clone = JSON.parse(JSON.stringify(data));

package/components/navigation/Tree.vue

@@ -7,6 +7,15 @@ import Checkbox from '../forms/Checkbox.vue'
 // loadData, search highlight, drag to move, keyboard navigation.
 const docHues = { orange: 'var(--cat-transform)', green: 'var(--cat-source)', purple: 'var(--cat-merge)', blue: 'var(--info-fg)', teal: 'var(--cat-output)', gray: 'var(--text-muted)' }
 const INDENT = 18
+// Insert marker (reorder before / after): a 2px --action-primary line with a 6px dot at its left end, drawn between rows.
+// It starts at the target row's content indent (8 + depth * INDENT — the chevron column, which is also the elbow column
+// under showLine) and ends at the row's 8px right padding; its centre sits on the gap between rows (1px, or 0 under showLine).
+function insertMarker(pos, depth) {
+  const centre = -((props.showLine ? 0 : 1) / 2)
+  return { position: 'absolute', left: (8 + depth * INDENT - 3) + 'px', right: '8px', height: '6px', pointerEvents: 'none', zIndex: 1, ...(pos === 'before' ? { top: (centre - 3) + 'px' } : { bottom: (centre - 3) + 'px' }) }
+}
+const markerDot = { position: 'absolute', left: 0, top: 0, width: '6px', height: '6px', borderRadius: '50%', background: 'var(--action-primary)' }
+const markerLine = { position: 'absolute', left: '3px', right: 0, top: '2px', height: '2px', borderRadius: '1px', background: 'var(--action-primary)' }
 const props = defineProps({
   items: { type: Array, default: () => [] },
   treeData: Array, // alias of items (same as Tree.jsx)
@@ -151,16 +160,19 @@ function onDragOver(e, k) {
   e.preventDefault()
   if (!dragKey.value) return
   const n = index(data.value).byKey[k]
-  // Only folders are drop targets: hovering a file shows nothing, since it can't contain anything.
-  if (!n || n.disabled || !isBranch(n) || inSubtree(dragKey.value, k)) { drop.value = null; return }
+  if (!n || n.disabled || inSubtree(dragKey.value, k)) { drop.value = null; return }
   const r = e.currentTarget.getBoundingClientRect()
   const y = (e.clientY - r.top) / r.height
+  // Without reorder only folders are drop targets: hovering a file shows nothing, since it can't contain anything.
+  // With reorder, a folder's outer 20% becomes an insert rule, and a file is an insert target over its whole height — top half before, bottom half after.
+  if (!isBranch(n)) { drop.value = props.reorder ? { key: k, pos: y < 0.5 ? 'before' : 'after' } : null; return }
   drop.value = { key: k, pos: props.reorder ? (y < 0.2 ? 'before' : y > 0.8 ? 'after' : 'inside') : 'inside' }
 }
 function onDrop(k) {
   const info = drop.value && drop.value.key === k ? drop.value : null
   drop.value = null
   if (!dragKey.value || !info || inSubtree(dragKey.value, k)) { dragKey.value = null; return }
+  if (info.pos === 'inside' && !isBranch(index(data.value).byKey[k])) { dragKey.value = null; return }
   const clone = JSON.parse(JSON.stringify(data.value))
   let moved = null
   const prune = nodes => nodes.filter(n => {
@@ -218,14 +230,14 @@ const dropAt = k => (drop.value && drop.value.key === k ? drop.value.pos : null)
       @click="rowClick(row.n)" @keydown="keyDown($event, row)"
       :class="{ 'is-disabled': row.n.disabled }"
       :style="{
-        minHeight: 'var(--h-tree-item)', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', gap: '6px',
+        position: 'relative', minHeight: 'var(--h-tree-item)', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', gap: '6px',
         padding: showLine ? '0 8px 0 2px' : '5px 8px', paddingLeft: showLine ? '2px' : (8 + row.depth * INDENT) + 'px', boxSizing: 'border-box',
         cursor: row.n.disabled ? 'not-allowed' : 'pointer', opacity: row.n.disabled ? 0.45 : 1,
         background: dropAt(row.key) === 'inside' ? 'var(--soft-bg)' : selected.includes(row.key) ? 'var(--bg-active)' : 'transparent',
         outline: dropAt(row.key) === 'inside' ? '2px solid var(--action-primary)' : 'none',
         outlineOffset: '-2px',
-        boxShadow: dropAt(row.key) === 'before' ? 'inset 0 2px 0 var(--action-primary)' : dropAt(row.key) === 'after' ? 'inset 0 -2px 0 var(--action-primary)' : 'none',
         transition: 'var(--t-hover)' }">
+      <span v-if="dropAt(row.key) === 'before' || dropAt(row.key) === 'after'" aria-hidden="true" :data-drop-marker="dropAt(row.key)" :style="insertMarker(dropAt(row.key), row.depth)"><span :style="markerDot" /><span :style="markerLine" /></span>
       <template v-if="showLine">
         <span v-for="(hasNext, i) in row.trail" :key="i"
           :style="{ width: INDENT + 'px', alignSelf: 'stretch', flexShrink: 0, marginLeft: i === 0 ? '6px' : 0, borderLeft: hasNext ? '1px solid var(--border-subtle)' : '1px solid transparent' }" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "2.4.2",
+  "version": "2.4.4",
   "description": "Keybricks design system — design tokens, three size tiers and 121 UI components in React and Vue 3, source-only.",
   "license": "UNLICENSED",
   "type": "module",

package/tokens/tokens.json

@@ -1,6 +1,6 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "2.4.2",
+  "version": "2.4.4",
   "source": "tokens/*.css",
   "note": "Generated by _scripts/build-tokens.mjs — CSS is the source of truth.",
   "tokens": {