@simplysm/angular 14.0.42 → 14.0.43

package/src/data/sheet/sd-sheet.ts

@@ -8,6 +8,7 @@ import {
   input,
   model,
   output,
+  signal,
   ViewEncapsulation,
 } from "@angular/core";
 import { NgTemplateOutlet } from "@angular/common";
@@ -15,18 +16,17 @@ import { SdSheetColumn } from "./sd-sheet-column";
 import { SdCheckbox } from "../../controls/checkbox/sd-checkbox";
 import { NgIcon } from "@ng-icons/core";
 import {
-  tablerArrowUp,
-  tablerArrowDown,
-  tablerChevronRight,
-  tablerChevronDown,
-  tablerChevronsRight,
-  tablerChevronsDown,
+  tablerArrowRight,
+  tablerArrowsSort,
+  tablerCaretRight,
   tablerSettings,
+  tablerSortAscending,
+  tablerSortDescending,
 } from "@ng-icons/tabler-icons";
 import { useSheetLayoutEngine } from "./useSheetLayoutEngine";
 import { useSheetColumnFixing } from "./useSheetColumnFixing";
 import { useSelectionManager } from "../../core/selection/useSelectionManager";
-import { useSortingManager, type SortingDef } from "../../core/selection/useSortingManager";
+import { type SortingDef, useSortingManager } from "../../core/selection/useSortingManager";
 import { SdPagination } from "../../controls/pagination/sd-pagination";
 import { SdAnchor } from "../../controls/button/sd-anchor";
 import { SdButton } from "../../controls/button/sd-button";
@@ -36,94 +36,186 @@ import type {
   SdSheetHeaderDef,
   SdSheetItemKeydownEventParam,
 } from "./types";
+import type { SdResizeEvent } from "../../core/events/sd-resize";
+import { SdResizeDirective } from "../../core/events/sd-resize";
 import { injectSdSystemConfigResource } from "../../core/config/injectSdSystemConfigResource";
 import { injectSheetDomAccessor } from "./injectSheetDomAccessor";
 import { useSheetCellAgent } from "./useSheetCellAgent";
 import { injectSheetColumnResizing } from "./injectSheetColumnResizing";
 import { useSheetDisplayPipeline } from "./useSheetDisplayPipeline";
 import { useSheetCellStyling } from "./useSheetCellStyling";
+import { useSheetFocusIndicator } from "./useSheetFocusIndicator";
+import { injectSheetSelectRowIndicator } from "./injectSheetSelectRowIndicator";
 import { SdModalProvider } from "../../core/modal/sd-modal.provider";
 import { SdSheetConfigModal } from "./sd-sheet-config.modal";
