@mindlogic-ai/logician-ui 4.0.0-alpha.6 → 4.0.0-alpha.8

package/dist/components/Tree/Tree.d.ts

@@ -7,7 +7,11 @@ export declare const Tree: {
     BranchIndicator: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").TreeViewBranchIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
     BranchText: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").TreeViewBranchTextProps & import("react").RefAttributes<HTMLSpanElement>>;
     BranchContent: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").TreeViewBranchContentProps & import("react").RefAttributes<HTMLDivElement>>;
-    BranchIndentGuide: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").TreeViewBranchIndentGuideProps & import("react").RefAttributes<HTMLDivElement>>;
+    BranchIndentGuide: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").TreeViewBranchIndentGuideProps & {
+        elbow?: boolean;
+        footLength?: string | number;
+        guideColor?: string;
+    } & import("react").RefAttributes<HTMLDivElement>>;
     Item: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").TreeViewItemProps & import("react").RefAttributes<HTMLDivElement>>;
     ItemText: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").TreeViewItemTextProps & import("react").RefAttributes<HTMLSpanElement>>;
     ItemIndicator: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").TreeViewItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Tree/Tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;CAkBhB,CAAC"}
+{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;CAkBhB,CAAC"}

package/dist/components/Tree/Tree.types.d.ts

@@ -7,7 +7,35 @@ export type TreeBranchTriggerProps = TreeViewBranchTriggerProps;
 export type TreeBranchIndicatorProps = TreeViewBranchIndicatorProps;
 export type TreeBranchTextProps = TreeViewBranchTextProps;
 export type TreeBranchContentProps = TreeViewBranchContentProps;
-export type TreeBranchIndentGuideProps = TreeViewBranchIndentGuideProps;
+export type TreeBranchIndentGuideProps = TreeViewBranchIndentGuideProps & {
+    /**
+     * Draw `├` / `└` guide lines instead of a plain vertical rail: every
+     * row gets a horizontal foot joining it to its parent rail, middle
+     * rows keep the vertical (`├`), and the last row of each group stops
+     * at its centre (`└`). Off by default to preserve the existing
+     * plain-vertical-rail look. See `TreeBranchIndentGuide`.
+     * @default false
+     */
+    elbow?: boolean;
+    /**
+     * Length of the elbow foot — the horizontal cross-stroke that joins
+     * the rail to the row content, drawn from the parent rail column
+     * toward the text. In elbow mode each level indents 4px further than
+     * the plain-rail default, and since the default foot length doesn't
+     * grow with it, the foot ends 8px short of the row text. Any Chakra
+     * width value. Only applies when `elbow` is set.
+     * @default 'calc(var(--tree-indentation) - 4px)'
+     */
+    footLength?: string | number;
+    /**
+     * Color of the guide lines (rail, elbow foot and vertical segments).
+     * Any Chakra color token. The default is a mode-flipping semantic
+     * token, so it darkens in light mode and lightens in dark mode
+     * automatically.
+     * @default 'border.default'
+     */
+    guideColor?: string;
+};
 export type TreeItemProps = TreeViewItemProps;
 export type TreeItemTextProps = TreeViewItemTextProps;
 export type TreeItemIndicatorProps = TreeViewItemIndicatorProps;

package/dist/components/Tree/Tree.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/Tree.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,0BAA0B,EAC1B,0BAA0B,EAC1B,8BAA8B,EAC9B,4BAA4B,EAC5B,mBAAmB,EACnB,uBAAuB,EACvB,0BAA0B,EAC1B,0BAA0B,EAC1B,iBAAiB,EACjB,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,EACzB,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAClD,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,CAAC;AAChE,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,4BAA4B,CAAC;AACpE,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAC1D,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,CAAC;AAChE,MAAM,MAAM,0BAA0B,GAAG,8BAA8B,CAAC;AACxE,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AACtD,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,CAAC;AAChE,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AAC9D,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAIhD,MAAM,MAAM,yBAAyB,GAAG,UAAU,CAChD,WAAW,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAAC,CACnD,CAAC,CAAC,CAAC,CAAC;AAEL,MAAM,MAAM,0BAA0B,GAAG,UAAU,CACjD,WAAW,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,CACpD,CAAC,CAAC,CAAC,CAAC;AAEL,MAAM,MAAM,wBAAwB,GAAG,UAAU,CAC/C,WAAW,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,CAClD,CAAC,CAAC,CAAC,CAAC;AAEL,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAC7C,WAAW,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAChD,CAAC,CAAC,CAAC,CAAC;AAEL,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"Tree.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/Tree.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,0BAA0B,EAC1B,0BAA0B,EAC1B,8BAA8B,EAC9B,4BAA4B,EAC5B,mBAAmB,EACnB,uBAAuB,EACvB,0BAA0B,EAC1B,0BAA0B,EAC1B,iBAAiB,EACjB,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,EACzB,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAClD,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,CAAC;AAChE,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,4BAA4B,CAAC;AACpE,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAC1D,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,CAAC;AAChE,MAAM,MAAM,0BAA0B,GAAG,8BAA8B,GAAG;IACxE;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AACF,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AACtD,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,CAAC;AAChE,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AAC9D,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAIhD,MAAM,MAAM,yBAAyB,GAAG,UAAU,CAChD,WAAW,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAAC,CACnD,CAAC,CAAC,CAAC,CAAC;AAEL,MAAM,MAAM,0BAA0B,GAAG,UAAU,CACjD,WAAW,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,CACpD,CAAC,CAAC,CAAC,CAAC;AAEL,MAAM,MAAM,wBAAwB,GAAG,UAAU,CAC/C,WAAW,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,CAClD,CAAC,CAAC,CAAC,CAAC;AAEL,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAC7C,WAAW,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAChD,CAAC,CAAC,CAAC,CAAC;AAEL,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/Tree/TreeBranchIndentGuide.d.ts

@@ -1,3 +1,7 @@
 import { TreeView as ChakraTreeView } from '@chakra-ui/react';
-export declare const TreeBranchIndentGuide: import("react").ForwardRefExoticComponent<ChakraTreeView.BranchIndentGuideProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TreeBranchIndentGuide: import("react").ForwardRefExoticComponent<ChakraTreeView.BranchIndentGuideProps & {
+    elbow?: boolean;
+    footLength?: string | number;
+    guideColor?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=TreeBranchIndentGuide.d.ts.map

package/dist/components/Tree/TreeBranchIndentGuide.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeBranchIndentGuide.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/TreeBranchIndentGuide.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAI9D,eAAO,MAAM,qBAAqB,kIAahC,CAAC"}
+{"version":3,"file":"TreeBranchIndentGuide.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/TreeBranchIndentGuide.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AA4C9D,eAAO,MAAM,qBAAqB;;;;kDAmGjC,CAAC"}

package/dist/components/Tree/TreeBranchIndentGuide.js

@@ -5,14 +5,113 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var react = require('@chakra-ui/react');
 
-const TreeBranchIndentGuide = React.forwardRef((props, ref) => {
-    // Chakra v3's `branchIndentGuide` slot already renders the vertical
-    // line via `position: absolute`, `width: 1px`, `bg: border`, with
-    // `insetInlineStart` auto-calculated from tree depth. Don't add
-    // `ms`/`ps` (breaks the depth math, pushes the line over content)
-    // or `borderInlineStartWidth` (stacks a second 1px stroke on top of
-    // the slot's own bg-painted 1px). Only override `bg` to lighten.
-    return (jsxRuntime.jsx(react.TreeView.BranchIndentGuide, { ref: ref, bg: "border.subtle", ...props }));
+// Extra per-level indentation in elbow mode. Guide-line trees read better
+// with a little more horizontal air between the elbow and the row text,
+// so each level indents this much further than the recipe default. The
+// foot length does NOT grow with it (its default is derived from the
+// original `--tree-indentation`), so the foot-to-text gap widens by the
+// same amount.
+const ELBOW_EXTRA_INDENT = '4px';
+// The widened per-level indentation, defined on the guide's sibling rows
+// so both the recipe's offset math and our pseudo-element math can share
+// it. Root rows (depth 1) have no guide sibling, but their offset
+// multiplies indentation by zero, so every level stays consistent.
+const ELBOW_INDENT_VARS = {
+    '--tree-elbow-indentation': `calc(var(--tree-indentation) + ${ELBOW_EXTRA_INDENT})`,
+};
+// Re-derive the recipe's `--tree-indentation-offset` (which feeds
+// `--tree-offset`, the row's padding-start) from the widened indentation.
+// Must be set on the same elements the recipe defines it on
+// (item / branch-control) — inheritance can't override those.
+const ELBOW_OFFSET_VARS = {
+    '--tree-indentation-offset': 'calc(var(--tree-elbow-indentation) * var(--tree-depth))',
+};
+// The parent rail column, measured from a child row (item / branch-control).
+// A row's content starts at its own `--tree-offset`, and the parent rail
+// sits exactly one (widened) indentation to its left (verified against the
+// recipe's offset math for both the guide and the row slots).
+const ROW_RAIL_COLUMN = 'calc(var(--tree-offset) - var(--tree-elbow-indentation))';
+// The same column, computed from the `branch` element itself. A branch
+// only carries Ark's inline `--depth` (the recipe's `--tree-offset` is
+// defined on item/branch-control, not here), so expand the recipe math:
+// rail(x) = padding + indentation * (depth - 2) + icon * 0.5 * (depth - 1)
+// — algebraically identical to ROW_RAIL_COLUMN for a row at `--depth`.
+const BRANCH_RAIL_COLUMN = 'calc(var(--tree-padding-inline) + var(--tree-elbow-indentation) * (var(--depth) - 2) + var(--tree-icon-size) * 0.5 * (var(--depth) - 1))';
+const TreeBranchIndentGuide = React.forwardRef(({ elbow = false, footLength = 'calc(var(--tree-indentation) - 4px)', guideColor = 'border.default', ...props }, ref) => {
+    // Chakra v3's `branchIndentGuide` slot renders ONE absolutely-positioned
+    // vertical line per `branchContent` (its first child), `height: 100%`,
+    // with `insetInlineStart` auto-calculated from tree depth. Don't add
+    // `ms`/`ps` (breaks the depth math) or `borderInlineStartWidth` (stacks
+    // a second 1px stroke on the slot's own bg-painted 1px) — only `bg`.
+    //
+    // That single full-height rail cannot form a `└` on the last row: it
+    // always paints past the last row's centre down to the content bottom.
+    // So in `elbow` mode the slot's own rail is hidden (`bg: transparent`,
+    // the element stays as the CSS sibling anchor) and the guide lines are
+    // re-drawn per row on the guide's sibling rows (`[data-part="item"]`
+    // leaves and `[data-part="branch"]` subtrees):
+    //
+    //  - every row gets a `::before` foot — the horizontal cross-stroke
+    //    from the rail column toward the row content, pinned to the row's
+    //    vertical centre;
+    //  - non-last rows get a full-height vertical segment (`├`); for a
+    //    branch it is drawn on the `[data-part="branch"]` element so it
+    //    passes through the whole expanded subtree, like the original rail
+    //    (zIndex 1 for the same paint-above-row-hover reason);
+    //  - the LAST row's segment stops at the row's vertical centre where
+    //    the foot meets it (`└`); for a branch that means half the
+    //    branch-control only, so an expanded last branch hangs below the
+    //    elbow with no rail running past it.
+    const foot = {
+        content: '""',
+        position: 'absolute',
+        insetBlockStart: '50%',
+        insetInlineStart: ROW_RAIL_COLUMN,
+        width: footLength,
+        height: '1px',
+        bg: guideColor,
+    };
+    const rail = {
+        content: '""',
+        position: 'absolute',
+        insetBlockStart: '0',
+        insetInlineStart: ROW_RAIL_COLUMN,
+        width: '1px',
+        bg: guideColor,
+    };
+    const elbowCss = elbow
+        ? {
+            '& ~ [data-part="item"]': {
+                ...ELBOW_INDENT_VARS,
+                ...ELBOW_OFFSET_VARS,
+            },
+            // branch-control reads --tree-elbow-indentation by inheritance,
+            // but the offset override must sit on the control itself.
+            '& ~ [data-part="branch"]': ELBOW_INDENT_VARS,
+            '& ~ [data-part="branch"] > [data-part="branch-control"]': ELBOW_OFFSET_VARS,
+            '& ~ [data-part="item"]::before': foot,
+            '& ~ [data-part="branch"] > [data-part="branch-control"]::before': foot,
+            '& ~ [data-part="item"]:not(:last-child)::after': {
+                ...rail,
+                insetBlockEnd: '0',
+            },
+            '& ~ [data-part="item"]:last-child::after': {
+                ...rail,
+                height: '50%',
+            },
+            '& ~ [data-part="branch"]:not(:last-child)::before': {
+                ...rail,
+                insetBlockEnd: '0',
+                insetInlineStart: BRANCH_RAIL_COLUMN,
+                zIndex: 1,
+            },
+            '& ~ [data-part="branch"]:last-child > [data-part="branch-control"]::after': {
+                ...rail,
+                height: '50%',
+            },
+        }
+        : undefined;
+    return (jsxRuntime.jsx(react.TreeView.BranchIndentGuide, { ref: ref, bg: elbow ? 'transparent' : guideColor, css: elbowCss, ...props }));
 });
 TreeBranchIndentGuide.displayName = 'TreeBranchIndentGuide';
 

package/dist/components/Tree/TreeBranchIndentGuide.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeBranchIndentGuide.js","sources":["../../../src/components/Tree/TreeBranchIndentGuide.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraTreeView"],"mappings":";;;;;;;AAKO,MAAM,qBAAqB,GAAGA,gBAAU,CAG7C,CAAC,KAAK,EAAE,GAAG,KAAI;;;;;;;AAOf,IAAA,QACEC,cAAA,CAACC,cAAc,CAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAC,eAAe,KAAK,KAAK,EAAA,CAAI;AAEhF,CAAC;AACD,qBAAqB,CAAC,WAAW,GAAG,uBAAuB;;;;"}
+{"version":3,"file":"TreeBranchIndentGuide.js","sources":["../../../src/components/Tree/TreeBranchIndentGuide.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraTreeView"],"mappings":";;;;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,kBAAkB,GAAG,KAAK;AAEhC;AACA;AACA;AACA;AACA,MAAM,iBAAiB,GAAG;IACxB,0BAA0B,EAAE,CAAA,+BAAA,EAAkC,kBAAkB,CAAA,CAAA,CAAG;CAC3E;AAEV;AACA;AACA;AACA;AACA,MAAM,iBAAiB,GAAG;AACxB,IAAA,2BAA2B,EACzB,yDAAyD;CACnD;AAEV;AACA;AACA;AACA;AACA,MAAM,eAAe,GACnB,0DAA0D;AAE5D;AACA;AACA;AACA;AACA;AACA,MAAM,kBAAkB,GACtB,0IAA0I;AAErI,MAAM,qBAAqB,GAAGA,gBAAU,CAI7C,CACE,EACE,KAAK,GAAG,KAAK,EACb,UAAU,GAAG,qCAAqC,EAClD,UAAU,GAAG,gBAAgB,EAC7B,GAAG,KAAK,EACT,EACD,GAAG,KACD;;;;;;;;;;;;;;;;;;;;;;;;;AAyBF,IAAA,MAAM,IAAI,GAAG;AACX,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,eAAe,EAAE,KAAK;AACtB,QAAA,gBAAgB,EAAE,eAAe;AACjC,QAAA,KAAK,EAAE,UAAU;AACjB,QAAA,MAAM,EAAE,KAAK;AACb,QAAA,EAAE,EAAE,UAAU;KACN;AACV,IAAA,MAAM,IAAI,GAAG;AACX,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,eAAe,EAAE,GAAG;AACpB,QAAA,gBAAgB,EAAE,eAAe;AACjC,QAAA,KAAK,EAAE,KAAK;AACZ,QAAA,EAAE,EAAE,UAAU;KACN;IACV,MAAM,QAAQ,GAAG;AACf,UAAE;AACE,YAAA,wBAAwB,EAAE;AACxB,gBAAA,GAAG,iBAAiB;AACpB,gBAAA,GAAG,iBAAiB;AACrB,aAAA;;;AAGD,YAAA,0BAA0B,EAAE,iBAAiB;AAC7C,YAAA,yDAAyD,EACvD,iBAAiB;AACnB,YAAA,gCAAgC,EAAE,IAAI;AACtC,YAAA,iEAAiE,EAC/D,IAAI;AACN,YAAA,gDAAgD,EAAE;AAChD,gBAAA,GAAG,IAAI;AACP,gBAAA,aAAa,EAAE,GAAG;AACnB,aAAA;AACD,YAAA,0CAA0C,EAAE;AAC1C,gBAAA,GAAG,IAAI;AACP,gBAAA,MAAM,EAAE,KAAK;AACd,aAAA;AACD,YAAA,mDAAmD,EAAE;AACnD,gBAAA,GAAG,IAAI;AACP,gBAAA,aAAa,EAAE,GAAG;AAClB,gBAAA,gBAAgB,EAAE,kBAAkB;AACpC,gBAAA,MAAM,EAAE,CAAC;AACV,aAAA;AACD,YAAA,2EAA2E,EACzE;AACE,gBAAA,GAAG,IAAI;AACP,gBAAA,MAAM,EAAE,KAAK;AACd,aAAA;AACJ;UACD,SAAS;AAEb,IAAA,QACEC,cAAA,CAACC,cAAc,CAAC,iBAAiB,EAAA,EAC/B,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,KAAK,GAAG,aAAa,GAAG,UAAU,EACtC,GAAG,EAAE,QAAQ,EAAA,GACT,KAAK,EAAA,CACT;AAEN,CAAC;AAEH,qBAAqB,CAAC,WAAW,GAAG,uBAAuB;;;;"}

package/dist/components/Tree/TreeBranchIndentGuide.mjs

@@ -3,14 +3,113 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { TreeView } from '@chakra-ui/react';
 
-const TreeBranchIndentGuide = forwardRef((props, ref) => {
-    // Chakra v3's `branchIndentGuide` slot already renders the vertical
-    // line via `position: absolute`, `width: 1px`, `bg: border`, with
-    // `insetInlineStart` auto-calculated from tree depth. Don't add
-    // `ms`/`ps` (breaks the depth math, pushes the line over content)
-    // or `borderInlineStartWidth` (stacks a second 1px stroke on top of
-    // the slot's own bg-painted 1px). Only override `bg` to lighten.
-    return (jsx(TreeView.BranchIndentGuide, { ref: ref, bg: "border.subtle", ...props }));
+// Extra per-level indentation in elbow mode. Guide-line trees read better
+// with a little more horizontal air between the elbow and the row text,
+// so each level indents this much further than the recipe default. The
+// foot length does NOT grow with it (its default is derived from the
+// original `--tree-indentation`), so the foot-to-text gap widens by the
+// same amount.
+const ELBOW_EXTRA_INDENT = '4px';
+// The widened per-level indentation, defined on the guide's sibling rows
+// so both the recipe's offset math and our pseudo-element math can share
+// it. Root rows (depth 1) have no guide sibling, but their offset
+// multiplies indentation by zero, so every level stays consistent.
+const ELBOW_INDENT_VARS = {
+    '--tree-elbow-indentation': `calc(var(--tree-indentation) + ${ELBOW_EXTRA_INDENT})`,
+};
+// Re-derive the recipe's `--tree-indentation-offset` (which feeds
+// `--tree-offset`, the row's padding-start) from the widened indentation.
+// Must be set on the same elements the recipe defines it on
+// (item / branch-control) — inheritance can't override those.
+const ELBOW_OFFSET_VARS = {
+    '--tree-indentation-offset': 'calc(var(--tree-elbow-indentation) * var(--tree-depth))',
+};
+// The parent rail column, measured from a child row (item / branch-control).
+// A row's content starts at its own `--tree-offset`, and the parent rail
+// sits exactly one (widened) indentation to its left (verified against the
+// recipe's offset math for both the guide and the row slots).
+const ROW_RAIL_COLUMN = 'calc(var(--tree-offset) - var(--tree-elbow-indentation))';
+// The same column, computed from the `branch` element itself. A branch
+// only carries Ark's inline `--depth` (the recipe's `--tree-offset` is
+// defined on item/branch-control, not here), so expand the recipe math:
+// rail(x) = padding + indentation * (depth - 2) + icon * 0.5 * (depth - 1)
+// — algebraically identical to ROW_RAIL_COLUMN for a row at `--depth`.
+const BRANCH_RAIL_COLUMN = 'calc(var(--tree-padding-inline) + var(--tree-elbow-indentation) * (var(--depth) - 2) + var(--tree-icon-size) * 0.5 * (var(--depth) - 1))';
+const TreeBranchIndentGuide = forwardRef(({ elbow = false, footLength = 'calc(var(--tree-indentation) - 4px)', guideColor = 'border.default', ...props }, ref) => {
+    // Chakra v3's `branchIndentGuide` slot renders ONE absolutely-positioned
+    // vertical line per `branchContent` (its first child), `height: 100%`,
+    // with `insetInlineStart` auto-calculated from tree depth. Don't add
+    // `ms`/`ps` (breaks the depth math) or `borderInlineStartWidth` (stacks
+    // a second 1px stroke on the slot's own bg-painted 1px) — only `bg`.
+    //
+    // That single full-height rail cannot form a `└` on the last row: it
+    // always paints past the last row's centre down to the content bottom.
+    // So in `elbow` mode the slot's own rail is hidden (`bg: transparent`,
+    // the element stays as the CSS sibling anchor) and the guide lines are
+    // re-drawn per row on the guide's sibling rows (`[data-part="item"]`
+    // leaves and `[data-part="branch"]` subtrees):
+    //
+    //  - every row gets a `::before` foot — the horizontal cross-stroke
+    //    from the rail column toward the row content, pinned to the row's
+    //    vertical centre;
+    //  - non-last rows get a full-height vertical segment (`├`); for a
+    //    branch it is drawn on the `[data-part="branch"]` element so it
+    //    passes through the whole expanded subtree, like the original rail
+    //    (zIndex 1 for the same paint-above-row-hover reason);
+    //  - the LAST row's segment stops at the row's vertical centre where
+    //    the foot meets it (`└`); for a branch that means half the
+    //    branch-control only, so an expanded last branch hangs below the
+    //    elbow with no rail running past it.
+    const foot = {
+        content: '""',
+        position: 'absolute',
+        insetBlockStart: '50%',
+        insetInlineStart: ROW_RAIL_COLUMN,
+        width: footLength,
+        height: '1px',
+        bg: guideColor,
+    };
+    const rail = {
+        content: '""',
+        position: 'absolute',
+        insetBlockStart: '0',
+        insetInlineStart: ROW_RAIL_COLUMN,
+        width: '1px',
+        bg: guideColor,
+    };
+    const elbowCss = elbow
+        ? {
+            '& ~ [data-part="item"]': {
+                ...ELBOW_INDENT_VARS,
+                ...ELBOW_OFFSET_VARS,
+            },
+            // branch-control reads --tree-elbow-indentation by inheritance,
+            // but the offset override must sit on the control itself.
+            '& ~ [data-part="branch"]': ELBOW_INDENT_VARS,
+            '& ~ [data-part="branch"] > [data-part="branch-control"]': ELBOW_OFFSET_VARS,
+            '& ~ [data-part="item"]::before': foot,
+            '& ~ [data-part="branch"] > [data-part="branch-control"]::before': foot,
+            '& ~ [data-part="item"]:not(:last-child)::after': {
+                ...rail,
+                insetBlockEnd: '0',
+            },
+            '& ~ [data-part="item"]:last-child::after': {
+                ...rail,
+                height: '50%',
+            },
+            '& ~ [data-part="branch"]:not(:last-child)::before': {
+                ...rail,
+                insetBlockEnd: '0',
+                insetInlineStart: BRANCH_RAIL_COLUMN,
+                zIndex: 1,
+            },
+            '& ~ [data-part="branch"]:last-child > [data-part="branch-control"]::after': {
+                ...rail,
+                height: '50%',
+            },
+        }
+        : undefined;
+    return (jsx(TreeView.BranchIndentGuide, { ref: ref, bg: elbow ? 'transparent' : guideColor, css: elbowCss, ...props }));
 });
 TreeBranchIndentGuide.displayName = 'TreeBranchIndentGuide';
 

package/dist/components/Tree/TreeBranchIndentGuide.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TreeBranchIndentGuide.mjs","sources":["../../../src/components/Tree/TreeBranchIndentGuide.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraTreeView"],"mappings":";;;;;AAKO,MAAM,qBAAqB,GAAG,UAAU,CAG7C,CAAC,KAAK,EAAE,GAAG,KAAI;;;;;;;AAOf,IAAA,QACEA,GAAA,CAACC,QAAc,CAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAC,eAAe,KAAK,KAAK,EAAA,CAAI;AAEhF,CAAC;AACD,qBAAqB,CAAC,WAAW,GAAG,uBAAuB;;;;"}
+{"version":3,"file":"TreeBranchIndentGuide.mjs","sources":["../../../src/components/Tree/TreeBranchIndentGuide.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraTreeView"],"mappings":";;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,kBAAkB,GAAG,KAAK;AAEhC;AACA;AACA;AACA;AACA,MAAM,iBAAiB,GAAG;IACxB,0BAA0B,EAAE,CAAA,+BAAA,EAAkC,kBAAkB,CAAA,CAAA,CAAG;CAC3E;AAEV;AACA;AACA;AACA;AACA,MAAM,iBAAiB,GAAG;AACxB,IAAA,2BAA2B,EACzB,yDAAyD;CACnD;AAEV;AACA;AACA;AACA;AACA,MAAM,eAAe,GACnB,0DAA0D;AAE5D;AACA;AACA;AACA;AACA;AACA,MAAM,kBAAkB,GACtB,0IAA0I;AAErI,MAAM,qBAAqB,GAAG,UAAU,CAI7C,CACE,EACE,KAAK,GAAG,KAAK,EACb,UAAU,GAAG,qCAAqC,EAClD,UAAU,GAAG,gBAAgB,EAC7B,GAAG,KAAK,EACT,EACD,GAAG,KACD;;;;;;;;;;;;;;;;;;;;;;;;;AAyBF,IAAA,MAAM,IAAI,GAAG;AACX,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,eAAe,EAAE,KAAK;AACtB,QAAA,gBAAgB,EAAE,eAAe;AACjC,QAAA,KAAK,EAAE,UAAU;AACjB,QAAA,MAAM,EAAE,KAAK;AACb,QAAA,EAAE,EAAE,UAAU;KACN;AACV,IAAA,MAAM,IAAI,GAAG;AACX,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,eAAe,EAAE,GAAG;AACpB,QAAA,gBAAgB,EAAE,eAAe;AACjC,QAAA,KAAK,EAAE,KAAK;AACZ,QAAA,EAAE,EAAE,UAAU;KACN;IACV,MAAM,QAAQ,GAAG;AACf,UAAE;AACE,YAAA,wBAAwB,EAAE;AACxB,gBAAA,GAAG,iBAAiB;AACpB,gBAAA,GAAG,iBAAiB;AACrB,aAAA;;;AAGD,YAAA,0BAA0B,EAAE,iBAAiB;AAC7C,YAAA,yDAAyD,EACvD,iBAAiB;AACnB,YAAA,gCAAgC,EAAE,IAAI;AACtC,YAAA,iEAAiE,EAC/D,IAAI;AACN,YAAA,gDAAgD,EAAE;AAChD,gBAAA,GAAG,IAAI;AACP,gBAAA,aAAa,EAAE,GAAG;AACnB,aAAA;AACD,YAAA,0CAA0C,EAAE;AAC1C,gBAAA,GAAG,IAAI;AACP,gBAAA,MAAM,EAAE,KAAK;AACd,aAAA;AACD,YAAA,mDAAmD,EAAE;AACnD,gBAAA,GAAG,IAAI;AACP,gBAAA,aAAa,EAAE,GAAG;AAClB,gBAAA,gBAAgB,EAAE,kBAAkB;AACpC,gBAAA,MAAM,EAAE,CAAC;AACV,aAAA;AACD,YAAA,2EAA2E,EACzE;AACE,gBAAA,GAAG,IAAI;AACP,gBAAA,MAAM,EAAE,KAAK;AACd,aAAA;AACJ;UACD,SAAS;AAEb,IAAA,QACEA,GAAA,CAACC,QAAc,CAAC,iBAAiB,EAAA,EAC/B,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,KAAK,GAAG,aAAa,GAAG,UAAU,EACtC,GAAG,EAAE,QAAQ,EAAA,GACT,KAAK,EAAA,CACT;AAEN,CAAC;AAEH,qBAAqB,CAAC,WAAW,GAAG,uBAAuB;;;;"}

package/dist/theme/global.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/theme/global.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,8CAoEpB,CAAC;AAGH,eAAO,MAAM,MAAM,8CAAY,CAAC"}
+{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/theme/global.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,8CAuEpB,CAAC;AAGH,eAAO,MAAM,MAAM,8CAAY,CAAC"}

package/dist/theme/global.js

@@ -26,7 +26,10 @@ const globalCss = react.defineGlobalStyles({
     },
     html: {
         height: 'var(--chakra-vh)',
-        fontSize: 16,
+        // Global base font size. The whole type/spacing scale is em-relative, so
+        // this single value drives the app-wide baseline; surfaces that need a
+        // different base (e.g. FactChat chat at 16px) opt in via <ScaledContext>.
+        fontSize: 14,
         fontFamily: [
             font.pretendard.style.fontFamily,
             font.inter.style.fontFamily,

package/dist/theme/global.js.map

@@ -1 +1 @@
-{"version":3,"file":"global.js","sources":["../../src/theme/global.ts"],"sourcesContent":[null],"names":["defineGlobalStyles","pretendard","inter","noto"],"mappings":";;;;;;AAIA;;;;;;;AAOG;AACI,MAAM,SAAS,GAAGA,wBAAkB,CAAC;;AAE1C,IAAA,OAAO,EAAE;QACP,kCAAkC,EAAE,SAAS;QAC7C,gCAAgC,EAAE,SAAS;AAC5C,KAAA;;;AAID,IAAA,OAAO,EAAE;QACP,kCAAkC,EAAE,SAAS;QAC7C,gCAAgC,EAAE,SAAS;AAC5C,KAAA;AAED,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,kBAAkB;AAC1B,QAAA,QAAQ,EAAE,EAAE;AACZ,QAAA,UAAU,EAAE;YACVC,eAAU,CAAC,KAAK,CAAC,UAAU;YAC3BC,UAAK,CAAC,KAAK,CAAC,UAAU;YACtBC,SAAI,CAAC,KAAK,CAAC,UAAU;SACtB,CAAC,IAAI,CAAC,GAAG,CAAC;AACX,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,UAAU,EAAE,aAAa;AAC1B,KAAA;AAED,IAAA,YAAY,EAAE;;;;AAIZ,QAAA,KAAK,EAAE,YAAY;AACpB,KAAA;AAED,IAAA,SAAS,EAAE;AACT,QAAA,MAAM,EAAE,kBAAkB;AAC3B,KAAA;AACD,IAAA,sBAAsB,EAAE;AACtB,QAAA,UAAU,EAAED,UAAK,CAAC,KAAK,CAAC,UAAU;AACnC,KAAA;;;;;;AAOD,IAAA,GAAG,EAAE;AACH,QAAA,cAAc,EAAE,MAAM;AACtB,QAAA,cAAc,EAAE,4CAA4C;AAC7D,KAAA;AACD,IAAA,qBAAqB,EAAE;AACrB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,MAAM;AACf,KAAA;AACD,IAAA,2BAA2B,EAAE;AAC3B,QAAA,UAAU,EAAE,aAAa;AAC1B,KAAA;AACD,IAAA,2BAA2B,EAAE;AAC3B,QAAA,eAAe,EAAE,gCAAgC;AACjD,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,MAAM,EAAE,uBAAuB;AAC/B,QAAA,cAAc,EAAE,aAAa;AAC9B,KAAA;AACD,IAAA,iCAAiC,EAAE;AACjC,QAAA,eAAe,EAAE,gCAAgC;AAClD,KAAA;AACD,IAAA,4BAA4B,EAAE;AAC5B,QAAA,UAAU,EAAE,aAAa;AAC1B,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"global.js","sources":["../../src/theme/global.ts"],"sourcesContent":[null],"names":["defineGlobalStyles","pretendard","inter","noto"],"mappings":";;;;;;AAIA;;;;;;;AAOG;AACI,MAAM,SAAS,GAAGA,wBAAkB,CAAC;;AAE1C,IAAA,OAAO,EAAE;QACP,kCAAkC,EAAE,SAAS;QAC7C,gCAAgC,EAAE,SAAS;AAC5C,KAAA;;;AAID,IAAA,OAAO,EAAE;QACP,kCAAkC,EAAE,SAAS;QAC7C,gCAAgC,EAAE,SAAS;AAC5C,KAAA;AAED,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,kBAAkB;;;;AAI1B,QAAA,QAAQ,EAAE,EAAE;AACZ,QAAA,UAAU,EAAE;YACVC,eAAU,CAAC,KAAK,CAAC,UAAU;YAC3BC,UAAK,CAAC,KAAK,CAAC,UAAU;YACtBC,SAAI,CAAC,KAAK,CAAC,UAAU;SACtB,CAAC,IAAI,CAAC,GAAG,CAAC;AACX,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,UAAU,EAAE,aAAa;AAC1B,KAAA;AAED,IAAA,YAAY,EAAE;;;;AAIZ,QAAA,KAAK,EAAE,YAAY;AACpB,KAAA;AAED,IAAA,SAAS,EAAE;AACT,QAAA,MAAM,EAAE,kBAAkB;AAC3B,KAAA;AACD,IAAA,sBAAsB,EAAE;AACtB,QAAA,UAAU,EAAED,UAAK,CAAC,KAAK,CAAC,UAAU;AACnC,KAAA;;;;;;AAOD,IAAA,GAAG,EAAE;AACH,QAAA,cAAc,EAAE,MAAM;AACtB,QAAA,cAAc,EAAE,4CAA4C;AAC7D,KAAA;AACD,IAAA,qBAAqB,EAAE;AACrB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,MAAM;AACf,KAAA;AACD,IAAA,2BAA2B,EAAE;AAC3B,QAAA,UAAU,EAAE,aAAa;AAC1B,KAAA;AACD,IAAA,2BAA2B,EAAE;AAC3B,QAAA,eAAe,EAAE,gCAAgC;AACjD,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,MAAM,EAAE,uBAAuB;AAC/B,QAAA,cAAc,EAAE,aAAa;AAC9B,KAAA;AACD,IAAA,iCAAiC,EAAE;AACjC,QAAA,eAAe,EAAE,gCAAgC;AAClD,KAAA;AACD,IAAA,4BAA4B,EAAE;AAC5B,QAAA,UAAU,EAAE,aAAa;AAC1B,KAAA;AACF,CAAA;;;;"}

package/dist/theme/global.mjs

@@ -24,7 +24,10 @@ const globalCss = defineGlobalStyles({
     },
     html: {
         height: 'var(--chakra-vh)',
-        fontSize: 16,
+        // Global base font size. The whole type/spacing scale is em-relative, so
+        // this single value drives the app-wide baseline; surfaces that need a
+        // different base (e.g. FactChat chat at 16px) opt in via <ScaledContext>.
+        fontSize: 14,
         fontFamily: [
             pretendard.style.fontFamily,
             inter.style.fontFamily,

package/dist/theme/global.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"global.mjs","sources":["../../src/theme/global.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAIA;;;;;;;AAOG;AACI,MAAM,SAAS,GAAG,kBAAkB,CAAC;;AAE1C,IAAA,OAAO,EAAE;QACP,kCAAkC,EAAE,SAAS;QAC7C,gCAAgC,EAAE,SAAS;AAC5C,KAAA;;;AAID,IAAA,OAAO,EAAE;QACP,kCAAkC,EAAE,SAAS;QAC7C,gCAAgC,EAAE,SAAS;AAC5C,KAAA;AAED,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,kBAAkB;AAC1B,QAAA,QAAQ,EAAE,EAAE;AACZ,QAAA,UAAU,EAAE;YACV,UAAU,CAAC,KAAK,CAAC,UAAU;YAC3B,KAAK,CAAC,KAAK,CAAC,UAAU;YACtB,IAAI,CAAC,KAAK,CAAC,UAAU;SACtB,CAAC,IAAI,CAAC,GAAG,CAAC;AACX,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,UAAU,EAAE,aAAa;AAC1B,KAAA;AAED,IAAA,YAAY,EAAE;;;;AAIZ,QAAA,KAAK,EAAE,YAAY;AACpB,KAAA;AAED,IAAA,SAAS,EAAE;AACT,QAAA,MAAM,EAAE,kBAAkB;AAC3B,KAAA;AACD,IAAA,sBAAsB,EAAE;AACtB,QAAA,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU;AACnC,KAAA;;;;;;AAOD,IAAA,GAAG,EAAE;AACH,QAAA,cAAc,EAAE,MAAM;AACtB,QAAA,cAAc,EAAE,4CAA4C;AAC7D,KAAA;AACD,IAAA,qBAAqB,EAAE;AACrB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,MAAM;AACf,KAAA;AACD,IAAA,2BAA2B,EAAE;AAC3B,QAAA,UAAU,EAAE,aAAa;AAC1B,KAAA;AACD,IAAA,2BAA2B,EAAE;AAC3B,QAAA,eAAe,EAAE,gCAAgC;AACjD,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,MAAM,EAAE,uBAAuB;AAC/B,QAAA,cAAc,EAAE,aAAa;AAC9B,KAAA;AACD,IAAA,iCAAiC,EAAE;AACjC,QAAA,eAAe,EAAE,gCAAgC;AAClD,KAAA;AACD,IAAA,4BAA4B,EAAE;AAC5B,QAAA,UAAU,EAAE,aAAa;AAC1B,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"global.mjs","sources":["../../src/theme/global.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAIA;;;;;;;AAOG;AACI,MAAM,SAAS,GAAG,kBAAkB,CAAC;;AAE1C,IAAA,OAAO,EAAE;QACP,kCAAkC,EAAE,SAAS;QAC7C,gCAAgC,EAAE,SAAS;AAC5C,KAAA;;;AAID,IAAA,OAAO,EAAE;QACP,kCAAkC,EAAE,SAAS;QAC7C,gCAAgC,EAAE,SAAS;AAC5C,KAAA;AAED,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,kBAAkB;;;;AAI1B,QAAA,QAAQ,EAAE,EAAE;AACZ,QAAA,UAAU,EAAE;YACV,UAAU,CAAC,KAAK,CAAC,UAAU;YAC3B,KAAK,CAAC,KAAK,CAAC,UAAU;YACtB,IAAI,CAAC,KAAK,CAAC,UAAU;SACtB,CAAC,IAAI,CAAC,GAAG,CAAC;AACX,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,UAAU,EAAE,aAAa;AAC1B,KAAA;AAED,IAAA,YAAY,EAAE;;;;AAIZ,QAAA,KAAK,EAAE,YAAY;AACpB,KAAA;AAED,IAAA,SAAS,EAAE;AACT,QAAA,MAAM,EAAE,kBAAkB;AAC3B,KAAA;AACD,IAAA,sBAAsB,EAAE;AACtB,QAAA,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU;AACnC,KAAA;;;;;;AAOD,IAAA,GAAG,EAAE;AACH,QAAA,cAAc,EAAE,MAAM;AACtB,QAAA,cAAc,EAAE,4CAA4C;AAC7D,KAAA;AACD,IAAA,qBAAqB,EAAE;AACrB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,MAAM;AACf,KAAA;AACD,IAAA,2BAA2B,EAAE;AAC3B,QAAA,UAAU,EAAE,aAAa;AAC1B,KAAA;AACD,IAAA,2BAA2B,EAAE;AAC3B,QAAA,eAAe,EAAE,gCAAgC;AACjD,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,MAAM,EAAE,uBAAuB;AAC/B,QAAA,cAAc,EAAE,aAAa;AAC9B,KAAA;AACD,IAAA,iCAAiC,EAAE;AACjC,QAAA,eAAe,EAAE,gCAAgC;AAClD,KAAA;AACD,IAAA,4BAA4B,EAAE;AAC5B,QAAA,UAAU,EAAE,aAAa;AAC1B,KAAA;AACF,CAAA;;;;"}

package/dist/theme/index.d.ts

@@ -2,7 +2,7 @@
  * Text styles for consistent typography across the application
  * Names match fontSize tokens for easy migration: fontStyle="h1" → textStyle="h1"
  *
- * Base font size: 16px (set in global.ts)
+ * Base font size: 14px (set in global.ts)
  * Responsive scaling using em units (relative to nearest ancestor font-size):
  * - Mobile (base): Slightly smaller for better readability on small screens
  * - Desktop (md+): Original design sizes

package/dist/theme/index.js

@@ -72,7 +72,7 @@ const SHARED_TEXT_STYLE_VALUES = {
  * Text styles for consistent typography across the application
  * Names match fontSize tokens for easy migration: fontStyle="h1" → textStyle="h1"
  *
- * Base font size: 16px (set in global.ts)
+ * Base font size: 14px (set in global.ts)
  * Responsive scaling using em units (relative to nearest ancestor font-size):
  * - Mobile (base): Slightly smaller for better readability on small screens
  * - Desktop (md+): Original design sizes

package/dist/theme/index.mjs

@@ -68,7 +68,7 @@ const SHARED_TEXT_STYLE_VALUES = {
  * Text styles for consistent typography across the application
  * Names match fontSize tokens for easy migration: fontStyle="h1" → textStyle="h1"
  *
- * Base font size: 16px (set in global.ts)
+ * Base font size: 14px (set in global.ts)
  * Responsive scaling using em units (relative to nearest ancestor font-size):
  * - Mobile (base): Slightly smaller for better readability on small screens
  * - Desktop (md+): Original design sizes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-alpha.8",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/Tree/Tree.GuideElbow.stories.tsx

@@ -0,0 +1,220 @@
+import { Box, HStack, Stack, Text } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Tree } from './Tree';
+import { createTreeCollection } from './index';
+
+/**
+ * Stories for the `elbow` option on `Tree.BranchIndentGuide`.
+ *
+ * `elbow` turns the plain vertical rails into `├` / `└` guide lines:
+ * every row gets a horizontal foot joining it to its parent rail, and
+ * the last row of each group stops at its centre (`└`). `guideColor`
+ * customizes the line color (default `border.default`, which flips
+ * with color mode). Pass both through the `indentGuide` element:
+ *
+ *   <Tree.Node indentGuide={<Tree.BranchIndentGuide elbow />} ... />
+ */
+
+interface Node {
+  id: string;
+  name: string;
+  children?: Node[];
+}
+
+const orgSample: Node = {
+  id: 'ROOT',
+  name: '',
+  children: [
+    {
+      id: 'hq',
+      name: '본사',
+      children: [
+        {
+          id: 'hq-dev',
+          name: '개발본부',
+          children: [
+            {
+              id: 'hq-dev-backend',
+              name: '백엔드그룹',
+              children: [
+                { id: 'hq-dev-backend-api', name: 'API팀' },
+                { id: 'hq-dev-backend-db', name: 'DB팀' },
+                { id: 'hq-dev-backend-platform', name: '플랫폼팀' },
+              ],
+            },
+            {
+              id: 'hq-dev-frontend',
+              name: '프론트엔드그룹',
+              children: [
+                { id: 'hq-dev-frontend-web', name: '웹팀' },
+                { id: 'hq-dev-frontend-mobile', name: '모바일팀' },
+              ],
+            },
+          ],
+        },
+        {
+          id: 'hq-sales',
+          name: '영업본부',
+          children: [
+            { id: 'hq-sales-domestic', name: '국내영업팀' },
+            { id: 'hq-sales-global', name: '해외영업팀' },
+          ],
+        },
+      ],
+    },
+    {
+      id: 'rnd',
+      name: 'R&D센터',
+      children: [
+        { id: 'rnd-ml', name: '머신러닝팀' },
+        { id: 'rnd-data', name: '데이터팀' },
+      ],
+    },
+  ],
+};
+
+const orgCollection = createTreeCollection<Node>({
+  rootNode: orgSample,
+  nodeToValue: (node) => node.id,
+  nodeToString: (node) => node.name,
+});
+
+const allBranchIds = (function collect(n: Node): string[] {
+  if (!n.children) return [];
+  return n.children.flatMap((c) => (c.children ? [c.id, ...collect(c)] : []));
+})(orgSample);
+
+const renderNode = ({
+  node,
+  nodeState,
+}: {
+  node: Node;
+  nodeState: { isBranch: boolean };
+}) =>
+  nodeState.isBranch ? (
+    <Tree.BranchControl>
+      <Tree.BranchIndicator />
+      <Tree.BranchText>{node.name}</Tree.BranchText>
+    </Tree.BranchControl>
+  ) : (
+    <Tree.Item>
+      <Tree.ItemText>{node.name}</Tree.ItemText>
+    </Tree.Item>
+  );
+
+const meta = {
+  title: 'Components/Tree',
+  component: Tree.Root,
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Tree.Root>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/**
+ * `elbow` guides — the innermost rail grows a horizontal foot so each
+ * row connects to its parent column like a classic file-tree.
+ */
+export const WithElbowGuides: Story = {
+  args: {
+    collection: orgCollection,
+    'aria-label': '조직',
+    defaultExpandedValue: allBranchIds,
+    defaultSelectedValue: ['hq-dev-frontend-web'],
+  },
+  render: (args) => (
+    <Box maxWidth="360px">
+      <Tree.Root {...args}>
+        <Tree.Tree>
+          <Tree.Node
+            indentGuide={<Tree.BranchIndentGuide elbow />}
+            render={renderNode}
+          />
+        </Tree.Tree>
+      </Tree.Root>
+    </Box>
+  ),
+};
+
+/**
+ * `guideColor` — customize the guide line color with any Chakra color
+ * token. The default `border.default` flips with color mode; pick a
+ * stronger token (or any palette color) for more contrast.
+ */
+export const GuideColor: Story = {
+  args: {
+    collection: orgCollection,
+    'aria-label': '조직',
+    defaultExpandedValue: allBranchIds,
+  },
+  render: (args) => (
+    <HStack align="flex-start" gap={8}>
+      {(
+        [
+          ['border.default (기본)', undefined],
+          ['border.strong', 'border.strong'],
+          ['primary.light', 'primary.light'],
+        ] as const
+      ).map(([label, guideColor]) => (
+        <Stack key={label} gap={2} width="280px">
+          <Text fontSize="sm" fontWeight="semibold" color="fg.muted">
+            {label}
+          </Text>
+          <Tree.Root {...args}>
+            <Tree.Tree>
+              <Tree.Node
+                indentGuide={
+                  <Tree.BranchIndentGuide elbow guideColor={guideColor} />
+                }
+                render={renderNode}
+              />
+            </Tree.Tree>
+          </Tree.Root>
+        </Stack>
+      ))}
+    </HStack>
+  ),
+};
+
+/**
+ * Plain vertical rails (default) vs. `elbow` guides, side by side.
+ */
+export const ElbowGuideComparison: Story = {
+  args: {
+    collection: orgCollection,
+    'aria-label': '조직',
+    defaultExpandedValue: allBranchIds,
+  },
+  render: (args) => (
+    <HStack align="flex-start" gap={8}>
+      <Stack gap={2} width="320px">
+        <Text fontSize="sm" fontWeight="semibold" color="fg.muted">
+          기본 — 수직 레일
+        </Text>
+        <Tree.Root {...args}>
+          <Tree.Tree>
+            <Tree.Node
+              indentGuide={<Tree.BranchIndentGuide />}
+              render={renderNode}
+            />
+          </Tree.Tree>
+        </Tree.Root>
+      </Stack>
+      <Stack gap={2} width="320px">
+        <Text fontSize="sm" fontWeight="semibold" color="fg.muted">
+          elbow — ├ / └ 가이드 라인
+        </Text>
+        <Tree.Root {...args}>
+          <Tree.Tree>
+            <Tree.Node
+              indentGuide={<Tree.BranchIndentGuide elbow />}
+              render={renderNode}
+            />
+          </Tree.Tree>
+        </Tree.Root>
+      </Stack>
+    </HStack>
+  ),
+};

package/src/components/Tree/Tree.types.ts

@@ -23,7 +23,35 @@ export type TreeBranchTriggerProps = TreeViewBranchTriggerProps;
 export type TreeBranchIndicatorProps = TreeViewBranchIndicatorProps;
 export type TreeBranchTextProps = TreeViewBranchTextProps;
 export type TreeBranchContentProps = TreeViewBranchContentProps;
-export type TreeBranchIndentGuideProps = TreeViewBranchIndentGuideProps;
+export type TreeBranchIndentGuideProps = TreeViewBranchIndentGuideProps & {
+  /**
+   * Draw `├` / `└` guide lines instead of a plain vertical rail: every
+   * row gets a horizontal foot joining it to its parent rail, middle
+   * rows keep the vertical (`├`), and the last row of each group stops
+   * at its centre (`└`). Off by default to preserve the existing
+   * plain-vertical-rail look. See `TreeBranchIndentGuide`.
+   * @default false
+   */
+  elbow?: boolean;
+  /**
+   * Length of the elbow foot — the horizontal cross-stroke that joins
+   * the rail to the row content, drawn from the parent rail column
+   * toward the text. In elbow mode each level indents 4px further than
+   * the plain-rail default, and since the default foot length doesn't
+   * grow with it, the foot ends 8px short of the row text. Any Chakra
+   * width value. Only applies when `elbow` is set.
+   * @default 'calc(var(--tree-indentation) - 4px)'
+   */
+  footLength?: string | number;
+  /**
+   * Color of the guide lines (rail, elbow foot and vertical segments).
+   * Any Chakra color token. The default is a mode-flipping semantic
+   * token, so it darkens in light mode and lightens in dark mode
+   * automatically.
+   * @default 'border.default'
+   */
+  guideColor?: string;
+};
 export type TreeItemProps = TreeViewItemProps;
 export type TreeItemTextProps = TreeViewItemTextProps;
 export type TreeItemIndicatorProps = TreeViewItemIndicatorProps;

package/src/components/Tree/TreeBranchIndentGuide.test.tsx

@@ -0,0 +1,213 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render } from '@testing-library/react';
+
+import { system } from '../../theme';
+import { createTreeCollection } from './index';
+import { Tree } from './Tree';
+
+interface N {
+  id: string;
+  name: string;
+  children?: N[];
+}
+
+const sample: N = {
+  id: 'ROOT',
+  name: '',
+  children: [{ id: 'a', name: 'A', children: [{ id: 'a1', name: 'A1' }] }],
+};
+
+const collection = createTreeCollection<N>({
+  rootNode: sample,
+  nodeToValue: (n) => n.id,
+  nodeToString: (n) => n.name,
+});
+
+const renderNode = ({
+  node,
+  nodeState,
+}: {
+  node: N;
+  nodeState: { isBranch: boolean };
+}) =>
+  nodeState.isBranch ? (
+    <Tree.BranchControl>
+      <Tree.BranchText>{node.name}</Tree.BranchText>
+    </Tree.BranchControl>
+  ) : (
+    <Tree.Item>
+      <Tree.ItemText>{node.name}</Tree.ItemText>
+    </Tree.Item>
+  );
+
+function renderGuide(elbow: boolean, extraProps: { guideColor?: string } = {}) {
+  const { container } = render(
+    <ChakraProvider value={system}>
+      <Tree.Root
+        collection={collection}
+        aria-label="t"
+        defaultExpandedValue={['a']}
+      >
+        <Tree.Tree>
+          <Tree.Node
+            indentGuide={
+              elbow ? (
+                <Tree.BranchIndentGuide elbow {...extraProps} />
+              ) : (
+                <Tree.BranchIndentGuide {...extraProps} />
+              )
+            }
+            render={renderNode}
+          />
+        </Tree.Tree>
+      </Tree.Root>
+    </ChakraProvider>
+  );
+  const guide = container.querySelector<HTMLElement>(
+    '[data-part="branch-indent-guide"]'
+  );
+  if (!guide) throw new Error('no indent guide rendered');
+  return guide.className;
+}
+
+// All Chakra/emotion-injected CSS, concatenated.
+const sheetText = () =>
+  Array.from(document.querySelectorAll('style'))
+    .map((s) => s.textContent ?? '')
+    .join('\n');
+
+// The foot rule is anchored on the emotion-generated `css-*` class
+// (not the static `chakra-*` slot class), so target that one.
+const styleAnchor = (className: string) => {
+  const emotion = className
+    .trim()
+    .split(/\s+/)
+    .find((c) => /^css-/.test(c));
+  if (!emotion) throw new Error(`no emotion class in: ${className}`);
+  return '\\.' + emotion;
+};
+
+/**
+ * Regression guard for the `elbow` foot. Chakra renders ONE indent guide
+ * per `branchContent` (its first child), followed by that branch's rows
+ * as siblings — so the foot must be drawn on those sibling rows, scoped
+ * to the elbow guide's own class. An earlier `:last-of-type::after`
+ * attempt silently matched nothing (the guide is never the last sibling
+ * of its type), which is exactly what these tests pin down.
+ */
+describe('Tree.BranchIndentGuide elbow', () => {
+  it('draws a ::before foot on the guide’s sibling rows when elbow is set', () => {
+    const cls = renderGuide(true);
+    const anchor = styleAnchor(cls);
+    const css = sheetText();
+
+    // Foot rule is scoped to THIS guide's class via the sibling combinator,
+    // for both leaf rows and branch rows — never applied globally.
+    expect(css).toMatch(
+      new RegExp(`${anchor}\\s*~\\s*\\[data-part="item"\\]::before`)
+    );
+    expect(css).toMatch(
+      new RegExp(
+        `${anchor}\\s*~\\s*\\[data-part="branch"\\]\\s*>\\s*\\[data-part="branch-control"\\]::before`
+      )
+    );
+
+    // The foot paints a 1px cross-stroke pinned to the row's vertical
+    // centre, starting at the parent rail column.
+    const footRule =
+      css.match(
+        new RegExp(
+          `${anchor}\\s*~\\s*\\[data-part="item"\\]::before\\s*\\{[^}]*\\}`
+        )
+      )?.[0] ?? '';
+    expect(footRule).toContain('content:""');
+    expect(footRule).toContain('position:absolute');
+    expect(footRule).toContain('inset-block-start:50%');
+    expect(footRule).toContain('height:1px');
+    expect(footRule).toMatch(
+      /inset-inline-start:calc\(var\(--tree-offset\) - var\(--tree-elbow-indentation\)\)/
+    );
+
+    // Elbow mode widens per-level indentation: the sibling rows redefine
+    // the recipe's indentation-offset from the widened value, pushing the
+    // row text right, away from the elbow foot.
+    const rowVarsRule =
+      css.match(
+        new RegExp(`${anchor}\\s*~\\s*\\[data-part="item"\\]\\s*\\{[^}]*\\}`)
+      )?.[0] ?? '';
+    expect(rowVarsRule).toContain(
+      '--tree-elbow-indentation:calc(var(--tree-indentation) + 4px)'
+    );
+    expect(rowVarsRule).toContain(
+      '--tree-indentation-offset:calc(var(--tree-elbow-indentation) * var(--tree-depth))'
+    );
+  });
+
+  it('draws no foot for a plain guide (no elbow)', () => {
+    const cls = renderGuide(false);
+    const anchor = styleAnchor(cls);
+    // This specific guide's class must not anchor any ::before foot rule.
+    expect(sheetText()).not.toMatch(new RegExp(`${anchor}\\s*~[^{]*::before`));
+  });
+
+  it('stops the vertical segment at the centre of the last row (└)', () => {
+    const cls = renderGuide(true);
+    const anchor = styleAnchor(cls);
+    const css = sheetText();
+
+    // Middle rows: full-height vertical (├) on the row itself.
+    const middleRule =
+      css.match(
+        new RegExp(
+          `${anchor}\\s*~\\s*\\[data-part="item"\\]:not\\(:last-child\\)::after\\s*\\{[^}]*\\}`
+        )
+      )?.[0] ?? '';
+    expect(middleRule).toContain('inset-block-start:0');
+    expect(middleRule).toContain('inset-block-end:0');
+    expect(middleRule).toContain('width:1px');
+
+    // Last leaf row: segment ends at 50% so the foot forms a └.
+    const lastItemRule =
+      css.match(
+        new RegExp(
+          `${anchor}\\s*~\\s*\\[data-part="item"\\]:last-child::after\\s*\\{[^}]*\\}`
+        )
+      )?.[0] ?? '';
+    expect(lastItemRule).toContain('inset-block-start:0');
+    expect(lastItemRule).toContain('height:50%');
+
+    // Last branch row: half-height segment on its control only, so an
+    // expanded last branch has no rail running past its elbow.
+    const lastBranchRule =
+      css.match(
+        new RegExp(
+          `${anchor}\\s*~\\s*\\[data-part="branch"\\]:last-child\\s*>\\s*\\[data-part="branch-control"\\]::after\\s*\\{[^}]*\\}`
+        )
+      )?.[0] ?? '';
+    expect(lastBranchRule).toContain('height:50%');
+
+    // Non-last branch: pass-through rail spans the whole expanded subtree,
+    // painted above row hover backgrounds like the original slot rail.
+    const passThroughRule =
+      css.match(
+        new RegExp(
+          `${anchor}\\s*~\\s*\\[data-part="branch"\\]:not\\(:last-child\\)::before\\s*\\{[^}]*\\}`
+        )
+      )?.[0] ?? '';
+    expect(passThroughRule).toContain('inset-block-end:0');
+    expect(passThroughRule).toContain('z-index:1');
+  });
+
+  it('paints the guide with the custom guideColor token', () => {
+    const cls = renderGuide(true, { guideColor: 'red.500' });
+    const anchor = styleAnchor(cls);
+    const css = sheetText();
+    const footRule =
+      css.match(
+        new RegExp(
+          `${anchor}\\s*~\\s*\\[data-part="item"\\]::before\\s*\\{[^}]*\\}`
+        )
+      )?.[0] ?? '';
+    expect(footRule).toMatch(/--chakra-colors-red-500|red\.500/);
+  });
+});

package/src/components/Tree/TreeBranchIndentGuide.tsx

@@ -3,18 +3,144 @@ import { TreeView as ChakraTreeView } from '@chakra-ui/react';
 
 import { TreeBranchIndentGuideProps } from './Tree.types';
 
+// Extra per-level indentation in elbow mode. Guide-line trees read better
+// with a little more horizontal air between the elbow and the row text,
+// so each level indents this much further than the recipe default. The
+// foot length does NOT grow with it (its default is derived from the
+// original `--tree-indentation`), so the foot-to-text gap widens by the
+// same amount.
+const ELBOW_EXTRA_INDENT = '4px';
+
+// The widened per-level indentation, defined on the guide's sibling rows
+// so both the recipe's offset math and our pseudo-element math can share
+// it. Root rows (depth 1) have no guide sibling, but their offset
+// multiplies indentation by zero, so every level stays consistent.
+const ELBOW_INDENT_VARS = {
+  '--tree-elbow-indentation': `calc(var(--tree-indentation) + ${ELBOW_EXTRA_INDENT})`,
+} as const;
+
+// Re-derive the recipe's `--tree-indentation-offset` (which feeds
+// `--tree-offset`, the row's padding-start) from the widened indentation.
+// Must be set on the same elements the recipe defines it on
+// (item / branch-control) — inheritance can't override those.
+const ELBOW_OFFSET_VARS = {
+  '--tree-indentation-offset':
+    'calc(var(--tree-elbow-indentation) * var(--tree-depth))',
+} as const;
+
+// The parent rail column, measured from a child row (item / branch-control).
+// A row's content starts at its own `--tree-offset`, and the parent rail
+// sits exactly one (widened) indentation to its left (verified against the
+// recipe's offset math for both the guide and the row slots).
+const ROW_RAIL_COLUMN =
+  'calc(var(--tree-offset) - var(--tree-elbow-indentation))';
+
+// The same column, computed from the `branch` element itself. A branch
+// only carries Ark's inline `--depth` (the recipe's `--tree-offset` is
+// defined on item/branch-control, not here), so expand the recipe math:
+// rail(x) = padding + indentation * (depth - 2) + icon * 0.5 * (depth - 1)
+// — algebraically identical to ROW_RAIL_COLUMN for a row at `--depth`.
+const BRANCH_RAIL_COLUMN =
+  'calc(var(--tree-padding-inline) + var(--tree-elbow-indentation) * (var(--depth) - 2) + var(--tree-icon-size) * 0.5 * (var(--depth) - 1))';
+
 export const TreeBranchIndentGuide = forwardRef<
   HTMLDivElement,
   TreeBranchIndentGuideProps
->((props, ref) => {
-  // Chakra v3's `branchIndentGuide` slot already renders the vertical
-  // line via `position: absolute`, `width: 1px`, `bg: border`, with
-  // `insetInlineStart` auto-calculated from tree depth. Don't add
-  // `ms`/`ps` (breaks the depth math, pushes the line over content)
-  // or `borderInlineStartWidth` (stacks a second 1px stroke on top of
-  // the slot's own bg-painted 1px). Only override `bg` to lighten.
-  return (
-    <ChakraTreeView.BranchIndentGuide ref={ref} bg="border.subtle" {...props} />
-  );
-});
+>(
+  (
+    {
+      elbow = false,
+      footLength = 'calc(var(--tree-indentation) - 4px)',
+      guideColor = 'border.default',
+      ...props
+    },
+    ref
+  ) => {
+    // Chakra v3's `branchIndentGuide` slot renders ONE absolutely-positioned
+    // vertical line per `branchContent` (its first child), `height: 100%`,
+    // with `insetInlineStart` auto-calculated from tree depth. Don't add
+    // `ms`/`ps` (breaks the depth math) or `borderInlineStartWidth` (stacks
+    // a second 1px stroke on the slot's own bg-painted 1px) — only `bg`.
+    //
+    // That single full-height rail cannot form a `└` on the last row: it
+    // always paints past the last row's centre down to the content bottom.
+    // So in `elbow` mode the slot's own rail is hidden (`bg: transparent`,
+    // the element stays as the CSS sibling anchor) and the guide lines are
+    // re-drawn per row on the guide's sibling rows (`[data-part="item"]`
+    // leaves and `[data-part="branch"]` subtrees):
+    //
+    //  - every row gets a `::before` foot — the horizontal cross-stroke
+    //    from the rail column toward the row content, pinned to the row's
+    //    vertical centre;
+    //  - non-last rows get a full-height vertical segment (`├`); for a
+    //    branch it is drawn on the `[data-part="branch"]` element so it
+    //    passes through the whole expanded subtree, like the original rail
+    //    (zIndex 1 for the same paint-above-row-hover reason);
+    //  - the LAST row's segment stops at the row's vertical centre where
+    //    the foot meets it (`└`); for a branch that means half the
+    //    branch-control only, so an expanded last branch hangs below the
+    //    elbow with no rail running past it.
+    const foot = {
+      content: '""',
+      position: 'absolute',
+      insetBlockStart: '50%',
+      insetInlineStart: ROW_RAIL_COLUMN,
+      width: footLength,
+      height: '1px',
+      bg: guideColor,
+    } as const;
+    const rail = {
+      content: '""',
+      position: 'absolute',
+      insetBlockStart: '0',
+      insetInlineStart: ROW_RAIL_COLUMN,
+      width: '1px',
+      bg: guideColor,
+    } as const;
+    const elbowCss = elbow
+      ? {
+          '& ~ [data-part="item"]': {
+            ...ELBOW_INDENT_VARS,
+            ...ELBOW_OFFSET_VARS,
+          },
+          // branch-control reads --tree-elbow-indentation by inheritance,
+          // but the offset override must sit on the control itself.
+          '& ~ [data-part="branch"]': ELBOW_INDENT_VARS,
+          '& ~ [data-part="branch"] > [data-part="branch-control"]':
+            ELBOW_OFFSET_VARS,
+          '& ~ [data-part="item"]::before': foot,
+          '& ~ [data-part="branch"] > [data-part="branch-control"]::before':
+            foot,
+          '& ~ [data-part="item"]:not(:last-child)::after': {
+            ...rail,
+            insetBlockEnd: '0',
+          },
+          '& ~ [data-part="item"]:last-child::after': {
+            ...rail,
+            height: '50%',
+          },
+          '& ~ [data-part="branch"]:not(:last-child)::before': {
+            ...rail,
+            insetBlockEnd: '0',
+            insetInlineStart: BRANCH_RAIL_COLUMN,
+            zIndex: 1,
+          },
+          '& ~ [data-part="branch"]:last-child > [data-part="branch-control"]::after':
+            {
+              ...rail,
+              height: '50%',
+            },
+        }
+      : undefined;
+
+    return (
+      <ChakraTreeView.BranchIndentGuide
+        ref={ref}
+        bg={elbow ? 'transparent' : guideColor}
+        css={elbowCss}
+        {...props}
+      />
+    );
+  }
+);
 TreeBranchIndentGuide.displayName = 'TreeBranchIndentGuide';

package/src/theme/global.ts

@@ -26,7 +26,10 @@ export const globalCss = defineGlobalStyles({
 
   html: {
     height: 'var(--chakra-vh)',
-    fontSize: 16,
+    // Global base font size. The whole type/spacing scale is em-relative, so
+    // this single value drives the app-wide baseline; surfaces that need a
+    // different base (e.g. FactChat chat at 16px) opt in via <ScaledContext>.
+    fontSize: 14,
     fontFamily: [
       pretendard.style.fontFamily,
       inter.style.fontFamily,

package/src/theme/index.ts

@@ -74,7 +74,7 @@ const SHARED_TEXT_STYLE_VALUES = {
  * Text styles for consistent typography across the application
  * Names match fontSize tokens for easy migration: fontStyle="h1" → textStyle="h1"
  *
- * Base font size: 16px (set in global.ts)
+ * Base font size: 14px (set in global.ts)
  * Responsive scaling using em units (relative to nearest ancestor font-size):
  * - Mobile (base): Slightly smaller for better readability on small screens
  * - Desktop (md+): Original design sizes