@keyfunc/keybricks-ds 2.4.2 → 2.4.6

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/components/navigation/nav-model.js

@@ -17,10 +17,10 @@ export const KEYBRICKS_NAV_FOOTER = [
   { icon: 'book-open', label: 'Knowledge Base' },
 ]
 export const KEYBRICKS_MGMT = [
-  { icon: 'box', label: 'Modeling', children: ['Dimension', 'Model', 'Environment', 'Journal Template', 'Detail Template', 'Relationship'] },
-  { icon: 'repeat', label: 'Workflow', children: ['Workflow', 'Requests', 'Task Tracker'] },
+  { icon: 'model', label: 'Modeling', children: ['Dimension', 'Model', 'Environment', 'Journal Template', 'Detail Template', 'Relationship'] },
+  { icon: 'workflow', label: 'Workflow', children: ['Workflow', 'Requests', 'Task Tracker'] },
   { icon: 'shield', label: 'Security Management', children: ['Users', 'Roles', 'Permissions'] },
   { icon: 'refresh-cw', label: 'System Migration' },
-  { icon: 'circle-check', label: 'Validation Rules' },
+  { icon: 'rules-validation', label: 'Validation Rules' },
   { icon: 'settings-2', label: 'Control Center' },
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "2.4.2",
+  "version": "2.4.6",
   "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/readme.md

@@ -40,7 +40,7 @@ One product: the Keybricks web app (desktop, 1512×~860 design size). Key surfac
 
 ## Iconography
 - The product's icons are the **Lucide** stroke set (16/14px at 1.33px effective stroke, `currentColor`). We ship `components/icons/Icon.jsx`, embedding the exact Lucide path data for every glyph the product uses. Usage: `<Icon name="search" size={16}/>`.
-- **Keybricks glyphs**: thirteen icons drawn for Keybricks itself sit in the core set beside the Lucide glyphs — AI (`ai`, `ai-sparkles`), modules (`reconciliation`, `consolidation`, `journal`, `event`, `view-tree`) and actions (`drilldown`, `add-below`, `copy-data`, `task-execution`, `time-future`, `time-restatement`). Search the Icon Gallery before drawing a new one: *hierarchy* turned out to be `layers`, and *change* is `repeat`.
+- **Keybricks glyphs**: thirteen icons drawn for Keybricks itself sit in the core set beside the Lucide glyphs — AI (`ai`, `ai-sparkles`), modules (`reconciliation`, `consolidation`, `journal`, `event`, `view-tree`) and actions (`drilldown`, `add-below`, `copy-data`, `task-execution`, `time-future`, `time-restatement`). **Business glyphs** (75, 2.4.6): dimensions (`dimension-account`, `dimension-entity`, …), modules (`modeling`, `analytics`, `automation`, `announcement`, `expense_control-*`, `profile-*`, …), rules (`rules-*`, a sheet frame) and tasks (`task-*`, a clipboard frame) — named exactly as the product uses them. Search the Icon Gallery before drawing a new one: *hierarchy* turned out to be `layers`, and *change* is `repeat`.
 - **Drawing rules** (every core glyph, and any glyph added later): 24×24 grid; paths stay inside 2–22, which leaves 1px of padding once the stroke is drawn; stroke 2, round caps and joins, no fill, `currentColor`; integer coordinates; at least 2px of clear space between separate elements; rect corners rx 2, or rx 1 at 8px and smaller. Check a new glyph at 14 and 16px before adding it.
 - Icon color follows text color (#525252 default chrome, #a1a1a1 muted, category hue inside tinted tiles).
 - Tinted icon tiles are a signature motif: 40×40 r14 (palette), 48×48 r16 (nodes), 32×32 r8 hairline-bordered (list rows) — 100-tint bg + 600-hue glyph.

package/readme.zh-CN.md

@@ -42,7 +42,7 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
 
 ## 图标系统
 - 产品图标是 **Lucide** 线性图标集（16/14px，实际描边约 1.33px，颜色为 `currentColor`）。我们提供 `components/icons/Icon.jsx`，内嵌产品用到的每个图形的 Lucide 原始路径数据。用法：`<Icon name="search" size={16}/>`。
-- **Keybricks 自绘图标**：为 Keybricks 自行绘制的 13 个图标与 Lucide 图标一起放在核心集中——AI 类（`ai`、`ai-sparkles`）、模块类（`reconciliation`、`consolidation`、`journal`、`event`、`view-tree`）和操作类（`drilldown`、`add-below`、`copy-data`、`task-execution`、`time-future`、`time-restatement`）。新画图标之前，先在图标库里搜索：*hierarchy* 其实就是 `layers`，*change* 就是 `repeat`。
+- **Keybricks 自绘图标**：为 Keybricks 自行绘制的 13 个图标与 Lucide 图标一起放在核心集中——AI 类（`ai`、`ai-sparkles`）、模块类（`reconciliation`、`consolidation`、`journal`、`event`、`view-tree`）和操作类（`drilldown`、`add-below`、`copy-data`、`task-execution`、`time-future`、`time-restatement`）。**业务图标**（75 个，2.4.6）：维度类（`dimension-account`、`dimension-entity` 等）、模块类（`modeling`、`analytics`、`automation`、`announcement`、`expense_control-*`、`profile-*` 等）、规则类（`rules-*`，草纸框）与任务类（`task-*`，剪贴板框），名称与产品中一致。新画图标之前，先在图标库里搜索：*hierarchy* 其实就是 `layers`，*change* 就是 `repeat`。
 - **绘制规范**（所有核心图标，以及今后新增的图标）：24×24 网格；路径限制在 2–22 范围内，描边后四周留 1px 边距；描边 2，圆头圆角，无填充，`currentColor`；坐标取整数；相互独立的元素之间至少留 2px 空隙；矩形圆角 rx 2，8px 及以下的小矩形用 rx 1。新增图标前，先在 14px 和 16px 下检查。
 - 图标颜色跟随文字颜色（默认框架色 #525252，弱化态 #a1a1a1，彩色图标块内为对应分类色）。
 - 彩色图标块是标志性元素：40×40 圆角 14（组件面板）、48×48 圆角 16（节点）、32×32 圆角 8 带细边框（列表行）——100 档浅色底 + 600 档分类色图标。

package/tokens/tokens.json

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