+import { SdEvents } from "../../core/events/sd-events";
 
 @Component({
   selector: "sd-sheet",
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [NgTemplateOutlet, SdCheckbox, NgIcon, SdPagination, SdAnchor, SdButton],
+  imports: [NgTemplateOutlet, SdCheckbox, NgIcon, SdPagination, SdAnchor, SdButton, SdResizeDirective],
+  hostDirectives: [
+    { directive: SdEvents, outputs: ["keydown.capture", "focus.capture", "blur.capture"] },
+  ],
+  host: {
+    "class": "flex-column fill",
+    "[attr.data-sd-inset]": "inset()",
+    "[attr.data-sd-focus-mode]": "focusMode()",
+    "(keydown.capture)": "onKeydownCapture($event)",
+    "(focus.capture)": "onFocusCapture($event)",
+    "(dblclick)": "onDblClick($event)",
+    "(blur.capture)": "onBlurCapture($event)",
+  },
   template: `
-    @if ((key() || effectivePageCount() > 1) && !hideConfigBar()) {
-      <div class="_tool">
+    @if ((key() || effectivePageCount() > 0) && !hideConfigBar()) {
+      <div class="_tool flex-row gap-sm p-xs">
         @if (key()) {
-          <sd-button (click)="onConfigButtonClick()">
+          <sd-button [theme]="'link-primary'" [size]="'sm'" (click)="onConfigButtonClick()">
             <ng-icon [svg]="icons.tablerSettings" />
           </sd-button>
         }
         @if (effectivePageCount() > 1) {
-          <sd-pagination [(currentPage)]="currentPage" [totalPageCount]="effectivePageCount()" [visiblePageCount]="visiblePageCount()" />
+          <sd-pagination
+            class="flex-fill"
+            [(currentPage)]="currentPage"
+            [totalPageCount]="effectivePageCount()"
+            [visiblePageCount]="visiblePageCount()"
+          />
         }
       </div>
     }
-    <div class="_container" [style]="contentStyle()">
-      <table>
+
+    <div
+      class="_sheet-container flex-fill"
+      (scroll.passive)="onContainerScroll()"
+      [style]="contentStyle()"
+    >
+      <table (sdResize)="onTableResize($event)">
         <thead>
           @for (row of layout.headerDefTable(); track $index; let rowIdx = $index) {
             <tr>
-              @if (expanding.hasExpandable() && rowIdx === 0) {
-                <th
-                  class="_expand-col"
-                  [attr.rowspan]="layout.headerFeatureRowSpan() > 1 ? layout.headerFeatureRowSpan() : null"
-                >
-                  <sd-anchor (click)="expanding.toggleAll()">
-                    <ng-icon [svg]="expanding.isAllExpanded() ? icons.tablerChevronsDown : icons.tablerChevronsRight" />
-                  </sd-anchor>
-                </th>
-              }
-              @if (selectMode() && rowIdx === 0) {
+              @if (rowIdx === 0) {
+                @let _fc = expanding.hasExpandable() ? -2 : -1;
                 <th
-                  class="_select-col"
-                  [attr.rowspan]="layout.headerFeatureRowSpan() > 1 ? layout.headerFeatureRowSpan() : null"
+                  class="_fixed _feature-cell _last-depth"
+                  [attr.rowspan]="
+                    layout.headerFeatureRowSpan() > 1 ? layout.headerFeatureRowSpan() : null
+                  "
+                  [attr.data-c]="_fc"
+                  [style.left.px]="featureFixedLeftMap().get(_fc)"
+                  (sdResize)="onFeatureCellResize($event, _fc)"
                 >
-                  @if (selectMode() === "multi") {
+                  @if (selection.hasSelectable() && selectMode() === "multi") {
                     <sd-checkbox
                       [value]="selection.isAllSelected()"
-                      (click)="selection.toggleAll()"
+                      (valueChange)="selection.toggleAll()"
                       [inline]="true"
-                      [inset]="true"
+                      [theme]="'white'"
                     />
                   }
                 </th>
-              }
-              @for (cell of row; track $index) {
-                <th
-                  [attr.colspan]="cell.colspan > 1 ? cell.colspan : null"
-                  [attr.rowspan]="cell.rowspan > 1 ? cell.rowspan : null"
-                  [attr.aria-sort]="getAriaSortValue(cell)"
-                  [attr.title]="cell.colDef?.tooltip ?? cell.text"
-                  [class.help]="cell.colDef?.tooltip"
-                  [style]="getHeaderCellStyle(cell)"
-                  (click)="onHeaderClick($event, cell)"
-                >
-                  @if (cell.colDef && getColumnHeaderTpl(cell.colDef.key); as headerTpl) {
-                    <ng-template [ngTemplateOutlet]="headerTpl" />
-                  } @else {
-                    <span>{{ cell.text }}</span>
-                  }
-                  @if (cell.colDef && getSortDef(cell.colDef.key); as sortDef) {
+                @if (expanding.hasExpandable()) {
+                  <th
+                    class="_fixed _feature-cell _last-depth"
+                    [attr.rowspan]="
+                      layout.headerFeatureRowSpan() > 1 ? layout.headerFeatureRowSpan() : null
+                    "
+                    [attr.data-c]="-1"
+                    [style.left.px]="featureFixedLeftMap().get(-1)"
+                    (sdResize)="onFeatureCellResize($event, -1)"
+                  >
                     <ng-icon
-                      class="_sort-icon"
-                      [svg]="sortDef.desc ? icons.tablerArrowDown : icons.tablerArrowUp"
+                      [svg]="icons.tablerCaretRight"
+                      [class.tx-theme-primary-default]="expanding.isAllExpanded()"
+                      [style.transform]="expanding.isAllExpanded() ? 'rotate(90deg)' : undefined"
+                      (click)="expanding.toggleAll()"
                     />
-                    @if (sortDef.indexText) {
-                      <span class="_sort-index">{{ sortDef.indexText }}</span>
+                  </th>
+                }
+              }
+              @for (cell of row; track $index; let c = $index) {
+                @if (!cell.isLastRow) {
+                  <th
+                    [class._fixed]="cell.colDef?.fixed"
+                    [attr.colspan]="cell.colspan > 1 ? cell.colspan : null"
+                    [attr.rowspan]="cell.rowspan > 1 ? cell.rowspan : null"
+                    [attr.data-c]="c"
+                    [attr.title]="cell.text"
+                    [style.left.px]="
+                      cell.colDef?.fixed ? fixing.fixedLeftMap().get(cell.colDef!.key) : null
+                    "
+                  >
+                    <div class="_p-sheet">
+                      <pre>{{ cell.text }}</pre>
+                    </div>
+                  </th>
+                } @else {
+                  <th
+                    [class._fixed]="cell.colDef?.fixed"
+                    class="_last-depth"
+                    [class._sort]="cell.colDef && !cell.colDef.disableSorting"
+                    [attr.colspan]="cell.colspan > 1 ? cell.colspan : null"
+                    [attr.rowspan]="cell.rowspan > 1 ? cell.rowspan : null"
+                    [attr.data-c]="c"
+                    [attr.title]="cell.colDef?.tooltip ?? cell.text"
+                    [class.help]="cell.colDef?.tooltip"
+                    [style]="getHeaderCellStyle(cell)"
+                    (click)="onHeaderClick($event, cell)"
+                  >
+                    <div class="_headerContent flex-row">
+                      @if (cell.colDef && getColumnHeaderTpl(cell.colDef.key); as headerTpl) {
+                        <div class="flex-fill" [attr.style]="cell.colDef.headerStyle">
+                          <ng-template [ngTemplateOutlet]="headerTpl" />
+                        </div>
+                      } @else {
+                        <div class="flex-fill _p-sheet" [attr.style]="cell.colDef?.headerStyle">
+                          <pre>{{ cell.text }}</pre>
+                        </div>
+                      }
+                      @if (cell.colDef && !cell.colDef.disableSorting) {
+                        @let _sortDef = getSortDef(cell.colDef.key);
+                        <div class="_sort-icon">
+                          @if (_sortDef?.desc === false) {
+                            <ng-icon [svg]="icons.tablerSortAscending" />
+                          } @else if (_sortDef?.desc === true) {
+                            <ng-icon [svg]="icons.tablerSortDescending" />
+                          } @else {
+                            <ng-icon [svg]="icons.tablerArrowsSort" class="tx-trans-lightest" />
+                          }
+                          @if (_sortDef?.indexText) {
+                            <sub>{{ _sortDef?.indexText }}</sub>
+                          }
+                        </div>
+                      }
+                    </div>
+                    @if (cell.colDef && !cell.colDef.disableResizing) {
+                      <div
+                        class="_resizer"
+                        (mousedown)="onResizerMousedown($event, cell.colDef)"
+                        (dblclick)="onResizerDblClick($event, cell.colDef)"
+                      ></div>
                     }
-                  }
-                  @if (cell.isLastRow && cell.colDef && !cell.colDef.disableResizing) {
-                    <div
-                      class="_resizer"
-                      (mousedown)="onResizerMousedown($event, cell.colDef)"
-                      (dblclick)="onResizerDblClick($event, cell.colDef)"
-                    ></div>
+                  </th>
+                }
+              }
+            </tr>
+          }
+          @if (layout.hasSummary()) {
+            <tr class="_summary-row">
+              <th class="_fixed _feature-cell"></th>
+              @if (expanding.hasExpandable()) {
+                <th class="_fixed _feature-cell"></th>
+              }
+              @for (colDef of layout.columnDefs(); track colDef.key; let c = $index) {
+                <th
+                  [class._fixed]="colDef.fixed"
+                  [attr.data-c]="c"
+                  [style.left.px]="colDef.fixed ? fixing.fixedLeftMap().get(colDef.key) : null"
+                >
+                  @if (getColumnSummaryTpl(colDef.key); as tpl) {
+                    <ng-template [ngTemplateOutlet]="tpl" />
                   }
                 </th>
               }
@@ -131,39 +223,73 @@ import { SdSheetConfigModal } from "./sd-sheet-config.modal";
           }
         </thead>
         <tbody>
-          @for (item of displayItems(); track trackByFn() ? trackByFn()!(item, $index) : $index; let rowIdx = $index) {
+          @for (item of displayItems(); track trackByFn()(item, $index); let rowIdx = $index) {
             <tr
-              [attr.aria-selected]="selection.isSelected(item) ? 'true' : null"
-              [attr.aria-expanded]="getAriaExpanded(item)"
-              [style.background]="selection.isSelected(item) ? 'var(--trans-lighter)' : null"
+              [attr.data-r]="rowIdx"
               (click)="onRowClick(item)"
               (keydown)="onItemKeydown($event, item)"
             >
-              @if (expanding.hasExpandable()) {
-                <td class="_expand-col">
-                  @if (getItemDef(item).hasChildren) {
-                    <sd-anchor (click)="onExpandClick($event, item)">
-                      <ng-icon [svg]="isExpanded(item) ? icons.tablerChevronDown : icons.tablerChevronRight" />
-                    </sd-anchor>
-                  }
-                </td>
-              }
-              @if (selectMode()) {
-                <td class="_select-col">
+              @let _fc = expanding.hasExpandable() ? -2 : -1;
+              <td
+                class="_fixed _feature-cell"
+                [attr.data-r]="rowIdx"
+                [attr.data-c]="_fc"
+                [style.left.px]="featureFixedLeftMap().get(_fc)"
+              >
+                @if (selectMode() === "multi") {
+                  @let _selectable = selection.getSelectable(item);
                   <sd-checkbox
                     [value]="selection.isSelected(item)"
                     [canChangeFn]="selection.getCanChangeFn(item)"
-                    (click)="onSelectCheckboxClick($event, item)"
+                    (valueChange)="selection.toggle(item)"
+                    (mousedown)="onSelectorMouseDown($event, rowIdx)"
                     [inline]="true"
-                    [inset]="true"
-                    [attr.title]="getSelectableTooltip(item)"
+                    [theme]="'white'"
+                    [disabled]="_selectable !== true"
+                    [attr.title]="_selectable"
                   />
+                } @else if (selectMode() === "single") {
+                  @let _selectable = selection.getSelectable(item);
+                  @if (_selectable === true && selection.getCanChangeFn(item)) {
+                    <sd-anchor
+                      [theme]="selection.isSelected(item) ? 'primary' : 'gray'"
+                      (pointerdown)="selection.toggle(item)"
+                      [attr.title]="_selectable"
+                    >
+                      <ng-icon [svg]="icons.tablerArrowRight" />
+                    </sd-anchor>
+                  }
+                }
+              </td>
+              @if (expanding.hasExpandable()) {
+                <td
+                  class="_fixed _feature-cell"
+                  [attr.data-r]="rowIdx"
+                  [attr.data-c]="-1"
+                  [style.left.px]="featureFixedLeftMap().get(-1)"
+                >
+                  @let itemDef = getItemDef(item);
+                  @if (itemDef.depth > 0) {
+                    <div
+                      class="_depth-indicator"
+                      [style.margin-left.em]="itemDef.depth - 0.5"
+                    ></div>
+                  }
+                  @if (itemDef.hasChildren) {
+                    <ng-icon
+                      [svg]="icons.tablerCaretRight"
+                      [style.transform]="isExpanded(item) ? 'rotate(90deg)' : undefined"
+                      [class.tx-theme-primary-default]="isExpanded(item)"
+                      (click)="onExpandClick($event, item)"
+                    />
+                  }
                 </td>
               }
               @for (colDef of layout.columnDefs(); track colDef.key; let colIdx = $index) {
                 <td
                   [attr.data-r]="rowIdx"
                   [attr.data-c]="colIdx"
+                  [class._fixed]="colDef.fixed"
                   [class]="getDataCellClass(item, colDef, rowIdx, colIdx)"
                   [style]="getCellStyleWithIndent(item, colDef, colIdx)"
                   (click)="onCellClick($event, item)"
@@ -178,8 +304,8 @@ import { SdSheetConfigModal } from "./sd-sheet-config.modal";
                         $implicit: item,
                         item: item,
                         index: rowIdx,
-                        depth: getChildrenFn() !== undefined ? getItemDef(item).depth : 0,
-                        edit: cellAgent.isCellEditMode({ r: rowIdx, c: colIdx })
+                        depth: getChildrenFn() != null ? getItemDef(item).depth : 0,
+                        edit: cellAgent.isCellEditMode({ r: rowIdx, c: colIdx }),
                       }"
                     />
                   }
@@ -188,163 +314,256 @@ import { SdSheetConfigModal } from "./sd-sheet-config.modal";
             </tr>
           }
         </tbody>
-        @if (layout.hasSummary()) {
-          <tfoot>
-            <tr>
-              @if (expanding.hasExpandable()) {
-                <td class="_expand-col"></td>
-              }
-              @if (selectMode()) {
-                <td class="_select-col"></td>
-              }
-              @for (colDef of layout.columnDefs(); track colDef.key) {
-                <td [style]="getFixedCellStyle(colDef)">
-                  @if (getColumnSummaryTpl(colDef.key); as tpl) {
-                    <ng-template [ngTemplateOutlet]="tpl" />
-                  }
-                </td>
-              }
-            </tr>
-          </tfoot>
-        }
       </table>
-      <div class="_resize-indicator" [style.display]="_isResizing() ? 'block' : 'none'" [style.left.px]="_resizeIndicatorLeft()"></div>
+
+      <div class="_focus-row-indicator">
+        <div class="_focus-cell-indicator"></div>
+      </div>
+      <div
+        class="_resize-indicator"
+        [style.display]="_isResizing() ? 'block' : 'none'"
+        [style.left.px]="_resizeIndicatorLeft()"
+      ></div>
+      <div class="_select-row-indicator-container"></div>
     </div>
   `,
   styles: [
     /* language=SCSS */ `
-      sd-sheet {
-        display: block;
-        position: relative;
-        overflow: hidden;
-        border: 1px solid var(--trans-lighter);
+      @use "../../../scss/commons/mixins";
 
-        &[data-sd-inset="true"] {
-          border: none;
-        }
+      $z-index-fixed: 2;
+      $z-index-head: 3;
+      $z-index-head-fixed: 4;
+      $z-index-select-row-indicator: 5;
+      $z-index-focus-row-indicator: 6;
+      $z-index-resize-indicator: 7;
+
+      $border-color: var(--theme-gray-lighter);
+      $border-color-dark: var(--theme-gray-lighter);
+      $border-color-darker: var(--theme-gray-light);
+
+      $border-radius: var(--border-radius-default);
+
+      sd-sheet {
+        border: 1px solid $border-color-dark;
+        border-radius: $border-radius;
 
         > ._tool {
-          display: flex;
-          align-items: center;
-          gap: var(--gap-sm);
-          padding: var(--gap-sm) var(--gap-default);
-          border-bottom: 1px solid var(--trans-lighter);
-          background: var(--theme-secondary-lightest);
+          background: var(--control-color);
+          border-top-left-radius: $border-radius;
+          border-top-right-radius: $border-radius;
+          border-bottom: 1px solid $border-color-dark;
         }
 
-        > ._container {
+        > ._sheet-container {
+          position: relative;
+          background: var(--sheet-bg);
+          border-bottom-left-radius: $border-radius;
+          border-bottom-right-radius: $border-radius;
           overflow: auto;
-          width: 100%;
-          height: 100%;
 
           > table {
-            width: 100%;
-            border-collapse: collapse;
+            border-spacing: 0;
             table-layout: fixed;
+            margin-right: 2px;
+            margin-bottom: 2px;
+            border-bottom-right-radius: $border-radius;
 
-            > thead > tr > th {
-              position: sticky;
-              top: 0;
-              z-index: 2;
-              background: var(--theme-secondary-lightest);
-              border: 1px solid var(--trans-lighter);
-              padding: var(--gap-sm) var(--gap-default);
-              text-align: left;
-              font-weight: bold;
+            > * > tr > *:last-child {
+              border-right: 1px solid $border-color-dark;
+            }
+
+            > * > tr:last-child > * {
+              border-bottom: 1px solid $border-color-dark;
+            }
+
+            > *:last-child > tr:last-child > td:last-child {
+              border-bottom-right-radius: $border-radius;
+              overflow: hidden;
+            }
+
+            > * > tr > * {
+              border-right: 1px solid $border-color;
+              border-bottom: 1px solid $border-color;
               white-space: nowrap;
-              cursor: pointer;
-              user-select: none;
+              overflow: hidden;
+              padding: 0;
+              position: relative;
 
-              &:not(._select-col):not(._expand-col) {
-                position: relative;
+              &._fixed:has(+ :not(._fixed)) + :not(._fixed):not([data-c="0"]) {
+                border-left: 1px solid $border-color;
               }
 
-              > ._sort-icon {
-                font-size: 0.85em;
-                vertical-align: middle;
-                margin-left: 0.25em;
+              &._feature-cell {
+                background: var(--theme-gray-lightest);
+                min-width: calc(var(--font-size-default) + 2px + var(--sheet-ph) * 2);
+                padding: var(--sheet-pv) var(--sheet-ph);
+                text-align: left;
+
+                > ng-icon {
+                  cursor: pointer;
+                  color: var(--text-trans-lightest);
+                }
+              }
+
+              &._fixed {
+                position: sticky;
+                left: 0;
+
+                &:has(+ :not(._fixed)) {
+                  border-right: 1px solid $border-color-dark;
+                }
               }
+            }
+
+            > thead {
+              position: sticky;
+              top: 0;
+              z-index: $z-index-head;
 
-              > ._sort-index {
-                font-size: 0.75em;
-                vertical-align: super;
+              > tr > th {
+                position: relative;
+                background: var(--theme-gray-lightest);
+                vertical-align: middle;
+
+                &._fixed {
+                  z-index: $z-index-head-fixed;
+                }
+
+                &._last-depth {
+                  border-bottom: 1px solid $border-color-dark;
+                }
+
+                &._feature-cell {
+                  border-bottom: 1px solid $border-color-dark;
+                }
+
+                &._sort {
+                  cursor: pointer;
+
+                  &:hover {
+                    text-decoration: underline;
+                  }
+                }
+
+                > ._headerContent {
+                  > ._sort-icon {
+                    padding: var(--gap-xs) var(--gap-xs) var(--gap-xs) 0;
+                    background-color: var(--theme-gray-lightest);
+                  }
+                }
+
+                > ._resizer {
+                  position: absolute;
+                  top: 0;
+                  right: 0;
+                  bottom: 0;
+                  width: 2px;
+                  cursor: ew-resize;
+                }
               }
 
-              > ._resizer {
-                position: absolute;
-                top: 0;
-                right: -2px;
-                width: 5px;
-                height: 100%;
-                cursor: col-resize;
-                z-index: 3;
+              &:has(> tr._summary-row) {
+                > tr > th._last-depth {
+                  border-bottom: 1px solid $border-color;
+                }
+
+                > tr._summary-row > th {
+                  background: var(--theme-warning-lightest);
+                  text-align: left;
+                  border-bottom: 1px solid $border-color-dark;
+                }
               }
             }
 
             > tbody > tr > td {
-              border: 1px solid var(--trans-lighter);
-              padding: var(--gap-sm) var(--gap-default);
-              white-space: nowrap;
+              background: var(--control-color);
+              vertical-align: top;
 
-              &:focus {
-                outline: 2px solid var(--theme-primary-default);
-                outline-offset: -2px;
+              &._fixed {
+                z-index: $z-index-fixed;
               }
-            }
 
-            > thead > tr > th._select-col,
-            > tbody > tr > td._select-col {
-              width: 2em;
-              min-width: 2em;
-              max-width: 2em;
-              text-align: center;
-              padding: 0;
+              > ._depth-indicator {
+                display: inline-block;
+                margin-top: 0.4em;
+                width: 0.5em;
+                height: 0.5em;
+                border-left: 1px solid var(--text-trans-default);
+                border-bottom: 1px solid var(--text-trans-default);
+                vertical-align: top;
+              }
             }
+          }
 
-            > thead > tr > th._expand-col,
-            > tbody > tr > td._expand-col {
-              width: 2em;
-              min-width: 2em;
-              max-width: 2em;
-              text-align: center;
-              padding: 0;
-            }
+          > ._focus-row-indicator {
+            display: none;
+            position: absolute;
+            pointer-events: none;
+            background: rgba(158, 158, 158, 0.1);
+            z-index: $z-index-focus-row-indicator;
 
-            > tfoot > tr > td {
-              position: sticky;
-              bottom: 0;
-              z-index: 2;
-              background: var(--theme-secondary-lightest);
-              border: 1px solid var(--trans-lighter);
-              padding: var(--gap-sm) var(--gap-default);
+            > ._focus-cell-indicator {
+              position: absolute;
+              border: 2px solid var(--theme-primary-default);
+              border-radius: $border-radius;
             }
           }
 
           > ._resize-indicator {
+            display: none;
             position: absolute;
+            pointer-events: none;
             top: 0;
-            width: 2px;
             height: 100%;
-            background: var(--theme-primary-default);
-            z-index: 10;
+            border: 1px dotted $border-color-darker;
+            z-index: $z-index-resize-indicator;
+          }
+
+          > ._select-row-indicator-container {
+            display: none;
+            position: absolute;
             pointer-events: none;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: $z-index-select-row-indicator;
+
+            > ._select-row-indicator {
+              display: block;
+              left: 0;
+              position: absolute;
+              pointer-events: none;
+              background: var(--theme-primary-default);
+              opacity: 0.1;
+            }
+          }
+        }
+
+        ._p-sheet {
+          padding: var(--sheet-pv) var(--sheet-ph);
+        }
+
+        &[data-sd-focus-mode="row"] {
+          > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {
+            display: none !important;
           }
         }
+
+        &[data-sd-inset="true"] {
+          border: none;
+          border-radius: 0;
+        }
       }
     `,
   ],
-  host: {
-    "[attr.data-sd-inset]": "inset()",
-    "(keydown.capture)": "onKeydownCapture($event)",
-    "(dblclick)": "onDblClick($event)",
-    "(blur.capture)": "onBlurCapture($event)",
-  },
 })
 export class SdSheet<T> {
   // Inputs
   key = input<string>();
   items = input<T[]>([]);
-  trackByFn = input<(item: T, index: number) => unknown>();
+  trackByFn = input<(item: T, index: number) => unknown>((item) => item);
   selectMode = input<"single" | "multi">();
   autoSelect = input<"click" | "focus">();
   getItemSelectableFn = input<(item: T) => boolean | string>();
@@ -406,6 +625,23 @@ export class SdSheet<T> {
     columnDefs: this.layout.columnDefs,
   });
 
