@keyfunc/keybricks-ds 2.4.0 → 2.4.4

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,7 +1,7 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "2.4.0",
-  "description": "Keybricks design system — design tokens, three size tiers and 120 UI components in React and Vue 3, source-only.",
+  "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",
   "sideEffects": [

package/readme.md

@@ -69,7 +69,7 @@ One product: the Keybricks web app (desktop, 1512×~860 design size). Key surfac
 
 **For developers integrating this system**
 - `DESIGN.md` — the rules file for AI coding agents: absolute token values, interaction states, an explicit "do not" list, and voice. Point Claude Code / Cursor / Copilot at this before they generate UI.
-- `INTEGRATION.md` — the integration guide: three steps to first paint, the full 120-component index with import paths, token reference, dark mode, interaction states, versioning.
+- `INTEGRATION.md` — the integration guide: three steps to first paint, the full 121-component index with import paths, token reference, dark mode, interaction states, versioning.
 - `DEPLOY.md` — running the system on GitLab: what ships in the package and what stays on Pages, the entry points, the release flow, and the bundler config each consumer needs.
 - `index.html` · `gallery.html` — the documentation site: the browsable system and the filterable thumbnail grid, both deployed to GitLab Pages by CI.
 - `package.json` · `.gitlab-ci.yml` · `_scripts/` — makes the system an installable package: a version tag publishes to the GitLab Package Registry, the default branch redeploys the docs site, and `npm run check` fails the pipeline if the generated tokens or barrels drift from source.
@@ -83,7 +83,7 @@ One product: the Keybricks web app (desktop, 1512×~860 design size). Key surfac
 ## Components
 - `components/icons/` — Icon (+ ICON_PATHS glyph data + feather-paths.js, the full Feather fallback), DataSourceLogo (+ DATA_SOURCE_LOGOS), Unicon (Unicons CDN webfont).
 - `components/buttons/` — Button, IconButton, ActionChip.
-- `components/forms/` — Field, Input, Textarea, Select, SearchInput, Checkbox, NumberStepper, Dropzone, Switch, Radio, RadioGroup, Combobox, MultiSelect, DatePicker, Slider.
+- `components/forms/` — Field, Input, Textarea, Select, SearchInput, Checkbox, NumberStepper, Dropzone, Switch, Radio, RadioGroup, Combobox, MultiSelect, DatePicker, Slider, RelativeTimePicker.
 - `components/tabs/` — Tabs, PanelTabs, PillTabs, ViewToggle, SegmentedControl.
 - `components/display/` — Card, StatCard, Badge, StatusBadge, IconTile, ProgressBar, Donut, AreaChart, MiniBars, Avatar, AvatarGroup, Tag, Divider, Kbd.
 - `components/feedback/` — Stepper, ContextMenu, ActivityItem, DotActivity, LogViewer, Tooltip, Modal, Toast, ToastStack, Alert, EmptyState, Skeleton, Spinner, Menu, Accordion, Banner, Drawer, Timeline.
@@ -110,6 +110,7 @@ These extend the original inventory — each is a standard need this product cle
   - `FilterBar` — Fiori-style list-report filter bar (variant name + expand/collapse + Adapt Filters (n) + Go).
   - `Combobox` — type-to-filter single-select dropdown; `MultiSelect` — multi-select dropdown (tags + "+n" overflow + clear all).
   - `DatePicker` — calendar popover date picker; `Slider` — slider (drag bubble + min/max labels).
+  - `RelativeTimePicker` — "how long ago" filter (amount + unit dialog, "Any time" → null) for logs and monitoring.
   - `Drawer` — right-hand slide-out detail panel; `Banner` — page-level notification (distinct from in-card Alert and floating Toast); `Timeline` — vertical activity timeline; `Tree` — general nested tree (cascading checks, async loading, search highlight, drag into folder, keyboard navigation).
 - `Tag`, `Divider`, `Kbd` — filter tags, separators and shortcut hints that were hand-built over and over in the UI.
 - `Menu` (dropdown anchored under its trigger, distinct from `ContextMenu`, which opens at the click point), `Accordion` (general collapsible section, distinct from `ListRow`, which is specific to workflow documents).

package/readme.zh-CN.md

@@ -71,7 +71,7 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
 
 **开发团队接入入口**
 - `DESIGN.md` —— 给 AI 编程代理读的规则文件：绝对数值、交互状态、明确的"禁止"清单、文案语气。让 Claude Code / Cursor / Copilot 在生成界面前先读它。
-- `INTEGRATION.md` —— 接入指南：三步跑通首屏、全部 120 个组件的清单与引入路径、token 速查、深色模式、交互状态、版本策略。
+- `INTEGRATION.md` —— 接入指南：三步跑通首屏、全部 121 个组件的清单与引入路径、token 速查、深色模式、交互状态、版本策略。
 - `DEPLOY.md` —— 在 GitLab 上运行本系统：包里发布什么、什么留在 Pages 上、入口点、发布流程、各消费方需要的构建配置。
 - `index.html` · `gallery.html` —— 文档站：可浏览的系统主页与可筛选的缩略图网格，均由 CI 部署到 GitLab Pages。
 - `package.json` · `.gitlab-ci.yml` · `_scripts/` —— 让本系统成为可安装的包：打版本 tag 即发布到 GitLab Package Registry，默认分支更新即重新部署文档站，生成的 token 或入口文件与源码不一致时 `npm run check` 会让流水线失败。
@@ -85,7 +85,7 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
 ## 组件清单
 - `components/icons/` —— Icon（+ ICON_PATHS 图形数据 + feather-paths.js 全量 Feather 回退）、Unicon（Unicons CDN 字体）。
 - `components/buttons/` —— Button、IconButton、ActionChip。
-- `components/forms/` —— Field、Input、Textarea、Select、SearchInput、Checkbox、NumberStepper、Dropzone、Switch、Radio、RadioGroup、Combobox、MultiSelect、DatePicker、Slider。
+- `components/forms/` —— Field、Input、Textarea、Select、SearchInput、Checkbox、NumberStepper、Dropzone、Switch、Radio、RadioGroup、Combobox、MultiSelect、DatePicker、Slider、RelativeTimePicker。
 - `components/tabs/` —— Tabs、PanelTabs、PillTabs、ViewToggle、SegmentedControl。
 - `components/display/` —— Card、StatCard、Badge、StatusBadge、IconTile、ProgressBar、Donut、AreaChart、MiniBars、Avatar、AvatarGroup、Tag、Divider、Kbd。
 - `components/feedback/` —— Stepper、ContextMenu、ActivityItem、DotActivity、LogViewer、Tooltip、Modal、Toast、ToastStack、Alert、EmptyState、Skeleton、Spinner、Menu、Accordion、Banner、Drawer、Timeline。
@@ -112,6 +112,7 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
   - `FilterBar` —— Fiori 风格的列表报表筛选栏（变体名 + 展开 / 收起 + Adapt Filters (n) + Go）。
   - `Combobox` —— 输入即筛选的单选下拉；`MultiSelect` —— 多选下拉（标签 + "+n" 溢出 + 一键清空）。
   - `DatePicker` —— 日历弹层日期选择；`Slider` —— 滑杆（拖动气泡 + 最值标签）。
+  - `RelativeTimePicker` —— "多久以前"筛选器（数量 + 单位弹层，"不限时间"返回 null），用于日志与监控页。
   - `Drawer` —— 右侧滑出的详情面板；`Banner` —— 页面级通知条（区别于卡片内的 Alert 与浮动的 Toast）；`Timeline` —— 垂直活动时间线；`Tree` —— 通用嵌套树（级联勾选、异步加载、搜索高亮、拖入文件夹、键盘导航）。
 - `Tag`、`Divider`、`Kbd` —— 筛选标签、分隔线、快捷键提示等在界面中被反复手写的小元素。
 - `Menu`（挂在触发元素下方的下拉菜单，区别于在点击位置弹出的 `ContextMenu`）、`Accordion`（通用可折叠区块，区别于专用于工作流文档的 `ListRow`）。

package/tokens/tokens.json

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