+  // Feature cell fixing (select/expand columns)
+  private readonly _featureCellWidths = signal(new Map<number, number>());
+
+  featureFixedLeftMap = computed(() => {
+    const map = new Map<number, number>();
+    const widths = this._featureCellWidths();
+    const hasExpand = this.expanding.hasExpandable();
+
+    if (hasExpand) {
+      map.set(-2, 0);
+      map.set(-1, widths.get(-2) ?? 0);
+    } else {
+      map.set(-1, 0);
+    }
+    return map;
+  });
+
   // Sorting manager
   sorting = useSortingManager({
     sorts: this.sorts,
@@ -442,6 +678,18 @@ export class SdSheet<T> {
   getCellStyleWithIndent = this._styling.getCellStyleWithIndent;
   getDataCellClass = this._styling.getDataCellClass;
 
+  // Focus indicator
+  private readonly _focusIndicator = useSheetFocusIndicator({
+    domAccessor: this.domAccessor,
+  });
+
+  // Select row indicator
+  private readonly _selectRowIndicator = injectSheetSelectRowIndicator<T>({
+    domAccessor: this.domAccessor,
+    selectedItems: this.selectedItems,
+    displayItems: this.displayItems,
+  });
+
   // Selection manager
   selection = useSelectionManager<T>({
     displayItems: this.displayItems,
@@ -452,13 +700,12 @@ export class SdSheet<T> {
 
   // Icons
   icons = {
-    tablerArrowUp,
-    tablerArrowDown,
-    tablerChevronRight,
-    tablerChevronDown,
-    tablerChevronsRight,
-    tablerChevronsDown,
     tablerSettings,
+    tablerCaretRight,
+    tablerArrowsSort,
+    tablerSortAscending,
+    tablerSortDescending,
+    tablerArrowRight,
   };
 
   private readonly _columnControlMap = computed(() => {
@@ -496,11 +743,6 @@ export class SdSheet<T> {
     }
   }
 
-  onSelectCheckboxClick(event: Event, item: T): void {
-    event.stopPropagation();
-    this.selection.toggle(item);
-  }
-
   onCellClick(event: Event, item: T): void {
     if (this.autoSelect() === "click") {
       this.selection.select(item);
@@ -554,16 +796,96 @@ export class SdSheet<T> {
     return sortDef.desc ? "descending" : "ascending";
   }
 
-  async onKeydownCapture(event: Event): Promise<void> {
-    await this.cellAgent.handleKeydownCapture(event as KeyboardEvent);
+  async onKeydownCapture(event: KeyboardEvent): Promise<void> {
+    await this.cellAgent.handleKeydownCapture(event);
   }
 
   onDblClick(event: MouseEvent): void {
     this.cellAgent.handleCellDoubleClick(event);
   }
 
-  onBlurCapture(event: Event): void {
-    this.cellAgent.handleBlurCapture(event as FocusEvent);
+  onFocusCapture(event: FocusEvent): void {
+    this._autoScrollOnFocus(event);
+    this._focusIndicator.redraw();
+  }
+
+  onBlurCapture(event: FocusEvent): void {
+    this.cellAgent.handleBlurCapture(event);
+    this._focusIndicator.redraw();
+  }
+
+  onContainerScroll(): void {
+    this._focusIndicator.redraw();
+  }
+
+  onTableResize(event: SdResizeEvent): void {
+    if (!event.widthChanged) return;
+    this._focusIndicator.redraw();
+    this._selectRowIndicator.redraw();
+  }
+
+  onFeatureCellResize(event: SdResizeEvent, key: number): void {
+    if (!event.widthChanged) return;
+    const width = event.target.offsetWidth;
+    this._featureCellWidths.update((m) => {
+      const newMap = new Map(m);
+      newMap.set(key, width);
+      return newMap;
+    });
+  }
+
+  onSelectorMouseDown(event: MouseEvent, r: number): void {
+    if (!event.shiftKey) return;
+    event.preventDefault();
+    event.stopPropagation();
+
+    const focusedEl = document.activeElement;
+    if (!(focusedEl instanceof HTMLElement)) return;
+
+    const focusedTrEl =
+      focusedEl.tagName.toLowerCase() === "tr" ? focusedEl : focusedEl.closest("tr");
+    if (!(focusedTrEl instanceof HTMLTableRowElement)) return;
+
+    const frAttr = focusedTrEl.getAttribute("data-r");
+    if (frAttr == null) return;
+    const fr = parseInt(frAttr, 10);
+    if (Number.isNaN(fr)) return;
+
+    const items = this.displayItems();
+    const isSelect = this.selection.isSelected(items[fr]);
+    queueMicrotask(() => {
+      for (let i = Math.min(fr, r); i <= Math.max(fr, r); i++) {
+        if (isSelect) {
+          this.selection.select(items[i]);
+        } else {
+          this.selection.deselect(items[i]);
+        }
+      }
+    });
+
+    const row = this.domAccessor.getRow(r);
+    row?.querySelector<HTMLElement>("[tabindex]")?.focus();
+  }
+
+  private _autoScrollOnFocus(event: FocusEvent): void {
+    if (!(event.target instanceof HTMLElement)) return;
+
+    const tdEl =
+      event.target.tagName.toLowerCase() === "td" ? event.target : event.target.closest("td");
+    if (!(tdEl instanceof HTMLTableCellElement)) return;
+    if (tdEl.classList.contains("_fixed")) return;
+
+    const containerEl = this.domAccessor.getContainer();
+    const theadEl = this.domAccessor.getTHead();
+    const fixedHeaders = this.domAccessor.getLastDepthFixedHeaders();
+
+    containerEl.scrollIntoViewIfNeeded(
+      { top: tdEl.offsetTop, left: tdEl.offsetLeft },
+      {
+        top: theadEl.offsetHeight,
+        left: fixedHeaders.reduce((sum, el) => sum + el.offsetWidth, 0),
+      },
+    );
   }
 
   onItemKeydown(event: KeyboardEvent, item: T): void {
@@ -575,21 +897,19 @@ export class SdSheet<T> {
   }
 
   async onConfigButtonClick(): Promise<void> {
-    const result = await this._sdModal.showAsync(
-      {
-        title: "시트 설정",
-        type: SdSheetConfigModal,
-        inputs: {
-          controls: this.columnControls(),
-          config: this._configResource.value(),
-        },
+    const result = await this._sdModal.showAsync({
+      title: "시트 설정",
+      type: SdSheetConfigModal,
+      inputs: {
+        sheetKey: this.key()!,
+        controls: this.columnControls(),
+        config: this._configResource.value(),
       },
-    );
+    });
     if (result != null) {
       this._configResource.set(result);
     }
   }
-
 }
 
 // Re-export SortingDef from useSortingManager for convenience