klun-ui 0.4.0 → 0.5.0

package/dist/styles.css

@@ -850,6 +850,2637 @@
   --klun-radius-xl: 8px;
 }
 
+/* src/styles/tokens/kk-theme.css */
+:root {
+  --kk-primary: #409eff;
+  --kk-primary-dark: #337ecc;
+  --kk-primary-light: #79bbff;
+  --kk-primary-soft: #ecf5ff;
+  --kk-primary-plain-border: #a0cfff;
+  --kk-success: #67c23a;
+  --kk-warning: #e6a23c;
+  --kk-warning-soft: #fdf6ec;
+  --kk-warning-border: #f5dab1;
+  --kk-danger: #f56c6c;
+  --kk-danger-soft: #fef0f0;
+  --kk-danger-border: #fab6b6;
+  --kk-text-strong: #303133;
+  --kk-text: #606266;
+  --kk-text-weak: #909399;
+  --kk-text-placeholder: #a8abb2;
+  --kk-surface: #fff;
+  --kk-th-bg: #fff;
+  --kk-page-bg: #f6f8f9;
+  --kk-hover: #f5f7fa;
+  --kk-active: #ecf5ff;
+  --kk-border: #dcdfe6;
+  --kk-border-weak: #e4e7ed;
+  --kk-line: #ebeef5;
+  --kk-line-strong: #e6e6e6;
+  --kk-move-bg: #f4f4f5;
+  --kk-move-border: #e9e9eb;
+  --kk-avatar-bg: #c0c4cc;
+  --kk-title: #3c4a54;
+  --kk-scrollbar: rgba(144, 147, 153, 0.3);
+  --kk-scrollbar-hover: rgba(144, 147, 153, 0.5);
+  --kk-radius: 0;
+  --kk-control-h: 32px;
+  --kk-font: 14px;
+  --kk-font-sm: 12px;
+}
+:root[data-theme=dark],
+.dark,
+[data-theme=dark] {
+  --kk-text-strong: #d0d0d0;
+  --kk-text: #cfd3da;
+  --kk-text-weak: #a3a6ad;
+  --kk-text-placeholder: #8d9095;
+  --kk-surface: #1d1e1f;
+  --kk-th-bg: #141414;
+  --kk-page-bg: #141414;
+  --kk-hover: #262727;
+  --kk-active: #0c1f32;
+  --kk-border: #4c4d4f;
+  --kk-border-weak: #414243;
+  --kk-line: #363637;
+  --kk-line-strong: #414243;
+  --kk-danger-soft: #2b1d1d;
+  --kk-danger-border: #854040;
+  --kk-warning-soft: #292218;
+  --kk-warning-border: #5c4626;
+  --kk-primary-soft: #0c1f32;
+  --kk-primary-plain-border: #204f80;
+  --kk-move-bg: #262727;
+  --kk-move-border: #414243;
+  --kk-avatar-bg: #6c6e72;
+  --kk-title: #d0d0d0;
+}
+[data-mode=kk] {
+  --klun-primary-base: var(--kk-primary);
+  --klun-primary-dark: var(--kk-primary-dark);
+  --klun-primary-darkest: var(--kk-primary-dark);
+  --klun-primary-light: var(--kk-primary-light);
+  --klun-primary-lighter: var(--kk-primary-soft);
+  --klun-primary-lighter-2: var(--kk-primary-soft);
+  --klun-bg-white-0: var(--kk-surface);
+  --klun-bg-weak-25: var(--kk-hover);
+  --klun-bg-weak-50: var(--kk-hover);
+  --klun-bg-soft-200: var(--kk-line);
+  --klun-stroke-soft-200: var(--kk-border);
+  --klun-stroke-sub-300: var(--kk-text-placeholder);
+  --klun-stroke-strong-950: var(--kk-text-strong);
+  --klun-text-strong-950: var(--kk-text-strong);
+  --klun-text-main-900: var(--kk-text-strong);
+  --klun-text-sub-600: var(--kk-text);
+  --klun-text-soft-400: var(--kk-text-weak);
+  --klun-text-disabled-300: var(--kk-text-placeholder);
+  --klun-icon-strong-950: var(--kk-text-strong);
+  --klun-icon-sub-600: var(--kk-text);
+  --klun-icon-soft-400: var(--kk-text-weak);
+  --klun-state-error-base: var(--kk-danger);
+  --klun-state-error-light: var(--kk-danger-soft);
+  --klun-state-error-lighter: var(--kk-danger-soft);
+  --klun-state-success-base: var(--kk-success);
+  --klun-state-warning-base: var(--kk-warning);
+  --klun-state-information-base: var(--kk-primary);
+  --klun-radius-xs: 0;
+  --klun-radius-sm: 0;
+  --klun-radius-md: 0;
+  --klun-radius-lg: 0;
+  --klun-radius-xl: 0;
+  --klun-radius-2xl: 0;
+  --klun-radius-3xl: 0;
+  --klun-radius-4xl: 0;
+  --klun-radius-capsule: 0;
+  --klun-control-h-md: 32px;
+}
+[data-mode=kk] .kk-page {
+  display: flex;
+  height: 100%;
+  font-size: var(--kk-font);
+  color: var(--kk-text);
+  background: var(--kk-surface);
+}
+:where([data-mode=kk] .kk-page) :where(button) {
+  font: inherit;
+  border: 0;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+}
+:where([data-mode=kk] .kk-page) :where(input, select, textarea) {
+  font: inherit;
+}
+[data-mode=kk] .kk-aside {
+  width: 200px;
+  flex-shrink: 0;
+  background: var(--kk-surface);
+  border-right: 1px solid var(--kk-line-strong);
+  display: flex;
+  flex-direction: column;
+}
+[data-mode=kk] .kk-aside--wide {
+  width: 300px;
+}
+[data-mode=kk] .kk-aside-head {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding: 13px 15px;
+}
+[data-mode=kk] .kk-aside-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding-bottom: 8px;
+}
+[data-mode=kk] .kk-aside-foot {
+  height: 51px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding: 0 15px;
+  border-top: 1px solid var(--kk-border-weak);
+  display: flex;
+  align-items: center;
+}
+[data-mode=kk] .kk-aside-foot .kk-iconbtn + .kk-iconbtn {
+  margin-left: 12px;
+}
+@supports not selector(::-webkit-scrollbar) {
+  [data-mode=kk] * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--kk-scrollbar) transparent;
+  }
+}
+[data-mode=kk] ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+[data-mode=kk] ::-webkit-scrollbar-track,
+[data-mode=kk] ::-webkit-scrollbar-corner {
+  background: transparent;
+}
+[data-mode=kk] ::-webkit-scrollbar-thumb {
+  background: var(--kk-scrollbar);
+  border-radius: 3px;
+}
+[data-mode=kk] ::-webkit-scrollbar-thumb:hover {
+  background: var(--kk-scrollbar-hover);
+}
+[data-mode=kk] .kk-input {
+  width: 100%;
+  height: var(--kk-control-h);
+  box-sizing: border-box;
+  padding: 0 11px;
+  border: 1px solid var(--kk-border);
+  border-radius: var(--kk-radius);
+  background: var(--kk-surface);
+  color: var(--kk-text);
+  outline: none;
+}
+[data-mode=kk] .kk-input::placeholder {
+  color: var(--kk-text-placeholder);
+}
+[data-mode=kk] .kk-input:focus {
+  border-color: var(--kk-primary);
+}
+[data-mode=kk] .kk-input[disabled] {
+  background: var(--kk-hover);
+  color: var(--kk-text-weak);
+  cursor: not-allowed;
+}
+[data-mode=kk] .kk-textarea {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 7px 11px;
+  border: 1px solid var(--kk-border);
+  border-radius: var(--kk-radius);
+  background: var(--kk-surface);
+  color: var(--kk-text);
+  font-size: var(--kk-font);
+  line-height: 1.5;
+  outline: none;
+  resize: vertical;
+}
+[data-mode=kk] .kk-textarea:focus {
+  border-color: var(--kk-primary);
+}
+[data-mode=kk] .kk-node {
+  height: 36px;
+  display: flex;
+  align-items: center;
+  padding-right: 10px;
+  cursor: pointer;
+  white-space: nowrap;
+  touch-action: none;
+}
+[data-mode=kk] .kk-node:hover {
+  background: var(--kk-hover);
+}
+[data-mode=kk] .kk-node.is-active {
+  background: var(--kk-active);
+}
+[data-mode=kk] .kk-node.is-dragging {
+  position: relative;
+  z-index: 3;
+  background: var(--kk-surface);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
+}
+[data-mode=kk] .kk-caret {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  padding: 0 6px;
+  box-sizing: content-box;
+  flex-shrink: 0;
+  color: #c0c4cc;
+  transition: transform 0.2s;
+}
+[data-mode=kk] .kk-caret svg {
+  display: block;
+  width: 12px;
+  height: 12px;
+}
+[data-mode=kk] .kk-caret.is-open {
+  transform: rotate(90deg);
+}
+[data-mode=kk] .kk-caret.is-leaf {
+  visibility: hidden;
+}
+[data-mode=kk] .kk-node-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+[data-mode=kk] .kk-code {
+  font-size: var(--kk-font-sm);
+  color: #999;
+}
+[data-mode=kk] .kk-node-do {
+  display: none;
+  margin-left: 10px;
+}
+[data-mode=kk] .kk-table .kk-node-do {
+  display: inline-flex;
+  margin-left: 0;
+  gap: 6px;
+  align-items: center;
+}
+[data-mode=kk] .kk-node:hover .kk-node-do,
+[data-mode=kk] .kk-node:focus-within .kk-node-do {
+  display: inline-flex;
+}
+[data-mode=kk] .kk-node:hover .kk-code,
+[data-mode=kk] .kk-node:focus-within .kk-code {
+  display: none;
+}
+[data-mode=kk] .kk-iconbtn {
+  height: 24px;
+  min-width: 36px;
+  padding: 5px 11px;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--kk-radius);
+  font-size: var(--kk-font-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+[data-mode=kk] .kk-iconbtn svg {
+  width: 12px;
+  height: 12px;
+}
+[data-mode=kk] .kk-iconbtn--plain {
+  background: var(--kk-surface);
+  border-color: var(--kk-border);
+  color: var(--kk-text);
+}
+[data-mode=kk] .kk-iconbtn--primary {
+  background: var(--kk-primary);
+  border-color: var(--kk-primary);
+  color: #fff;
+}
+[data-mode=kk] .kk-iconbtn--danger {
+  background: var(--kk-danger-soft);
+  border-color: var(--kk-danger-border);
+  color: var(--kk-danger);
+}
+[data-mode=kk] .kk-iconbtn[disabled] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+[data-mode=kk] .kk-check {
+  width: 14px;
+  height: 14px;
+  box-sizing: border-box;
+  margin-right: 8px;
+  flex-shrink: 0;
+  border: 1px solid var(--kk-border);
+  border-radius: var(--kk-radius);
+  background: var(--kk-surface);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+[data-mode=kk] .kk-check.is-on {
+  background: var(--kk-primary);
+  border-color: var(--kk-primary);
+}
+[data-mode=kk] .kk-check.is-on::after {
+  content: "";
+  width: 3px;
+  height: 7px;
+  border: solid #fff;
+  border-width: 0 1px 1px 0;
+  transform: rotate(45deg) translate(-1px, -1px);
+}
+[data-mode=kk] .kk-check.is-half {
+  background: var(--kk-primary);
+  border-color: var(--kk-primary);
+}
+[data-mode=kk] .kk-check.is-half::after {
+  content: "";
+  width: 6px;
+  height: 2px;
+  background: #fff;
+}
+[data-mode=kk] .kk-switch {
+  width: 40px;
+  height: 20px;
+  box-sizing: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.25);
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  cursor: pointer;
+  transition: 0.2s;
+}
+[data-mode=kk] .kk-switch.on {
+  background: var(--kk-primary);
+  border-color: var(--kk-primary);
+}
+[data-mode=kk] .kk-switch b {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  transition: 0.2s;
+}
+[data-mode=kk] .kk-switch.on b {
+  left: 21px;
+}
+[data-mode=kk] .kk-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  background: var(--kk-surface);
+}
+[data-mode=kk] .kk-main--flow {
+  display: block;
+}
+[data-mode=kk] .kk-toolbar {
+  height: 50px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 15px;
+  border-bottom: 1px solid var(--kk-line);
+}
+[data-mode=kk] .kk-tools {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+[data-mode=kk] .kk-btn {
+  height: var(--kk-control-h);
+  padding: 8px 15px;
+  box-sizing: border-box;
+  border-radius: var(--kk-radius);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--kk-font);
+  flex-shrink: 0;
+}
+[data-mode=kk] .kk-btn svg {
+  width: 14px;
+  height: 14px;
+}
+[data-mode=kk] .kk-btn--primary {
+  background: var(--kk-primary);
+  border: 1px solid var(--kk-primary);
+  color: #fff;
+}
+[data-mode=kk] .kk-btn--plain {
+  background: var(--kk-primary-soft);
+  border: 1px solid var(--kk-primary-plain-border);
+  color: var(--kk-primary);
+}
+[data-mode=kk] .kk-btn--danger {
+  background: var(--kk-danger-soft);
+  border: 1px solid var(--kk-danger-border);
+  color: var(--kk-danger);
+}
+[data-mode=kk] .kk-btn[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+[data-mode=kk] .kk-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+[data-mode=kk] .kk-search .kk-input {
+  width: 138px;
+  min-width: 0;
+}
+[data-mode=kk] .kk-body {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+}
+[data-mode=kk] .kk-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+}
+[data-mode=kk] .kk-table .kk-check {
+  margin-right: 0;
+}
+[data-mode=kk] .kk-table th {
+  height: 40px;
+  padding: 0 10px;
+  text-align: left;
+  font-size: var(--kk-font-sm);
+  font-weight: 600;
+  color: var(--kk-text-weak);
+  background: var(--kk-th-bg);
+  border-bottom: 1px solid var(--kk-line);
+  white-space: nowrap;
+}
+[data-mode=kk] .kk-table td {
+  height: 49px;
+  padding: 0 10px;
+  font-size: var(--kk-font-sm);
+  color: var(--kk-text);
+  border-bottom: 1px solid var(--kk-line);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-mode=kk] .kk-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--kk-avatar-bg);
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--kk-font-sm);
+}
+[data-mode=kk] .kk-link {
+  color: var(--kk-primary);
+  cursor: pointer;
+  margin-right: 10px;
+}
+[data-mode=kk] .kk-link:last-child {
+  margin-right: 0;
+}
+[data-mode=kk] .kk-empty {
+  flex: 1;
+  padding: 80px 0;
+  text-align: center;
+  font-size: var(--kk-font);
+  color: var(--kk-text-weak);
+  background: var(--kk-surface);
+}
+[data-mode=kk] .kk-empty td {
+  text-align: center;
+  color: var(--kk-text-placeholder);
+}
+[data-mode=kk] .kk-pager {
+  height: 50px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 15px;
+  font-size: var(--kk-font-sm);
+  color: var(--kk-text);
+}
+[data-mode=kk] .kk-pager select {
+  height: 24px;
+  padding: 0 4px;
+  border: 1px solid var(--kk-border);
+  border-radius: var(--kk-radius);
+  background: var(--kk-surface);
+  color: var(--kk-text);
+}
+[data-mode=kk] :where(i[class^=ri-], i[class*=" ri-"]) {
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-style: normal;
+}
+[data-mode=kk] .kk-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  padding: 15px;
+  flex-shrink: 0;
+}
+[data-mode=kk] .kk-stat {
+  padding: 12px 15px;
+  border: 1px solid var(--kk-border);
+  border-radius: var(--kk-radius);
+  background: var(--kk-surface);
+}
+[data-mode=kk] .kk-stat__label {
+  font-size: 12px;
+  color: var(--kk-text-weak);
+}
+[data-mode=kk] .kk-stat__value {
+  margin-top: 6px;
+  font-size: 20px;
+  line-height: 1;
+  color: var(--kk-text);
+}
+[data-mode=kk] .kk-stat__value--success {
+  color: var(--kk-success);
+}
+[data-mode=kk] .kk-stat__value--danger {
+  color: var(--kk-danger);
+}
+[data-mode=kk] .kk-stat__hint {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--kk-text-weak);
+}
+[data-mode=kk] .kk-tag {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: var(--kk-radius);
+  border: 1px solid var(--kk-border);
+  background: var(--kk-hover);
+  font-size: 12px;
+  color: var(--kk-text);
+}
+[data-mode=kk] .kk-tag--primary {
+  border-color: var(--kk-primary-plain-border);
+  background: var(--kk-primary-soft);
+  color: var(--kk-primary);
+}
+[data-mode=kk] .kk-tag--success {
+  border-color: #b3e19d;
+  background: #f0f9eb;
+  color: var(--kk-success);
+}
+[data-mode=kk] .kk-tag--danger {
+  border-color: var(--kk-danger-border);
+  background: var(--kk-danger-soft);
+  color: var(--kk-danger);
+}
+[data-mode=kk] .kk-tag--warning {
+  border-color: var(--kk-warning-border);
+  background: var(--kk-warning-soft);
+  color: var(--kk-warning);
+}
+[data-mode=kk] .kk-tag--purple {
+  border-color: #d3adf7;
+  background: #f9f0ff;
+  color: #722ed1;
+}
+[data-mode=kk] .kk-tag--gray {
+  color: var(--kk-text-weak);
+}
+[data-mode=kk] .kk-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 12px;
+}
+[data-mode=kk] .kk-ellipsis {
+  max-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-mode=kk] .kk-tools > .kk-ellipsis {
+  max-width: none;
+  min-width: 0;
+  flex: 1;
+}
+[data-mode=kk] .kk-table .kk-row--link {
+  cursor: pointer;
+}
+[data-mode=kk] .kk-table tr.is-error td {
+  color: var(--kk-danger);
+}
+[data-mode=kk] .kk-filter {
+  width: 170px;
+}
+[data-mode=kk] .kk-detail {
+  padding: 15px;
+}
+[data-mode=kk] .kk-scope {
+  flex-wrap: wrap;
+}
+[data-mode=kk] .kk-scope__field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 170px;
+}
+[data-mode=kk] .kk-scope__field .kk-label {
+  width: auto;
+  padding-right: 0;
+  font-size: var(--kk-font-sm);
+  color: var(--kk-text-weak, #666);
+}
+[data-mode=kk] .kk-textarea--mono {
+  font-family: var(--kk-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 11px;
+  line-height: 1.5;
+}
+[data-mode=kk] .kk-message {
+  display: inline-block;
+  font-size: var(--kk-font-sm);
+  line-height: 1.6;
+  color: var(--kk-text-weak, #666);
+  white-space: normal;
+  word-break: break-word;
+}
+[data-mode=kk] .kk-scope__refresh {
+  margin-left: auto;
+}
+[data-mode=kk] .kk-scope__hint {
+  font-size: var(--kk-font-sm);
+  color: var(--kk-text-weak, #909399);
+  white-space: nowrap;
+}
+[data-mode=kk] .kk-banner {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 12px;
+  padding: 10px 14px;
+  border: 1px solid var(--kk-warning, #faad14);
+  border-radius: var(--kk-radius);
+  background: var(--kk-warning-soft, #fffbe6);
+  color: var(--kk-text);
+  font-size: var(--kk-font-sm);
+}
+[data-mode=kk] .kk-banner ul {
+  margin: 0;
+  padding-left: 18px;
+  color: var(--kk-text-weak, #666);
+}
+[data-mode=kk] .kk-banner--danger {
+  border-color: var(--kk-danger);
+  background: var(--kk-danger-soft, #fff1f0);
+  color: var(--kk-danger);
+}
+[data-mode=kk] .kk-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 18px;
+  align-items: center;
+  font-size: var(--kk-font-sm);
+}
+[data-mode=kk] .kk-tip--block {
+  display: block;
+  line-height: 1.5;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-mode=kk] .kk-split {
+  display: grid;
+  grid-template-columns: minmax(280px, 340px) 1fr;
+  gap: 15px;
+  padding: 0 15px 15px;
+  align-items: start;
+}
+[data-mode=kk] .kk-card {
+  border: 1px solid var(--kk-border);
+  border-radius: var(--kk-radius);
+  background: var(--kk-surface);
+  overflow: hidden;
+}
+[data-mode=kk] .kk-card__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 12px 15px;
+  border-bottom: 1px solid var(--kk-line);
+  font-size: var(--kk-font);
+  color: var(--kk-text);
+}
+[data-mode=kk] .kk-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 15px;
+  font-size: var(--kk-font-sm);
+}
+[data-mode=kk] .kk-line {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+[data-mode=kk] .kk-perms {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+[data-mode=kk] .kk-avatar {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--kk-primary-soft);
+  color: var(--kk-primary);
+  font-size: 14px;
+}
+[data-mode=kk] .kk-hello__title,
+[data-mode=kk] .kk-page-title {
+  font-size: 16px;
+  color: var(--kk-text-strong);
+}
+[data-mode=kk] .kk-page-head {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 15px;
+  border-bottom: 1px solid var(--kk-line);
+}
+[data-mode=kk] .kk-page-head__text {
+  align-items: baseline;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+[data-mode=kk] .kk-page-sub {
+  font-size: 12px;
+  color: var(--kk-text-weak);
+}
+[data-mode=kk] .kk-table--slim td,
+[data-mode=kk] .kk-table--slim th {
+  height: 38px;
+}
+[data-mode=kk] .kk-btn.is-disabled,
+[data-mode=kk] .kk-page-btn.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+[data-mode=kk] .kk-usage-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+[data-mode=kk] .kk-field .kk-usage-list {
+  gap: 6px;
+}
+[data-mode=kk] .kk-usage {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--kk-text-weak);
+}
+[data-mode=kk] .kk-usage__label {
+  width: 12px;
+  flex-shrink: 0;
+}
+[data-mode=kk] .kk-usage__track {
+  flex: 1;
+  min-width: 56px;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--kk-hover);
+  overflow: hidden;
+}
+[data-mode=kk] .kk-usage__fill {
+  display: block;
+  height: 100%;
+  background: var(--kk-success);
+}
+[data-mode=kk] .kk-usage__fill--warn {
+  background: var(--kk-warning);
+}
+[data-mode=kk] .kk-usage__fill--danger {
+  background: var(--kk-danger);
+}
+[data-mode=kk] .kk-usage__num {
+  width: 30px;
+  text-align: right;
+  flex-shrink: 0;
+}
+[data-mode=kk] .kk-code--block {
+  display: block;
+  padding: 6px 8px;
+  background: var(--kk-hover);
+  border-radius: var(--kk-radius);
+  word-break: break-all;
+}
+[data-mode=kk] .kk-code--strong {
+  color: var(--kk-text);
+  font-weight: 600;
+}
+[data-mode=kk] .kk-dot {
+  width: 6px;
+  height: 6px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: var(--kk-danger);
+}
+[data-mode=kk] .kk-preview {
+  transition: background 0.2s ease;
+}
+[data-mode=kk] .kk-field--row {
+  display: flex;
+  gap: 8px;
+}
+[data-mode=kk] .kk-input--num {
+  width: 88px;
+  flex-shrink: 0;
+}
+[data-mode=kk] .kk-iconbtn--danger {
+  color: var(--kk-danger);
+}
+[data-mode=kk] .kk-iconbtn--danger:hover {
+  border-color: var(--kk-danger-border);
+  background: var(--kk-danger-soft);
+}
+[data-mode=kk] .kk-page-num,
+[data-mode=kk] .kk-page-btn {
+  min-width: 24px;
+  height: 24px;
+  padding: 0 6px;
+  border-radius: var(--kk-radius);
+  border: 1px solid var(--kk-border);
+  background: var(--kk-surface);
+  color: var(--kk-text);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+[data-mode=kk] .kk-page-num,
+[data-mode=kk] .kk-page-btn.is-active {
+  background: var(--kk-primary);
+  border-color: var(--kk-primary);
+  color: #fff;
+}
+[data-mode=kk] .kk-goto {
+  width: 40px;
+  height: 24px;
+  padding: 0 6px;
+  border: 1px solid var(--kk-border);
+  border-radius: var(--kk-radius);
+  text-align: center;
+  background: var(--kk-surface);
+  color: var(--kk-text);
+}
+[data-mode=kk] .kk-move {
+  width: 24px;
+  height: 24px;
+  box-sizing: border-box;
+  margin: 0 auto;
+  border: 1px solid var(--kk-move-border);
+  border-radius: var(--kk-radius);
+  background: var(--kk-move-bg);
+  color: var(--kk-text-weak);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: move;
+  touch-action: none;
+}
+[data-mode=kk] .kk-move:hover {
+  color: var(--kk-text);
+  border-color: #d3d4d6;
+}
+[data-mode=kk] .kk-move svg {
+  width: 12px;
+  height: 12px;
+}
+[data-mode=kk] .kk-col {
+  float: left;
+  width: 50%;
+  box-sizing: border-box;
+  padding: 20px;
+}
+@media (max-width: 1199px) {
+  [data-mode=kk] .kk-col {
+    width: 100%;
+  }
+}
+[data-mode=kk] .kk-item {
+  display: flex;
+  margin-bottom: 18px;
+}
+[data-mode=kk] .kk-label {
+  width: 80px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding-right: 12px;
+  font-size: var(--kk-font);
+  color: var(--kk-text);
+  line-height: var(--kk-control-h);
+}
+[data-mode=kk] .kk-field {
+  flex: 1;
+  min-width: 0;
+}
+[data-mode=kk] .kk-tip {
+  font-size: var(--kk-font-sm);
+  color: #999;
+  line-height: var(--kk-control-h);
+}
+[data-mode=kk] .kk-title {
+  margin: 0 0 30px;
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--kk-title);
+}
+[data-mode=kk] .kk-save {
+  height: var(--kk-control-h);
+  padding: 0 15px;
+  box-sizing: border-box;
+  border-radius: var(--kk-radius);
+  background: var(--kk-primary);
+  color: #fff;
+  letter-spacing: 1px;
+  display: inline-flex;
+  align-items: center;
+}
+[data-mode=kk] .kk-side-btn {
+  width: 100%;
+  height: var(--kk-control-h);
+  border-radius: var(--kk-radius);
+  background: var(--kk-primary);
+  color: #fff;
+  font-size: var(--kk-font);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+[data-mode=kk] .kk-side-btn svg {
+  width: 14px;
+  height: 14px;
+}
+[data-mode=kk] .kk-add {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--kk-primary);
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}
+[data-mode=kk] .kk-add svg {
+  width: 12px;
+  height: 12px;
+}
+[data-mode=kk] .kk-rgroup {
+  display: inline-flex;
+  height: var(--kk-control-h);
+  align-items: center;
+}
+[data-mode=kk] .kk-rbtn {
+  height: 30px;
+  box-sizing: border-box;
+  padding: 0 15px;
+  font-size: var(--kk-font-sm);
+  line-height: 12px;
+  color: var(--kk-text);
+  background: var(--kk-surface);
+  border: 1px solid var(--kk-border);
+  cursor: pointer;
+}
+[data-mode=kk] .kk-rbtn + .kk-rbtn {
+  border-left: 0;
+}
+[data-mode=kk] .kk-rbtn:first-child {
+  border-radius: var(--kk-radius) 0 0 var(--kk-radius);
+}
+[data-mode=kk] .kk-rbtn:last-child {
+  border-radius: 0 var(--kk-radius) var(--kk-radius) 0;
+}
+[data-mode=kk] .kk-rbtn:hover {
+  color: var(--kk-primary);
+}
+[data-mode=kk] .kk-rbtn.is-active {
+  background: var(--kk-primary);
+  border-color: var(--kk-primary);
+  color: #fff;
+}
+[data-mode=kk] .kk-inputgroup {
+  display: flex;
+}
+[data-mode=kk] .kk-prepend {
+  height: var(--kk-control-h);
+  box-sizing: border-box;
+  padding: 0 11px;
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--kk-font);
+  color: var(--kk-text-weak);
+  background: var(--kk-hover);
+  border: 1px solid var(--kk-border);
+  border-right: 0;
+  border-radius: var(--kk-radius) 0 0 var(--kk-radius);
+}
+[data-mode=kk] .kk-inputgroup .kk-input {
+  border-radius: 0 var(--kk-radius) var(--kk-radius) 0;
+}
+[data-mode=kk] .kk-select {
+  position: relative;
+  width: 190px;
+}
+[data-mode=kk] .kk-select .kk-input {
+  padding-right: 28px;
+}
+[data-mode=kk] .kk-select > svg {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 12px;
+  height: 12px;
+  color: #c0c4cc;
+}
+[data-mode=kk] .kk-color {
+  width: var(--kk-control-h);
+  height: var(--kk-control-h);
+  padding: 2px;
+  box-sizing: border-box;
+  border: 1px solid var(--kk-border);
+  border-radius: var(--kk-radius);
+  background: var(--kk-surface);
+  cursor: pointer;
+}
+[data-mode=kk] .kk-boxrow {
+  display: flex;
+  align-items: center;
+  height: var(--kk-control-h);
+}
+[data-mode=kk] .kk-boxline {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+[data-mode=kk] .kk-boxline + .kk-boxline {
+  margin-left: 30px;
+}
+[data-mode=kk] .kk-table--grid {
+  border: 1px solid var(--kk-line);
+  border-right: 0;
+  border-bottom: 0;
+}
+[data-mode=kk] .kk-table--grid th,
+[data-mode=kk] .kk-table--grid td {
+  height: 41px;
+  box-sizing: border-box;
+  padding: 8px 12px;
+  border-right: 1px solid var(--kk-line);
+  border-bottom: 1px solid var(--kk-line);
+}
+[data-mode=kk] .kk-table--grid td {
+  height: 49px;
+}
+[data-mode=kk] .kk-table--grid th.kk-perm-fn,
+[data-mode=kk] .kk-table--grid td.kk-perm-fn {
+  padding: 8px 0;
+  text-align: center;
+}
+[data-mode=kk] .kk-table--grid td.kk-perm-fn {
+  position: relative;
+}
+[data-mode=kk] .kk-perm-no {
+  display: inline-block;
+  line-height: 23px;
+}
+[data-mode=kk] .kk-perm-del {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid var(--kk-danger-border);
+  border-radius: 50%;
+  background: var(--kk-danger-soft);
+  color: var(--kk-danger);
+  opacity: 0;
+  pointer-events: none;
+}
+[data-mode=kk] .kk-perm-del svg {
+  width: 12px;
+  height: 12px;
+}
+[data-mode=kk] .kk-wf-header {
+  height: 60px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding: 13px 15px;
+  background: var(--kk-surface);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+[data-mode=kk] .kk-wf-head {
+  display: flex;
+  align-items: center;
+}
+[data-mode=kk] .kk-wf-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--kk-font-sm);
+  color: var(--kk-text);
+}
+[data-mode=kk] .kk-wf-back svg {
+  width: 14px;
+  height: 14px;
+}
+[data-mode=kk] .kk-wf-divider {
+  width: 1px;
+  height: 18px;
+  margin: 0 8px;
+  background: var(--kk-border);
+}
+[data-mode=kk] .kk-wf-title {
+  font-size: var(--kk-font-sm);
+  color: var(--kk-text-strong);
+}
+[data-mode=kk] .kk-wf-canvas {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: var(--kk-page-bg);
+}
+[data-mode=kk] .sc-workflow-design {
+  width: 100%;
+  font-size: 12px;
+  line-height: 1.5;
+}
+[data-mode=kk] .sc-workflow-design .box-scale {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  padding: 54.5px 0;
+  align-items: flex-start;
+  justify-content: center;
+  flex-wrap: wrap;
+  min-width: min-content;
+}
+[data-mode=kk] .sc-workflow-design .node-wrap {
+  display: inline-flex;
+  width: 100%;
+  flex-flow: column wrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 0 50px;
+  position: relative;
+  z-index: 1;
+}
+[data-mode=kk] .sc-workflow-design .node-wrap-box {
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  width: 220px;
+  min-height: 72px;
+  flex-shrink: 0;
+  background: var(--kk-surface);
+  border-radius: 4px;
+  cursor: pointer;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+}
+[data-mode=kk] .sc-workflow-design .node-wrap-box::before {
+  content: "";
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  border-style: solid;
+  border-width: 8px 6px 4px;
+  border-color: #cacaca transparent transparent;
+  background: var(--kk-page-bg);
+}
+[data-mode=kk] .sc-workflow-design .node-wrap-box.start-node::before {
+  content: none;
+}
+[data-mode=kk] .sc-workflow-design .node-wrap-box .title {
+  height: 24px;
+  line-height: 24px;
+  color: #fff;
+  padding-left: 16px;
+  padding-right: 30px;
+  border-radius: 4px 4px 0 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+[data-mode=kk] .sc-workflow-design .node-wrap-box .title .icon {
+  margin-right: 5px;
+}
+[data-mode=kk] .sc-workflow-design .node-wrap-box .title .close {
+  font-size: 15px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 10px;
+  display: none;
+}
+[data-mode=kk] .sc-workflow-design .node-wrap-box .content {
+  position: relative;
+  padding: 15px;
+}
+[data-mode=kk] .sc-workflow-design .node-wrap-box .content .placeholder {
+  color: #999;
+}
+[data-mode=kk] .sc-workflow-design .node-wrap-box:hover .close {
+  display: block;
+}
+[data-mode=kk] .sc-workflow-design .node-wrap-box--start .title {
+  background: #576a95;
+}
+[data-mode=kk] .sc-workflow-design .node-wrap-box--approver .title {
+  background: #ff943e;
+}
+[data-mode=kk] .sc-workflow-design .node-wrap-box--cc .title {
+  background: #3296fa;
+}
+[data-mode=kk] .sc-workflow-design .add-node-btn-box {
+  width: 240px;
+  display: inline-flex;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+}
+[data-mode=kk] .sc-workflow-design .add-node-btn-box::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  margin: auto;
+  width: 2px;
+  height: 100%;
+  background-color: #cacaca;
+}
+[data-mode=kk] .sc-workflow-design .add-node-btn {
+  user-select: none;
+  width: 240px;
+  padding: 20px 0 32px;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+  flex-grow: 1;
+}
+[data-mode=kk] .sc-workflow-design .add-node-btn .kk-wf-add {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  box-sizing: border-box;
+  border: 1px solid var(--kk-primary);
+  border-radius: 50%;
+  background: var(--kk-primary);
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+[data-mode=kk] .sc-workflow-design .add-node-btn .kk-wf-add:hover {
+  background: var(--kk-primary-light);
+  border-color: var(--kk-primary-light);
+}
+[data-mode=kk] .sc-workflow-design .add-node-btn .kk-wf-add svg {
+  width: 14px;
+  height: 14px;
+}
+[data-mode=kk] .sc-workflow-design .add-branch {
+  justify-content: center;
+  padding: 0 10px;
+  position: absolute;
+  top: -16px;
+  left: 50%;
+  transform: translateX(-50%);
+  transform-origin: center center;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  box-sizing: border-box;
+  border: 1px solid #b3e19d;
+  border-radius: 14px;
+  background: #f0f9eb;
+  color: #67c23a;
+  font-size: var(--kk-font-sm);
+}
+[data-mode=kk] .sc-workflow-design .branch-wrap {
+  display: inline-flex;
+  width: 100%;
+}
+[data-mode=kk] .sc-workflow-design .branch-box-wrap {
+  display: flex;
+  flex-flow: column wrap;
+  align-items: center;
+  min-height: 270px;
+  width: 100%;
+  flex-shrink: 0;
+}
+[data-mode=kk] .sc-workflow-design .col-box {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  background: var(--kk-page-bg);
+}
+[data-mode=kk] .sc-workflow-design .branch-box {
+  display: flex;
+  overflow: visible;
+  min-height: 180px;
+  height: auto;
+  border-bottom: 2px solid #cccccc;
+  border-top: 2px solid #cccccc;
+  position: relative;
+  margin-top: 15px;
+}
+[data-mode=kk] .sc-workflow-design .branch-box .col-box::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  margin: auto;
+  width: 2px;
+  height: 100%;
+  background-color: #cacaca;
+}
+[data-mode=kk] .sc-workflow-design .condition-node {
+  display: inline-flex;
+  flex-direction: column;
+  min-height: 220px;
+}
+[data-mode=kk] .sc-workflow-design .condition-node-box {
+  padding-top: 30px;
+  padding-right: 50px;
+  padding-left: 50px;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+}
+[data-mode=kk] .sc-workflow-design .condition-node-box::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 2px;
+  height: 100%;
+  background-color: #cacaca;
+}
+[data-mode=kk] .sc-workflow-design .auto-judge {
+  position: relative;
+  width: 220px;
+  min-height: 72px;
+  background: var(--kk-surface);
+  border-radius: 4px;
+  padding: 15px;
+  cursor: pointer;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+}
+[data-mode=kk] .sc-workflow-design .auto-judge::before {
+  content: "";
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  border-style: solid;
+  border-width: 8px 6px 4px;
+  border-color: #cacaca transparent transparent;
+  background: var(--kk-page-bg);
+}
+[data-mode=kk] .sc-workflow-design .auto-judge .title {
+  line-height: 16px;
+}
+[data-mode=kk] .sc-workflow-design .auto-judge .title .node-title {
+  color: #15bc83;
+}
+[data-mode=kk] .sc-workflow-design .auto-judge .title .close {
+  font-size: 15px;
+  display: none;
+}
+[data-mode=kk] .sc-workflow-design .auto-judge .title .close,
+[data-mode=kk] .sc-workflow-design .auto-judge .title .priority-title {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  color: #999;
+}
+[data-mode=kk] .sc-workflow-design .auto-judge .content {
+  position: relative;
+  padding-top: 15px;
+}
+[data-mode=kk] .sc-workflow-design .auto-judge .content .placeholder,
+[data-mode=kk] .sc-workflow-design .auto-judge .title .placeholder {
+  color: #999;
+}
+[data-mode=kk] .sc-workflow-design .auto-judge:hover .close {
+  display: block;
+}
+[data-mode=kk] .sc-workflow-design .auto-judge:hover .priority-title {
+  display: none;
+}
+[data-mode=kk] .sc-workflow-design .top-left-cover-line,
+[data-mode=kk] .sc-workflow-design .top-right-cover-line {
+  position: absolute;
+  height: 3px;
+  width: 50%;
+  background-color: var(--kk-page-bg);
+  top: -2px;
+}
+[data-mode=kk] .sc-workflow-design .bottom-left-cover-line,
+[data-mode=kk] .sc-workflow-design .bottom-right-cover-line {
+  position: absolute;
+  height: 3px;
+  width: 50%;
+  background-color: var(--kk-page-bg);
+  bottom: -2px;
+}
+[data-mode=kk] .sc-workflow-design .top-left-cover-line {
+  left: -1px;
+}
+[data-mode=kk] .sc-workflow-design .top-right-cover-line {
+  right: -1px;
+}
+[data-mode=kk] .sc-workflow-design .bottom-left-cover-line {
+  left: -1px;
+}
+[data-mode=kk] .sc-workflow-design .bottom-right-cover-line {
+  right: -1px;
+}
+[data-mode=kk] .sc-workflow-design .end-node {
+  border-radius: 50%;
+  font-size: 14px;
+  color: rgba(25, 31, 37, 0.4);
+  text-align: left;
+}
+[data-mode=kk] .sc-workflow-design .end-node-circle {
+  width: 10px;
+  height: 10px;
+  margin: auto;
+  border-radius: 50%;
+  background: #dbdcdc;
+}
+[data-mode=kk] .sc-workflow-design .end-node-text {
+  margin-top: 5px;
+  text-align: center;
+}
+[data-mode=kk] .sc-workflow-design .auto-judge:hover .sort-left,
+[data-mode=kk] .sc-workflow-design .auto-judge:hover .sort-right {
+  display: flex;
+}
+[data-mode=kk] .sc-workflow-design .auto-judge .sort-left,
+[data-mode=kk] .sc-workflow-design .auto-judge .sort-right {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  display: none;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+[data-mode=kk] .sc-workflow-design .auto-judge .sort-left {
+  left: 0;
+}
+[data-mode=kk] .sc-workflow-design .auto-judge .sort-right {
+  right: 0;
+}
+[data-mode=kk] .sc-workflow-design .auto-judge .sort-left:hover,
+[data-mode=kk] .sc-workflow-design .auto-judge .sort-right:hover {
+  background: var(--kk-hover);
+}
+[data-mode=kk] .sc-workflow-design .auto-judge .sort-left svg,
+[data-mode=kk] .sc-workflow-design .auto-judge .sort-right svg {
+  width: 12px;
+  height: 12px;
+  color: var(--kk-text-weak);
+}
+[data-mode=kk] .sc-workflow-design .auto-judge::after {
+  pointer-events: none;
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border-radius: 4px;
+  transition: 0.1s;
+}
+[data-mode=kk] .sc-workflow-design .auto-judge:hover::after {
+  border: 1px solid #3296fa;
+  box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
+}
+[data-mode=kk] .sc-workflow-design .node-wrap-box::after {
+  pointer-events: none;
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border-radius: 4px;
+  transition: 0.1s;
+}
+[data-mode=kk] .sc-workflow-design .node-wrap-box:hover::after {
+  border: 1px solid #3296fa;
+  box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
+}
+[data-mode=kk] .sc-workflow-design .close svg {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
+[data-mode=kk] .sc-workflow-design .close {
+  color: inherit;
+}
+[data-mode=kk] .add-node-popover {
+  position: fixed;
+  z-index: 2000;
+  width: 270px;
+  box-sizing: border-box;
+  background: var(--kk-surface);
+  border: 1px solid var(--kk-border-weak);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
+}
+[data-mode=kk] .add-node-popover-body {
+  padding: 12px;
+}
+[data-mode=kk] .add-node-popover-body ul {
+  display: flex;
+  justify-content: center;
+}
+[data-mode=kk] .add-node-popover-body li {
+  display: inline-block;
+  flex: 0 0 80px;
+  width: 80px;
+  text-align: center;
+  padding: 10px 0;
+}
+[data-mode=kk] .add-node-popover-body li i {
+  border: 1px solid var(--kk-border-weak);
+  width: 40px;
+  height: 40px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 38px;
+  font-size: 18px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+[data-mode=kk] .add-node-popover-body li i svg {
+  width: 18px;
+  height: 18px;
+}
+[data-mode=kk] .add-node-popover-body li i:hover {
+  border: 1px solid #3296fa;
+  background: #3296fa;
+  color: #fff !important;
+}
+[data-mode=kk] .add-node-popover-body li i.kk-wf-i-approver {
+  color: #ff943e;
+}
+[data-mode=kk] .add-node-popover-body li i.kk-wf-i-cc {
+  color: #3296fa;
+}
+[data-mode=kk] .add-node-popover-body li i.kk-wf-i-branch {
+  color: #15bc83;
+}
+[data-mode=kk] .add-node-popover-body li p {
+  font-size: 12px;
+  margin-top: 5px;
+  color: var(--kk-text);
+}
+[data-mode=kk] .add-node-popover-body li i:hover svg {
+  color: #fff;
+}
+[data-mode=kk] .kk-wf-drawer .kk-label {
+  width: 70px;
+}
+[data-mode=kk] .kk-wf-drawer-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--kk-font);
+  color: var(--kk-text-strong);
+}
+[data-mode=kk] .kk-wf-drawer-title .kk-input {
+  width: 220px;
+  font-size: var(--kk-font);
+}
+[data-mode=kk] .kk-wf-pencil {
+  display: inline-flex;
+  color: var(--kk-primary);
+  cursor: pointer;
+}
+[data-mode=kk] .kk-wf-pencil svg {
+  width: 14px;
+  height: 14px;
+}
+[data-mode=kk] .kk-btn--stroke {
+  background: var(--kk-surface);
+  border: 1px solid var(--kk-border);
+  color: var(--kk-text);
+}
+[data-mode=kk] .kk-radio-group {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  height: var(--kk-control-h);
+}
+[data-mode=kk] .kk-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--kk-font);
+  color: var(--kk-text);
+  cursor: pointer;
+}
+[data-mode=kk] .kk-radio__dot {
+  position: relative;
+  width: 14px;
+  height: 14px;
+  box-sizing: border-box;
+  border: 1px solid var(--kk-border);
+  border-radius: 50%;
+  background: var(--kk-surface);
+}
+[data-mode=kk] .kk-radio.is-on .kk-radio__dot {
+  border-color: var(--kk-primary);
+}
+[data-mode=kk] .kk-radio.is-on .kk-radio__dot::after {
+  content: "";
+  position: absolute;
+  inset: 3px;
+  border-radius: 50%;
+  background: var(--kk-primary);
+}
+[data-mode=kk] .kk-divider {
+  height: 1px;
+  margin: 16px 0;
+  background: var(--kk-line);
+}
+[data-mode=kk] .kk-wf-conds th {
+  font-size: var(--kk-font-sm);
+  font-weight: 400;
+  color: var(--kk-text-weak);
+}
+[data-mode=kk] .kk-wf-conds td {
+  padding: 6px 8px;
+}
+[data-mode=kk] .kk-wf-conds .kk-input {
+  height: 28px;
+}
+[data-mode=kk] .kk-wf-remove {
+  display: inline-flex;
+  color: var(--kk-danger);
+  cursor: pointer;
+}
+[data-mode=kk] .kk-wf-remove svg {
+  width: 14px;
+  height: 14px;
+}
+[data-mode=kk] .kk-wf-addrow {
+  margin-top: 12px;
+  border-radius: 14px;
+}
+[data-mode=kk] .kk-wf-drawer-foot {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+}
+[data-mode=kk] .kk-wf-drawer-hint {
+  font-size: var(--kk-font-sm);
+  color: var(--kk-text-weak);
+  line-height: 1.6;
+}
+[data-mode=kk] .kk-wf-pickbtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: var(--kk-control-h);
+  padding: 0 12px;
+  box-sizing: border-box;
+  border: 1px dashed var(--kk-border);
+  border-radius: var(--kk-radius);
+  background: var(--kk-surface);
+  color: var(--kk-primary);
+  font-size: var(--kk-font);
+}
+[data-mode=kk] .kk-wf-pickbtn:hover {
+  border-color: var(--kk-primary);
+  background: var(--kk-primary-soft);
+}
+[data-mode=kk] .kk-wf-pickbtn svg {
+  width: 12px;
+  height: 12px;
+}
+[data-mode=kk] .kk-wf-pick {
+  display: flex;
+  align-items: stretch;
+  gap: 6px;
+  height: 300px;
+}
+[data-mode=kk] .kk-wf-pick__pane {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--kk-border);
+  border-radius: var(--kk-radius);
+  overflow: hidden;
+}
+[data-mode=kk] .kk-wf-pick__title {
+  flex-shrink: 0;
+  height: 30px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  background: var(--kk-hover);
+  font-size: var(--kk-font-sm);
+  color: var(--kk-text-weak);
+}
+[data-mode=kk] .kk-wf-pick__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 4px 0;
+}
+[data-mode=kk] .kk-wf-pick__body .kk-node {
+  height: 30px;
+  font-size: var(--kk-font-sm);
+}
+[data-mode=kk] .kk-wf-pick__arrow {
+  display: flex;
+  align-items: center;
+  color: var(--kk-text-weak);
+}
+[data-mode=kk] .kk-wf-pick__arrow svg {
+  width: 14px;
+  height: 14px;
+}
+[data-mode=kk] .kk-wf-pick__item {
+  display: flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 8px;
+  font-size: var(--kk-font-sm);
+  color: var(--kk-text);
+}
+[data-mode=kk] .kk-wf-pick__item .kk-node-label {
+  flex: 1;
+}
+[data-mode=kk] .kk-wf-pick__remove {
+  display: inline-flex;
+  color: var(--kk-danger);
+  cursor: pointer;
+}
+[data-mode=kk] .kk-wf-pick__remove svg {
+  width: 12px;
+  height: 12px;
+}
+[data-mode=kk] .kk-wf-pick--members .kk-wf-pick__pane--nav {
+  flex: 0 0 130px;
+}
+[data-mode=kk] .kk-wf-pick__search {
+  height: 26px;
+  padding: 0 8px;
+  font-size: var(--kk-font-sm);
+}
+[data-mode=kk] .kk-wf-pick__pane .kk-node {
+  height: 30px;
+  font-size: var(--kk-font-sm);
+}
+[data-mode=kk] .kk-wf-members {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+[data-mode=kk] .kk-wf-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 26px;
+  padding: 0 4px 0 8px;
+  box-sizing: border-box;
+  border: 1px solid var(--kk-border);
+  border-radius: var(--kk-radius);
+  background: var(--kk-hover);
+  font-size: var(--kk-font-sm);
+  color: var(--kk-text);
+}
+[data-mode=kk] .kk-wf-chip i {
+  display: inline-flex;
+  color: var(--kk-text-weak);
+  cursor: pointer;
+}
+[data-mode=kk] .kk-wf-chip i:hover {
+  color: var(--kk-danger);
+}
+[data-mode=kk] .kk-wf-chip svg {
+  width: 12px;
+  height: 12px;
+}
+[data-mode=kk] .kk-wf-mtype {
+  width: 160px;
+}
+[data-mode=kk] .kk-boxtext {
+  margin-left: 6px;
+  font-size: var(--kk-font);
+  color: var(--kk-text);
+}
+[data-mode=kk] .kk-radio-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+[data-mode=kk] .kk-radio-col .kk-radio {
+  font-size: var(--kk-font-sm);
+}
+[data-mode=kk] .kk-wf-json {
+  margin: 0;
+  max-height: 320px;
+  overflow: auto;
+  font-size: var(--kk-font-sm);
+  line-height: 1.6;
+  color: var(--kk-text);
+}
+[data-mode=kk] .klun-cascader {
+  min-width: 0;
+  width: 100%;
+  --_h: var(--kk-control-h);
+  --_px: 11px;
+  --_radius: var(--kk-radius);
+}
+[data-mode=kk] .klun-cascader__column {
+  min-width: 108px;
+}
+[data-mode=kk] .klun-cascader__option {
+  padding: 0 8px;
+}
+[data-mode=kk] .klun-button {
+  height: var(--kk-control-h);
+  min-height: var(--kk-control-h);
+  padding: 0 15px;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--kk-radius);
+  font-size: var(--kk-font);
+  gap: 6px;
+}
+[data-mode=kk] .klun-button.klun-button--primary {
+  background: var(--kk-primary);
+  border-color: var(--kk-primary);
+  color: #fff;
+}
+[data-mode=kk] .klun-button.klun-button--primary:hover {
+  background: var(--kk-primary-light);
+  border-color: var(--kk-primary-light);
+  color: #fff;
+}
+[data-mode=kk] .klun-button.klun-button--neutral,
+[data-mode=kk] .klun-button.klun-button--stroke {
+  background: var(--kk-surface);
+  border-color: var(--kk-border);
+  color: var(--kk-text);
+}
+[data-mode=kk] .klun-button.klun-button--neutral:hover,
+[data-mode=kk] .klun-button.klun-button--stroke:hover {
+  background: var(--kk-primary-soft);
+  border-color: var(--kk-primary-plain-border);
+  color: var(--kk-primary);
+}
+[data-mode=kk] .klun-button.klun-button--error {
+  background: var(--kk-danger-soft);
+  border-color: var(--kk-danger-border);
+  color: var(--kk-danger);
+}
+[data-mode=kk] .klun-button.klun-button--error:hover {
+  background: var(--kk-danger-soft);
+  border-color: var(--kk-danger);
+  color: var(--kk-danger);
+}
+[data-mode=kk] .klun-button[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+[data-mode=kk] .klun-modal__dialog {
+  border-radius: var(--kk-radius);
+}
+[data-mode=kk] .klun-modal__header {
+  padding: 16px 16px 16px;
+}
+[data-mode=kk] .klun-modal__body {
+  padding: 0 16px;
+}
+[data-mode=kk] .klun-modal__footer {
+  padding: 16px 16px 16px;
+  border-top: 0;
+  gap: 10px;
+}
+[data-mode=kk] .kk-table--grid tbody tr:hover .kk-perm-no,
+[data-mode=kk] .kk-table--grid tbody tr:focus-within .kk-perm-no {
+  opacity: 0;
+}
+[data-mode=kk] .kk-table--grid tbody tr:hover .kk-perm-del,
+[data-mode=kk] .kk-table--grid tbody tr:focus-within .kk-perm-del,
+[data-mode=kk] .kk-perm-del:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+:where([data-mode=kk]) .scui,
+.scui:where([data-mode=kk]) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "PingFang SC",
+    "Hiragino Sans GB",
+    "Microsoft YaHei",
+    sans-serif;
+  font-size: 14px;
+  color: var(--scui-text);
+  background: var(--scui-main-bg);
+}
+:where([data-mode=kk]) .scui *,
+:where([data-mode=kk]) .scui *::before,
+:where([data-mode=kk]) .scui *::after,
+.scui:where([data-mode=kk]) *,
+.scui:where([data-mode=kk]) *::before,
+.scui:where([data-mode=kk]) *::after {
+  box-sizing: border-box;
+}
+:where([data-mode=kk] .scui, .scui:where([data-mode=kk])) :where(ul) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-mode=kk] .scui, .scui:where([data-mode=kk])) :where(p) {
+  margin: 0;
+}
+:where([data-mode=kk] .scui, .scui:where([data-mode=kk])) :where(a) {
+  color: inherit;
+  text-decoration: none;
+}
+:where([data-mode=kk] .scui, .scui:where([data-mode=kk])) :where(button) {
+  font: inherit;
+  color: inherit;
+  border: 0;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+}
+:where([data-mode=kk]) .scui-wrapper {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+:where([data-mode=kk]) .scui-rail {
+  width: 65px;
+  flex-shrink: 0;
+  background: var(--scui-rail-bg);
+  display: flex;
+  flex-direction: column;
+}
+:where([data-mode=kk]) .scui-rail-top {
+  height: 49px;
+  flex-shrink: 0;
+}
+:where([data-mode=kk]) .scui-rail-top a {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+:where([data-mode=kk]) .scui-logo {
+  width: 30px;
+  height: 30px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+:where([data-mode=kk]) .scui-logo svg {
+  width: 30px;
+  height: 30px;
+}
+:where([data-mode=kk]) .scui-rail-scroll {
+  overflow: hidden auto;
+  flex: 1;
+}
+:where([data-mode=kk]) .scui-rail li {
+  cursor: pointer;
+  width: 65px;
+  height: 65px;
+  color: #fff;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+:where([data-mode=kk]) .scui-rail li p {
+  margin-top: 5px;
+  font-size: 12px;
+}
+:where([data-mode=kk]) .scui-rail li :is(i, svg) {
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+:where([data-mode=kk]) .scui-rail li:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+:where([data-mode=kk]) .scui-rail li.active {
+  background: var(--scui-primary);
+}
+:where([data-mode=kk]) .scui-rail-scroll::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.4);
+  border-radius: var(--kk-radius);
+}
+:where([data-mode=kk]) .scui-rail-scroll::-webkit-scrollbar {
+  width: 4px;
+}
+:where([data-mode=kk]) .scui-panel {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 210px;
+  background: var(--scui-panel-bg);
+  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+  border-right: 1px solid var(--scui-panel-border);
+  transition: width 0.3s;
+}
+:where([data-mode=kk]) .scui-panel.is-collapse {
+  width: 65px;
+}
+:where([data-mode=kk]) .scui-panel-top {
+  border-bottom: 1px solid var(--scui-line);
+  height: 50px;
+  line-height: 50px;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+:where([data-mode=kk]) .scui-panel-top h2 {
+  margin: 0;
+  padding: 0 20px;
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--scui-panel-title);
+  white-space: nowrap;
+}
+:where([data-mode=kk]) .scui-panel.is-collapse .scui-panel-top h2 {
+  visibility: hidden;
+}
+:where([data-mode=kk]) .scui-panel-scroll {
+  overflow: hidden auto;
+  flex: 1;
+}
+:where([data-mode=kk]) .scui-menu-item {
+  height: 56px;
+  padding: 0 20px;
+  line-height: 56px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: var(--scui-text);
+  white-space: nowrap;
+  overflow: hidden;
+}
+:where([data-mode=kk]) .scui-menu-item :is(i, svg) {
+  font-size: 18px;
+  width: 24px;
+  height: 18px;
+  line-height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-style: normal;
+  margin-right: 5px;
+  flex-shrink: 0;
+}
+:where([data-mode=kk]) .scui-menu-item:hover {
+  background: var(--scui-hover);
+}
+:where([data-mode=kk]) .scui-menu-item.active {
+  color: var(--scui-primary);
+  background: var(--scui-hover);
+}
+:where([data-mode=kk]) .scui-menu-item .menu-tag {
+  margin-left: 5px;
+  background: #f56c6c;
+  color: #fff;
+  font-size: 12px;
+  line-height: 18px;
+  height: 18px;
+  padding: 0 6px;
+  border-radius: var(--kk-radius);
+}
+:where([data-mode=kk]) .scui-submenu-title {
+  position: relative;
+  padding-right: 44px;
+}
+:where([data-mode=kk]) .scui-menu-item .scui-submenu-arrow {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  margin-top: -6px;
+  color: var(--scui-text-weak);
+  transition: transform 0.2s;
+}
+:where([data-mode=kk]) .scui-submenu-title.is-open .scui-submenu-arrow {
+  transform: rotate(180deg);
+}
+:where([data-mode=kk]) .scui-menu-child {
+  height: 50px;
+  line-height: 50px;
+  padding: 0 20px 0 40px;
+  font-size: 14px;
+}
+:where([data-mode=kk]) .scui-panel.is-collapse .scui-menu-item {
+  justify-content: center;
+  padding: 0;
+}
+:where([data-mode=kk]) .scui-panel.is-collapse .scui-menu-label,
+:where([data-mode=kk]) .scui-panel.is-collapse .menu-tag {
+  display: none;
+}
+:where([data-mode=kk]) .scui-panel-bottom {
+  border-top: 1px solid var(--scui-line);
+  height: 51px;
+  flex-shrink: 0;
+  cursor: pointer;
+  color: var(--scui-text-sub);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+:where([data-mode=kk]) .scui-panel-bottom i {
+  font-size: 16px;
+}
+:where([data-mode=kk]) .scui-panel-bottom:hover {
+  color: var(--scui-primary);
+}
+:where([data-mode=kk]) .scui-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+:where([data-mode=kk]) .scui-topbar {
+  height: 50px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--scui-line);
+  background: var(--scui-topbar-bg);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  display: flex;
+  justify-content: space-between;
+}
+:where([data-mode=kk]) .scui-topbar-left {
+  display: flex;
+  align-items: center;
+  padding-left: 15px;
+  min-width: 0;
+}
+:where([data-mode=kk]) .scui-crumbs {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+:where([data-mode=kk]) .scui-crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--scui-text-sub);
+  white-space: nowrap;
+}
+:where([data-mode=kk]) .scui-crumb.is-link:hover {
+  color: var(--scui-primary);
+  cursor: pointer;
+}
+:where([data-mode=kk]) .scui-crumb i {
+  font-size: 14px;
+}
+:where([data-mode=kk]) .scui-crumb-sep {
+  margin: 0 9px;
+  color: var(--scui-crumb-sep);
+  font-weight: 700;
+}
+:where([data-mode=kk]) .scui-topbar-right {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+:where([data-mode=kk]) .scui-panel-item {
+  position: relative;
+  height: 49px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+}
+:where([data-mode=kk]) .scui-panel-item:hover {
+  background: var(--scui-fill-hover);
+}
+:where([data-mode=kk]) .scui-panel-item sup {
+  position: absolute;
+  top: 6px;
+  right: 1px;
+  background: #f56c6c;
+  color: #fff;
+  font-size: 12px;
+  line-height: 18px;
+  height: 18px;
+  padding: 0 6px;
+  border-radius: var(--kk-radius);
+  border: 1px solid var(--scui-topbar-bg);
+}
+:where([data-mode=kk]) .scui-user {
+  height: 49px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  color: var(--scui-text-sub);
+}
+:where([data-mode=kk]) .scui-user:hover {
+  background: var(--scui-fill-hover);
+}
+:where([data-mode=kk]) .scui-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: #c0c4cc;
+  color: #fff;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+:where([data-mode=kk]) .scui-user-name {
+  margin-left: 5px;
+}
+:where([data-mode=kk]) .scui-user i {
+  margin-left: 5px;
+  font-size: 14px;
+}
+:where([data-mode=kk]) .scui-tags {
+  height: 35px;
+  flex-shrink: 0;
+  background: var(--scui-topbar-bg);
+  border-bottom: 1px solid var(--scui-line2);
+}
+:where([data-mode=kk]) .scui-tags ul {
+  display: flex;
+  overflow: hidden;
+}
+:where([data-mode=kk]) .scui-tags li {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  height: 34px;
+  position: relative;
+  flex-shrink: 0;
+}
+:where([data-mode=kk]) .scui-tags li::after {
+  content: " ";
+  width: 1px;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  background-image: linear-gradient(var(--scui-topbar-bg), var(--scui-line2));
+}
+:where([data-mode=kk]) .scui-tags li:hover {
+  background-color: var(--scui-hover);
+}
+:where([data-mode=kk]) .scui-tags li.active {
+  background-color: var(--scui-primary);
+}
+:where([data-mode=kk]) .scui-tags li a {
+  padding: 0 10px;
+  width: 100%;
+  height: 100%;
+  color: var(--scui-text-weak);
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
+:where([data-mode=kk]) .scui-tags li.active a {
+  color: #fff;
+}
+:where([data-mode=kk]) .scui-tags li > i {
+  margin: 0 10px 0 0;
+  border-radius: var(--kk-radius);
+  width: 18px;
+  height: 18px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+:where([data-mode=kk]) .scui-tags li > i:hover {
+  background: rgba(0, 0, 0, 0.2);
+  color: #fff;
+}
+:where([data-mode=kk]) .scui-tags li.active > i {
+  color: #fff;
+}
+:where([data-mode=kk]) .scui-main {
+  overflow: auto;
+  background-color: var(--scui-main-bg);
+  flex: 1;
+  min-height: 0;
+}
+:where([data-mode=kk]) .scui-tab-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 998;
+}
+:where([data-mode=kk]) .scui-tab-menu {
+  position: fixed;
+  z-index: 999;
+  min-width: 168px;
+  padding: 5px 0;
+  background: var(--scui-topbar-bg);
+  border: 1px solid var(--scui-line-strong);
+  border-radius: var(--kk-radius);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
+  font-size: 12px;
+  color: var(--scui-text);
+}
+:where([data-mode=kk]) .scui-tab-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 30px;
+  padding: 0 12px;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+:where([data-mode=kk]) .scui-tab-menu__item i {
+  font-size: 14px;
+  color: var(--scui-text-weak);
+}
+:where([data-mode=kk]) .scui-tab-menu__item:hover {
+  background: var(--scui-hover);
+  color: var(--scui-primary);
+}
+:where([data-mode=kk]) .scui-tab-menu__item:hover i {
+  color: var(--scui-primary);
+}
+:where([data-mode=kk]) .scui-tab-menu__item.is-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+:where([data-mode=kk]).scui.is-max .scui-rail,
+:where([data-mode=kk]).scui.is-max .scui-panel {
+  display: none;
+}
+:where([data-mode=kk]) .scui-gear {
+  position: fixed;
+  right: 0;
+  bottom: 100px;
+  z-index: 100;
+  width: 40px;
+  height: 40px;
+  color: #fff;
+  font-size: 18px;
+  background: var(--scui-primary);
+  border-radius: var(--kk-radius) 0 0 var(--kk-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+:where([data-mode=kk]) .scui-gear:hover {
+  filter: brightness(1.06);
+}
+:where([data-mode=kk]) .scui-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: flex-end;
+}
+:where([data-mode=kk]) .scui-drawer {
+  width: 300px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--scui-topbar-bg);
+  box-shadow: -6px 0 16px rgba(0, 0, 0, 0.08);
+}
+:where([data-mode=kk]) .scui-drawer-head {
+  padding: 20px 20px 12px;
+  font-size: 16px;
+  color: var(--scui-text);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+:where([data-mode=kk]) .scui-drawer-head i {
+  font-size: 16px;
+  color: var(--scui-text-weak);
+}
+:where([data-mode=kk]) .scui-drawer-body {
+  flex: 1;
+  overflow: auto;
+  padding: 8px 20px 20px;
+}
+:where([data-mode=kk]) .scui-field {
+  margin-bottom: 22px;
+}
+:where([data-mode=kk]) .scui-field-title {
+  display: block;
+  font-size: 12px;
+  color: var(--scui-text-weak);
+  margin-bottom: 10px;
+}
+:where([data-mode=kk]) .scui-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+:where([data-mode=kk]) .scui-switch {
+  position: relative;
+  width: 40px;
+  height: 20px;
+  border-radius: 10px;
+  cursor: pointer;
+  flex-shrink: 0;
+  background: var(--scui-switch-off);
+  border: 1px solid var(--scui-switch-off);
+  transition: 0.2s;
+}
+:where([data-mode=kk]) .scui-switch i {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  transition: 0.2s;
+}
+:where([data-mode=kk]) .scui-switch.on {
+  background: var(--scui-primary);
+  border-color: var(--scui-primary);
+}
+:where([data-mode=kk]) .scui-switch.on i {
+  left: 21px;
+}
+:where([data-mode=kk]) .scui-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+:where([data-mode=kk]) .scui-swatch {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--kk-radius);
+  cursor: pointer;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+}
+:where([data-mode=kk]) .scui-swatch.on {
+  outline: 2px solid var(--scui-primary);
+  outline-offset: 1px;
+}
+:where([data-mode=kk]) .scui-select {
+  width: 100%;
+  height: 32px;
+  padding: 0 8px;
+  border-radius: var(--kk-radius);
+  border: 1px solid var(--scui-line2);
+  background: var(--scui-topbar-bg);
+  color: var(--scui-text);
+  font: inherit;
+  font-size: 13px;
+}
+:where([data-mode=kk]) .scui-drawer-foot {
+  padding: 12px 20px;
+  border-top: 1px solid var(--scui-line);
+  display: flex;
+  justify-content: flex-end;
+}
+:where([data-mode=kk]) .scui-btn {
+  border: 1px solid var(--scui-line2);
+  border-radius: var(--kk-radius);
+  padding: 8px 15px;
+  font-size: 12px;
+}
+:where([data-mode=kk]) .scui-btn:hover {
+  color: var(--scui-primary);
+  border-color: var(--scui-primary);
+}
+:where([data-mode=kk]) .scui,
+.scui:where([data-mode=kk]) {
+  --scui-primary: #409eff;
+  --scui-rail-bg: #222b45;
+  --scui-panel-bg: #fff;
+  --scui-panel-border: #e6e6e6;
+  --scui-line: #ebeef5;
+  --scui-line2: #e6e6e6;
+  --scui-topbar-bg: #fff;
+  --scui-main-bg: #f6f8f9;
+  --scui-text: #303133;
+  --scui-text-sub: #606266;
+  --scui-text-weak: #999;
+  --scui-panel-title: #3c4a54;
+  --scui-crumb-sep: #c0c4cc;
+  --scui-hover: #ecf5ff;
+  --scui-fill-hover: #f5f7fa;
+  --scui-switch-off: rgba(0, 0, 0, 0.25);
+}
+:where([data-mode=kk]) .scui.is-dark,
+.scui.is-dark:where([data-mode=kk]) {
+  --scui-rail-bg: #141414;
+  --scui-panel-bg: #1d1e1f;
+  --scui-panel-border: #414243;
+  --scui-line: #414243;
+  --scui-line2: #414243;
+  --scui-topbar-bg: #1d1e1f;
+  --scui-main-bg: #141414;
+  --scui-text: #d0d0d0;
+  --scui-text-sub: #cfd3da;
+  --scui-text-weak: #999;
+  --scui-panel-title: #d0d0d0;
+  --scui-crumb-sep: #6c6e72;
+  --scui-hover: #0c1f32;
+  --scui-fill-hover: #262727;
+  --scui-switch-off: #4c4d4f;
+}
+
 /* src/styles/tokens/typography.css */
 :root {
   --klun-font-sans:
@@ -1895,6 +4526,154 @@ body {
   font-size: 20px;
 }
 
+/* src/components/buttons/Toggle.css */
+.klun-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  border: 0;
+  background: transparent;
+  color: var(--klun-text-sub-600);
+  font: var(--klun-text-label-sm);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  transition:
+    background-color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease),
+    color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease),
+    box-shadow var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease);
+}
+.klun-toggle--small {
+  height: 28px;
+  min-width: 28px;
+  padding: 0 6px;
+  border-radius: var(--klun-radius-md);
+  font: var(--klun-text-label-xs);
+}
+.klun-toggle--medium {
+  height: 32px;
+  min-width: 32px;
+  padding: 0 8px;
+  border-radius: var(--klun-radius-md);
+}
+.klun-toggle--large {
+  height: 36px;
+  min-width: 36px;
+  padding: 0 10px;
+  border-radius: var(--klun-radius-lg);
+}
+.klun-toggle--outline {
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+}
+.klun-toggle:hover:not(:disabled) {
+  background: var(--klun-bg-weak-50);
+  color: var(--klun-text-strong-950);
+}
+.klun-toggle[aria-pressed=true] {
+  background: var(--klun-bg-soft-200);
+  color: var(--klun-text-strong-950);
+}
+.klun-toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--klun-shadow-button-important-focus);
+}
+.klun-toggle:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.klun-toggle i {
+  font-size: 16px;
+  line-height: 1;
+}
+
+/* src/components/data-display/ActivityHeatmap.css */
+.klun-activity-heatmap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.klun-activity-heatmap__scroll {
+  max-width: 100%;
+  overflow-x: auto;
+}
+.klun-activity-heatmap__svg {
+  display: block;
+}
+.klun-activity-heatmap__label {
+  fill: var(--klun-text-sub-600);
+}
+.klun-activity-heatmap__cell {
+  transition: opacity var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease);
+}
+.klun-activity-heatmap__cell:hover {
+  opacity: 0.75;
+}
+.klun-activity-heatmap__legend {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font: var(--klun-text-label-xs);
+  color: var(--klun-text-sub-600);
+}
+.klun-activity-heatmap__swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+}
+
+/* src/components/data-display/ActorAvatar.css */
+.klun-actor-avatar {
+  --_px: 24px;
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--_px);
+  height: var(--_px);
+  overflow: hidden;
+  border-radius: var(--klun-radius-pill);
+  font-weight: var(--klun-font-weight-medium, 500);
+  font-size: calc(var(--_px) * 0.45);
+  background: var(--klun-bg-weak-50);
+  color: var(--klun-text-sub-600);
+  user-select: none;
+}
+.klun-actor-avatar--20 {
+  --_px: 20px;
+}
+.klun-actor-avatar--24 {
+  --_px: 24px;
+}
+.klun-actor-avatar--32 {
+  --_px: 32px;
+}
+.klun-actor-avatar--40 {
+  --_px: 40px;
+}
+.klun-actor-avatar--56 {
+  --_px: 56px;
+}
+.klun-actor-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.klun-actor-avatar__emoji {
+  font-size: calc(var(--_px) * 0.58);
+  line-height: 1;
+}
+.klun-actor-avatar__icon {
+  font-size: calc(var(--_px) * 0.55);
+  line-height: 1;
+  color: currentColor;
+}
+.klun-actor-avatar__initials {
+  line-height: 1;
+}
+
 /* src/components/data-display/Avatar.css */
 .klun-avatar {
   --_bg: var(--klun-bg-weak-50);
@@ -3153,22 +5932,134 @@ body {
   font-family: inherit;
   color: var(--klun-text-strong-950);
 }
-.klun-diff--dark {
-  background: var(--klun-bg-strong-950);
-  border-color: var(--klun-bg-strong-950);
-  color: var(--klun-text-white-0);
+.klun-diff--dark {
+  background: var(--klun-bg-strong-950);
+  border-color: var(--klun-bg-strong-950);
+  color: var(--klun-text-white-0);
+}
+.klun-diff--dark .klun-diff__header,
+.klun-diff--dark .klun-diff__gutter,
+.klun-diff--dark .klun-diff__code--empty,
+.klun-diff--dark .klun-diff__comment {
+  background: var(--klun-bg-surface-800);
+  border-color: var(--klun-bg-surface-800);
+}
+.klun-diff--dark .klun-diff__filename,
+.klun-diff--dark .klun-diff__code,
+.klun-diff--dark .klun-diff__comment {
+  color: var(--klun-text-white-0);
+}
+
+/* src/components/data-display/Item.css */
+.klun-item-group {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+.klun-item {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+  border-radius: var(--klun-radius-lg);
+  color: var(--klun-text-strong-950);
+  font: var(--klun-text-paragraph-sm);
+  transition: background-color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease);
+}
+.klun-item--default {
+  padding: 10px 12px;
+  gap: 10px;
+}
+.klun-item--small {
+  padding: 10px 12px;
+  gap: 10px;
+}
+.klun-item--xsmall {
+  padding: 8px 10px;
+  gap: 8px;
+}
+.klun-item--outline {
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+}
+.klun-item--muted {
+  background: var(--klun-bg-weak-50);
+}
+.klun-item:focus-visible {
+  outline: none;
+  box-shadow: var(--klun-shadow-button-important-focus);
+}
+.klun-item__media {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+.klun-item__media i {
+  font-size: 16px;
+  line-height: 1;
+}
+.klun-item__media[data-variant=image] {
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  border-radius: var(--klun-radius-sm);
+}
+.klun-item__media[data-variant=image] img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.klun-item--small .klun-item__media[data-variant=image] {
+  width: 32px;
+  height: 32px;
+}
+.klun-item--xsmall .klun-item__media[data-variant=image] {
+  width: 24px;
+  height: 24px;
+}
+.klun-item:has(.klun-item__description) .klun-item__media {
+  align-self: flex-start;
+  margin-top: 2px;
+}
+.klun-item__content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.klun-item__title {
+  font: var(--klun-text-label-sm);
+  color: var(--klun-text-strong-950);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.klun-item__description {
+  font: var(--klun-text-paragraph-xs);
+  color: var(--klun-text-sub-600);
 }
-.klun-diff--dark .klun-diff__header,
-.klun-diff--dark .klun-diff__gutter,
-.klun-diff--dark .klun-diff__code--empty,
-.klun-diff--dark .klun-diff__comment {
-  background: var(--klun-bg-surface-800);
-  border-color: var(--klun-bg-surface-800);
+.klun-item__actions {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
 }
-.klun-diff--dark .klun-diff__filename,
-.klun-diff--dark .klun-diff__code,
-.klun-diff--dark .klun-diff__comment {
-  color: var(--klun-text-white-0);
+.klun-item__header,
+.klun-item__footer {
+  flex-basis: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.klun-item-separator {
+  height: 1px;
+  margin: 8px 0;
+  background: var(--klun-stroke-soft-200);
 }
 
 /* src/components/data-display/Kanban.css */
@@ -3236,6 +6127,7 @@ body {
   box-shadow: var(--klun-shadow-xs, 0 1px 2px rgba(14, 18, 27, 0.06)), inset 0 0 0 1px var(--klun-stroke-soft-200);
   cursor: grab;
   transition: transform var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
+  touch-action: none;
 }
 .klun-kanban__card:hover {
   transform: translateY(-1px);
@@ -3532,6 +6424,120 @@ body {
   flex: none;
 }
 
+/* src/components/data-display/ListGrid.css */
+.klun-list-grid {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  align-content: start;
+  column-gap: 12px;
+}
+.klun-list-grid__header {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: subgrid;
+  align-items: center;
+  height: 36px;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--klun-bg-white-0);
+}
+.klun-list-grid__header::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  height: 12px;
+  pointer-events: none;
+  background:
+    linear-gradient(
+      to bottom,
+      var(--klun-bg-white-0),
+      transparent);
+}
+.klun-list-grid__header-cell {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  padding: 0 8px;
+  font: var(--klun-text-label-xs);
+  color: var(--klun-text-sub-600);
+}
+.klun-list-grid__header-cell[data-align=right] {
+  justify-content: flex-end;
+}
+.klun-list-grid__sort {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 24px;
+  margin-left: -6px;
+  padding: 0 4px 0 6px;
+  border: 0;
+  border-radius: var(--klun-radius-md);
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease), color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease);
+}
+.klun-list-grid__header-cell[data-align=right] .klun-list-grid__sort {
+  flex-direction: row-reverse;
+  margin-left: 0;
+  margin-right: -6px;
+  padding: 0 6px 0 4px;
+}
+.klun-list-grid__sort:hover {
+  background: var(--klun-bg-weak-50);
+  color: var(--klun-text-strong-950);
+}
+.klun-list-grid__sort:focus-visible {
+  outline: none;
+  box-shadow: var(--klun-shadow-button-important-focus);
+}
+.klun-list-grid__header-cell[data-sorted] .klun-list-grid__sort {
+  font-weight: var(--klun-font-weight-medium, 500);
+  color: var(--klun-text-strong-950);
+}
+.klun-list-grid__sort-icon {
+  flex: none;
+  font-size: 12px;
+  opacity: 0;
+  transition: opacity var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease);
+}
+.klun-list-grid__sort:hover .klun-list-grid__sort-icon {
+  opacity: 0.5;
+}
+.klun-list-grid__header-cell[data-sorted] .klun-list-grid__sort-icon {
+  opacity: 1;
+}
+.klun-list-grid__body {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: subgrid;
+  align-content: start;
+}
+.klun-list-grid__row {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: subgrid;
+  align-items: center;
+  height: 48px;
+  transition: background-color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease);
+}
+.klun-list-grid__row:hover {
+  background: var(--klun-bg-weak-50);
+}
+.klun-list-grid__cell {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  overflow: hidden;
+  padding: 0 8px;
+}
+
 /* src/components/data-display/Markdown.css */
 .klun-md {
   font: var(--klun-text-paragraph-sm);
@@ -3719,6 +6725,38 @@ body {
   color: var(--klun-text-soft-400);
 }
 
+/* src/components/data-display/NumberFlow.css */
+.klun-number-flow {
+  display: inline-block;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.klun-number-flow__digit {
+  display: inline-block;
+  height: 1em;
+  overflow: hidden;
+  vertical-align: var(--klun-number-flow-baseline, -0.2em);
+}
+.klun-number-flow__track {
+  display: block;
+  transition: transform var(--klun-number-flow-duration, var(--klun-duration-500, 0.5s)) var(--klun-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
+}
+.klun-number-flow__num {
+  display: block;
+  height: 1em;
+  line-height: 1;
+  text-align: center;
+}
+.klun-number-flow__char,
+.klun-number-flow__affix {
+  display: inline-block;
+}
+@media (prefers-reduced-motion: reduce) {
+  .klun-number-flow__track {
+    transition: none;
+  }
+}
+
 /* src/components/data-display/Rating.css */
 .klun-rating {
   display: inline-flex;
@@ -3740,6 +6778,49 @@ body {
   cursor: default;
 }
 
+/* src/components/data-display/ReactionBar.css */
+.klun-reaction-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+.klun-reaction {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border: 1px solid var(--klun-stroke-soft-200);
+  border-radius: var(--klun-radius-pill);
+  background: var(--klun-bg-weak-50);
+  color: var(--klun-text-sub-600);
+  font: var(--klun-text-label-xs);
+  cursor: pointer;
+  transition:
+    background-color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease),
+    border-color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease),
+    color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease);
+}
+.klun-reaction:hover {
+  background: var(--klun-bg-soft-200);
+}
+.klun-reaction[data-reacted] {
+  border-color: var(--klun-alpha-primary-alpha-24);
+  background: var(--klun-alpha-primary-alpha-10);
+  color: var(--klun-primary-base);
+}
+.klun-reaction:focus-visible {
+  outline: none;
+  box-shadow: var(--klun-shadow-button-important-focus);
+}
+.klun-reaction__emoji {
+  line-height: 1;
+}
+.klun-reaction__count {
+  line-height: 16px;
+  font-variant-numeric: tabular-nums;
+}
+
 /* src/components/data-display/RelativeTime.css */
 .klun-relative-time {
   font-variant-numeric: tabular-nums;
@@ -3767,6 +6848,71 @@ body {
   font-size: 15px;
 }
 
+/* src/components/data-display/ShimmerText.css */
+@keyframes klun-shimmer-text-window {
+  from {
+    transform: translateX(-66.6666666667%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+@keyframes klun-shimmer-text-copy {
+  from {
+    transform: translateX(400%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+.klun-shimmer-text {
+  display: inline-block;
+  position: relative;
+  max-width: 100%;
+  overflow: hidden;
+  vertical-align: bottom;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--klun-text-sub-600);
+}
+.klun-shimmer-text--static {
+  color: inherit;
+}
+.klun-shimmer-text__window {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 600%;
+  height: 100%;
+  pointer-events: none;
+  user-select: none;
+  mask-image:
+    linear-gradient(
+      90deg,
+      transparent 35%,
+      black 50%,
+      transparent 65%);
+  mask-size: calc(100% / 3) 100%;
+  mask-repeat: repeat-x;
+  animation: klun-shimmer-text-window 2.5s linear infinite;
+}
+.klun-shimmer-text__copy {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(100% / 6);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--klun-text-strong-950);
+  animation: klun-shimmer-text-copy 2.5s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .klun-shimmer-text__window {
+    display: none;
+  }
+}
+
 /* src/components/data-display/StatCard.css */
 .klun-stat-card {
   --_tint-bg: var(--klun-state-feature-lighter);
@@ -4135,6 +7281,12 @@ body {
 }
 .klun-table__td--util {
   width: 40px;
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+}
+.klun-table__td--util:active {
+  cursor: grabbing;
 }
 .klun-table__td--nowrap {
   white-space: nowrap;
@@ -4170,13 +7322,10 @@ body {
   cursor: pointer;
 }
 .klun-table__row--dragging {
-  opacity: 0.5;
-}
-.klun-table__row--dropover {
-  box-shadow: inset 0 2px 0 var(--klun-primary-base);
-}
-.klun-table__row--dropover-after {
-  box-shadow: inset 0 -2px 0 var(--klun-primary-base);
+  position: relative;
+  z-index: 2;
+  background: var(--klun-bg-white-0);
+  box-shadow: var(--klun-shadow-lg);
 }
 .klun-table__row--status-success {
   background: var(--klun-state-success-lighter, var(--klun-green-50));
@@ -5383,6 +8532,79 @@ body {
   padding: 2px;
 }
 
+/* src/components/feedback/BorderBeam.css */
+@keyframes klun-border-beam-rotate {
+  from {
+    transform: translate(-50%, -50%) rotate(0turn);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(1turn);
+  }
+}
+.klun-border-beam {
+  --klun-border-beam-gradient:
+    conic-gradient(
+      
+      transparent 0deg,
+      transparent 215deg,
+      color-mix(in oklab, var(--klun-primary-base) 45%, white) 245deg,
+      var(--klun-primary-base) 270deg,
+      color-mix(in oklab, var(--klun-primary-base) 60%, black) 295deg,
+      transparent 325deg,
+      transparent 360deg );
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  overflow: hidden;
+  pointer-events: none;
+  container-type: size;
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+}
+.klun-border-beam__light {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: calc(100cqw + 100cqh);
+  aspect-ratio: 1;
+  background: var(--klun-border-beam-gradient);
+  animation: klun-border-beam-rotate 3.2s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .klun-border-beam__light {
+    display: none;
+  }
+  .klun-border-beam {
+    background:
+      linear-gradient(
+        90deg,
+        transparent,
+        color-mix(in oklab, var(--klun-primary-base) 60%, transparent),
+        transparent);
+  }
+}
+
+/* src/components/feedback/CapabilityBanner.css */
+.klun-capability-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border: 1px dashed var(--klun-stroke-soft-200);
+  border-radius: var(--klun-radius-md);
+  background: var(--klun-bg-weak-25);
+  font: var(--klun-text-label-xs);
+  color: var(--klun-text-sub-600);
+}
+.klun-capability-banner__icon {
+  flex: none;
+  font-size: 14px;
+  line-height: 1;
+}
+
 /* src/components/feedback/CircularProgress.css */
 .klun-circular-progress {
   --_fill: var(--klun-primary-base);
@@ -5419,6 +8641,16 @@ body {
   color: var(--klun-text-strong-950);
 }
 
+/* src/components/feedback/DotSphere.css */
+.klun-dot-sphere {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  color: var(--klun-primary-base);
+  pointer-events: none;
+}
+
 /* src/components/feedback/EmptyState.css */
 .klun-empty-state {
   display: flex;
@@ -5610,6 +8842,46 @@ body {
   }
 }
 
+/* src/components/feedback/NavigationProgress.css */
+.klun-navigation-progress {
+  position: fixed;
+  inset-inline: 0;
+  height: 2px;
+  overflow: hidden;
+  pointer-events: none;
+  opacity: 0;
+  z-index: 900;
+  transition: opacity var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease);
+}
+.klun-navigation-progress[data-position=absolute] {
+  position: absolute;
+}
+.klun-navigation-progress[data-active=true] {
+  opacity: 1;
+}
+.klun-navigation-progress__sweep {
+  width: 33.333%;
+  height: 100%;
+  background: var(--klun-primary-base);
+  box-shadow: 0 0 8px color-mix(in oklab, var(--klun-primary-base) 60%, transparent), 0 0 2px color-mix(in oklab, var(--klun-primary-base) 80%, transparent);
+  animation: klun-navigation-progress-sweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+@keyframes klun-navigation-progress-sweep {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .klun-navigation-progress__sweep {
+    width: 100%;
+    opacity: 0.5;
+    animation: none;
+  }
+}
+
 /* src/components/feedback/Notification.css */
 .klun-notification {
   --_tint: var(--klun-icon-sub-600);
@@ -6136,6 +9408,15 @@ body {
   }
 }
 
+/* src/components/feedback/UnicodeSpinner.css */
+.klun-unicode-spinner {
+  display: inline-block;
+  min-width: 1ch;
+  text-align: center;
+  font-family: var(--klun-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-variant-numeric: tabular-nums;
+}
+
 /* src/components/forms/AutoComplete.css */
 .klun-autocomplete {
   position: relative;
@@ -7350,6 +10631,156 @@ body {
   background: var(--klun-bg-weak-50);
 }
 
+/* src/components/forms/EmojiPicker.css */
+.klun-emoji-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+.klun-emoji-picker__search {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 8px;
+  border-radius: var(--klun-radius-md);
+  background: var(--klun-bg-weak-50);
+  color: var(--klun-text-soft-400);
+}
+.klun-emoji-picker__search i {
+  flex: none;
+  font-size: 16px;
+}
+.klun-emoji-picker__search input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  font: var(--klun-text-paragraph-sm);
+  color: var(--klun-text-strong-950);
+}
+.klun-emoji-picker__search input::placeholder {
+  color: var(--klun-text-soft-400);
+}
+.klun-emoji-picker__search:focus-within {
+  box-shadow: 0 0 0 1px var(--klun-alpha-primary-alpha-16);
+}
+.klun-emoji-picker__body {
+  flex: 1;
+  min-height: 0;
+  max-height: var(--klun-emoji-picker-max-height, 264px);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.klun-emoji-picker__group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.klun-emoji-picker__group-title {
+  padding: 0 2px;
+  font: var(--klun-text-label-xs);
+  color: var(--klun-text-soft-400);
+}
+.klun-emoji-picker__grid {
+  display: grid;
+  gap: 2px;
+}
+.klun-emoji-picker__cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--klun-radius-sm);
+  background: transparent;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease);
+}
+.klun-emoji-picker__cell:hover {
+  background: var(--klun-bg-weak-50);
+}
+.klun-emoji-picker__cell:focus-visible {
+  outline: none;
+  box-shadow: var(--klun-shadow-button-important-focus);
+}
+.klun-emoji-picker__empty {
+  padding: 24px 0;
+  text-align: center;
+  font: var(--klun-text-paragraph-sm);
+  color: var(--klun-text-soft-400);
+}
+
+/* src/components/forms/Field.css */
+.klun-field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+}
+.klun-field {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+}
+.klun-field--vertical {
+  flex-direction: column;
+}
+.klun-field--vertical > * {
+  width: 100%;
+}
+.klun-field--horizontal {
+  flex-direction: row;
+  align-items: center;
+}
+.klun-field--horizontal > .klun-field__label,
+.klun-field--horizontal > .klun-field__title {
+  flex: none;
+  width: var(--klun-field-label-w, 120px);
+}
+.klun-field--horizontal > :not(.klun-field__label):not(.klun-field__title) {
+  flex: 1;
+  min-width: 0;
+}
+.klun-field__content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.klun-field__label,
+.klun-field__title {
+  font: var(--klun-text-label-sm);
+  color: var(--klun-text-strong-950);
+}
+.klun-field[data-invalid] > .klun-field__label,
+.klun-field[data-invalid] > .klun-field__title,
+.klun-field[data-invalid] .klun-field__content > .klun-field__label,
+.klun-field[data-invalid] .klun-field__content > .klun-field__title {
+  color: var(--klun-state-error-base);
+}
+.klun-field__description {
+  font: var(--klun-text-paragraph-xs);
+  color: var(--klun-text-sub-600);
+}
+.klun-field__error {
+  font: var(--klun-text-paragraph-xs);
+  color: var(--klun-state-error-base);
+}
+.klun-field__error:empty {
+  display: none;
+}
+
 /* src/components/forms/FileUpload.css */
 .klun-file-upload {
   display: flex;
@@ -7387,74 +10818,251 @@ body {
 .klun-file-upload__action {
   color: var(--klun-primary-base);
 }
-.klun-file-upload__hint {
-  font: var(--klun-text-paragraph-xs);
+.klun-file-upload__hint {
+  font: var(--klun-text-paragraph-xs);
+  color: var(--klun-text-soft-400);
+}
+
+/* src/components/forms/Form.css */
+.klun-form {
+  display: flex;
+  flex-direction: column;
+}
+.klun-form--vertical {
+  gap: 18px;
+}
+.klun-form--horizontal {
+  gap: 12px;
+}
+.klun-form-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: stretch;
+}
+.klun-form-item--horizontal {
+  display: grid;
+  grid-template-columns: 140px 1fr;
+  gap: 12px;
+  align-items: start;
+}
+.klun-form-item__label {
+  font: var(--klun-text-label-sm);
+  color: var(--klun-text-strong-950);
+}
+.klun-form-item--horizontal .klun-form-item__label {
+  padding-top: 9px;
+}
+.klun-form-item__required {
+  color: var(--klun-state-error-base);
+  margin-left: 2px;
+}
+.klun-form-item__control {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.klun-form-item__error {
+  font: var(--klun-text-paragraph-xs);
+  color: var(--klun-state-error-base);
+}
+.klun-form-item__help {
+  font: var(--klun-text-paragraph-xs);
+  color: var(--klun-text-soft-400);
+}
+
+/* src/components/forms/Hint.css */
+.klun-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font: var(--klun-text-paragraph-xs);
+  color: var(--klun-text-soft-400);
+}
+.klun-hint--error {
+  color: var(--klun-state-error-base);
+}
+.klun-hint__icon {
+  display: inline-flex;
+  font-size: 16px;
+}
+
+/* src/components/forms/IconPicker.css */
+.klun-icon-picker {
+  display: inline-flex;
+}
+.klun-icon-picker__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: var(--klun-control-h-sm, 32px);
+  padding: 0;
+  font-size: 16px;
+  color: var(--klun-text-strong-950);
+  background: var(--klun-bg-white-0);
+  border: none;
+  border-radius: var(--klun-radius-md);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  cursor: pointer;
+  transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
+}
+.klun-icon-picker__trigger:hover {
+  box-shadow: inset 0 0 0 1px var(--klun-text-soft-400);
+}
+.klun-icon-picker__trigger:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 1px var(--klun-primary-base), 0 0 0 3px color-mix(in srgb, var(--klun-primary-base) 18%, transparent);
+}
+.klun-icon-picker__trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.klun-icon-picker__search {
+  position: relative;
+  display: block;
+}
+.klun-icon-picker__search > i {
+  position: absolute;
+  left: 11px;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: var(--klun-text-soft-400);
+  pointer-events: none;
+}
+.klun-icon-picker__search input {
+  width: 100%;
+  box-sizing: border-box;
+  height: var(--klun-control-h-sm, 32px);
+  padding: 0 var(--klun-field-px-xs, 11px) 0 32px;
+  font: inherit;
+  font-size: 13px;
+  color: var(--klun-text-strong-950);
+  background: var(--klun-bg-weak-50);
+  border: none;
+  border-radius: var(--klun-radius-lg, 8px);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  outline: none;
+  transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
+}
+.klun-icon-picker__search input::placeholder {
   color: var(--klun-text-soft-400);
 }
-
-/* src/components/forms/Form.css */
-.klun-form {
-  display: flex;
-  flex-direction: column;
+.klun-icon-picker__search input:focus {
+  background: var(--klun-bg-white-0);
+  box-shadow: inset 0 0 0 1px var(--klun-primary-base), 0 0 0 3px color-mix(in srgb, var(--klun-primary-base) 14%, transparent);
 }
-.klun-form--vertical {
+.klun-icon-picker__tabs {
+  display: flex;
   gap: 18px;
+  margin: 14px 0 10px;
+  border-bottom: 1px solid var(--klun-stroke-soft-200);
 }
-.klun-form--horizontal {
-  gap: 12px;
+.klun-icon-picker__tab {
+  padding: 0 0 8px;
+  margin-bottom: -1px;
+  font: inherit;
+  font-size: 13px;
+  color: var(--klun-text-sub-600);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: color var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
-.klun-form-item {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  align-items: stretch;
+.klun-icon-picker__tab:hover {
+  color: var(--klun-text-strong-950);
 }
-.klun-form-item--horizontal {
+.klun-icon-picker__tab.is-active {
+  font-weight: 500;
+  color: var(--klun-primary-base);
+  border-bottom-color: var(--klun-primary-base);
+}
+.klun-icon-picker__grid {
   display: grid;
-  grid-template-columns: 140px 1fr;
-  gap: 12px;
-  align-items: start;
+  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
+  gap: 6px;
+  padding-bottom: 14px;
 }
-.klun-form-item__label {
-  font: var(--klun-text-label-sm);
+.klun-icon-picker__cell {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: var(--klun-text-sub-600);
+  background: none;
+  border: none;
+  border-radius: var(--klun-radius-lg, 8px);
+  cursor: pointer;
+  transition: color var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease), background var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
+}
+.klun-icon-picker__cell:hover {
   color: var(--klun-text-strong-950);
+  background: var(--klun-bg-weak-50);
 }
-.klun-form-item--horizontal .klun-form-item__label {
-  padding-top: 9px;
+.klun-icon-picker__cell.is-selected {
+  color: var(--klun-primary-base);
+  background: color-mix(in srgb, var(--klun-primary-base) 10%, transparent);
+  box-shadow: inset 0 0 0 1px var(--klun-primary-base);
 }
-.klun-form-item__required {
-  color: var(--klun-state-error-base);
-  margin-left: 2px;
+.klun-icon-picker__empty {
+  padding: 36px 0;
+  text-align: center;
+  font-size: 13px;
+  color: var(--klun-text-soft-400);
 }
-.klun-form-item__control {
+.klun-icon-picker__foot {
   display: flex;
-  flex-direction: column;
-  gap: 4px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 2px;
+  padding-top: 12px;
+  border-top: 1px solid var(--klun-stroke-soft-200);
+}
+.klun-icon-picker__current {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   min-width: 0;
+  font-size: 12px;
+  color: var(--klun-text-soft-400);
 }
-.klun-form-item__error {
-  font: var(--klun-text-paragraph-xs);
-  color: var(--klun-state-error-base);
+.klun-icon-picker__current i {
+  font-size: 16px;
+  color: var(--klun-text-strong-950);
 }
-.klun-form-item__help {
-  font: var(--klun-text-paragraph-xs);
-  color: var(--klun-text-soft-400);
+.klun-icon-picker__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-
-/* src/components/forms/Hint.css */
-.klun-hint {
+.klun-icon-picker__actions {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  font: var(--klun-text-paragraph-xs);
-  color: var(--klun-text-soft-400);
+  gap: 8px;
+  flex-shrink: 0;
 }
-.klun-hint--error {
-  color: var(--klun-state-error-base);
+.klun-icon-picker__btn {
+  height: 30px;
+  padding: 0 14px;
+  font: inherit;
+  font-size: 13px;
+  color: var(--klun-text-sub-600);
+  background: none;
+  border: none;
+  border-radius: var(--klun-radius-md);
+  cursor: pointer;
+  transition: background var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
-.klun-hint__icon {
-  display: inline-flex;
-  font-size: 16px;
+.klun-icon-picker__btn:hover {
+  color: var(--klun-text-strong-950);
+  background: var(--klun-bg-weak-50);
 }
 
 /* src/components/forms/ImageUpload.css */
@@ -7785,6 +11393,144 @@ body {
   }
 }
 
+/* src/components/forms/InputGroup.css */
+.klun-input-group {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: var(--klun-control-h-lg, 40px);
+  padding: 0 10px;
+  border-radius: var(--klun-radius-lg);
+  background: var(--klun-bg-white-0);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
+}
+.klun-input-group:focus-within {
+  box-shadow: inset 0 0 0 1px var(--klun-primary-base), var(--klun-shadow-button-primary-focus);
+}
+.klun-input-group[data-invalid] {
+  box-shadow: inset 0 0 0 1px var(--klun-state-error-base);
+}
+.klun-input-group[data-disabled] {
+  background: var(--klun-bg-weak-50);
+  opacity: 0.5;
+  pointer-events: none;
+}
+.klun-input-group:has([data-align=block-start]),
+.klun-input-group:has([data-align=block-end]) {
+  flex-direction: column;
+  align-items: stretch;
+  height: auto;
+  padding: 8px 12px;
+}
+.klun-input-group__input {
+  flex: 1;
+  min-width: 0;
+  height: 38px;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--klun-text-strong-950);
+  font: var(--klun-text-paragraph-sm);
+}
+.klun-input-group__input::placeholder {
+  color: var(--klun-text-soft-400);
+}
+.klun-input-group:has([data-align=block-start]) .klun-input-group__input,
+.klun-input-group:has([data-align=block-end]) .klun-input-group__input {
+  height: 30px;
+}
+.klun-input-group__addon {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--klun-text-sub-600);
+  font: var(--klun-text-paragraph-sm);
+  user-select: none;
+}
+.klun-input-group__addon[data-align=inline-start] {
+  order: -1;
+}
+.klun-input-group__addon[data-align=inline-end] {
+  order: 1;
+}
+.klun-input-group__addon[data-align=block-start] {
+  order: -1;
+  width: 100%;
+}
+.klun-input-group__addon[data-align=block-end] {
+  order: 2;
+  width: 100%;
+}
+.klun-input-group__addon i {
+  font-size: 16px;
+  line-height: 1;
+}
+.klun-input-group__text {
+  white-space: nowrap;
+}
+.klun-input-group__button {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--klun-text-sub-600);
+  font: var(--klun-text-label-xs);
+  cursor: pointer;
+  transition:
+    background-color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease),
+    color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease),
+    filter var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease);
+}
+.klun-input-group__button--xsmall {
+  height: 24px;
+  padding: 0 8px;
+  border-radius: var(--klun-radius-sm);
+}
+.klun-input-group__button--icon-xsmall {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--klun-radius-sm);
+}
+.klun-input-group__button--icon-small {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--klun-radius-md);
+}
+.klun-input-group__button--ghost:hover:not(:disabled) {
+  background: var(--klun-bg-weak-50);
+  color: var(--klun-text-strong-950);
+}
+.klun-input-group__button--soft {
+  background: var(--klun-bg-weak-50);
+}
+.klun-input-group__button--soft:hover:not(:disabled) {
+  background: var(--klun-bg-soft-200);
+  color: var(--klun-text-strong-950);
+}
+.klun-input-group__button--primary {
+  background: var(--klun-bg-strong-950);
+  color: var(--klun-text-white-0);
+}
+.klun-input-group__button--primary:hover:not(:disabled) {
+  filter: brightness(1.06);
+}
+.klun-input-group__button:focus-visible {
+  outline: none;
+  box-shadow: var(--klun-shadow-button-important-focus);
+}
+.klun-input-group__button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 /* src/components/forms/Label.css */
 .klun-label {
   display: inline-flex;
@@ -7834,12 +11580,85 @@ body {
   background: var(--klun-bg-soft-200, var(--klun-stroke-soft-200));
   transition: background var(--klun-duration-fast, 0.2s) var(--klun-ease-out, ease);
 }
-.klun-password-strength__bar[data-lit] {
-  background: var(--_accent);
+.klun-password-strength__bar[data-lit] {
+  background: var(--_accent);
+}
+.klun-password-strength__label {
+  font: var(--klun-text-label-xs);
+  color: var(--_accent);
+}
+
+/* src/components/forms/QuickEmojiPicker.css */
+.klun-quick-emoji-picker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex: none;
+  padding: 0;
+  border: 0;
+  border-radius: var(--klun-radius-pill);
+  background: transparent;
+  color: var(--klun-text-sub-600);
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease), color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease);
+}
+.klun-quick-emoji-picker:hover {
+  background: var(--klun-bg-weak-50);
+  color: var(--klun-text-strong-950);
+}
+.klun-quick-emoji-picker:focus-visible {
+  outline: none;
+  box-shadow: var(--klun-shadow-button-important-focus);
+}
+.klun-quick-emoji-picker__panel {
+  padding: 8px;
+}
+.klun-quick-emoji-picker__row {
+  display: flex;
+  gap: 2px;
+}
+.klun-quick-emoji-picker__cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--klun-radius-sm);
+  background: transparent;
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease);
+}
+.klun-quick-emoji-picker__cell:hover {
+  background: var(--klun-bg-weak-50);
+}
+.klun-quick-emoji-picker__cell:focus-visible {
+  outline: none;
+  box-shadow: var(--klun-shadow-button-important-focus);
 }
-.klun-password-strength__label {
+.klun-quick-emoji-picker__more {
+  display: block;
+  width: 100%;
+  margin-top: 6px;
+  padding: 4px 0;
+  border: 0;
+  border-radius: var(--klun-radius-sm);
+  background: transparent;
   font: var(--klun-text-label-xs);
-  color: var(--_accent);
+  color: var(--klun-text-sub-600);
+  text-align: center;
+  cursor: pointer;
+  transition: background-color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease), color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease);
+}
+.klun-quick-emoji-picker__more:hover {
+  background: var(--klun-bg-weak-50);
+  color: var(--klun-text-strong-950);
 }
 
 /* src/components/forms/Radio.css */
@@ -9372,269 +13191,656 @@ body {
   border-radius: var(--klun-radius-2xl);
   box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
 }
-.klun-menu--collapsed {
-  width: 56px;
-}
-.klun-menu__row {
-  display: flex;
+.klun-menu--collapsed {
+  width: 56px;
+}
+.klun-menu__row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  height: var(--klun-control-h-lg, 40px);
+  padding: 0 var(--klun-control-px-sm, 12px) 0 var(--klun-menu-indent, 12px);
+  justify-content: flex-start;
+  border: none;
+  border-radius: var(--klun-radius-lg);
+  cursor: pointer;
+  background: transparent;
+  box-shadow: none;
+  font: var(--klun-text-label-sm);
+  color: var(--klun-text-sub-600);
+  text-align: left;
+  opacity: 1;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.klun-menu--collapsed .klun-menu__row {
+  padding: 0;
+  justify-content: center;
+}
+.klun-menu__row:not([data-active]):not(:disabled):hover {
+  background: var(--klun-bg-weak-50);
+}
+.klun-menu__row[data-sub-active] {
+  color: var(--klun-text-strong-950);
+}
+.klun-menu__row[data-danger] {
+  color: var(--klun-state-error-base);
+}
+.klun-menu__row[data-active] {
+  color: var(--klun-primary-base);
+  background: var(--klun-primary-alpha-10, var(--klun-bg-weak-50));
+  box-shadow: inset 2px 0 0 var(--klun-primary-base);
+}
+.klun-menu__row:disabled {
+  cursor: not-allowed;
+  color: var(--klun-text-disabled-300);
+  opacity: 0.6;
+}
+.klun-menu__icon {
+  display: inline-flex;
+  font-size: 20px;
+  flex: none;
+  color: currentColor;
+}
+.klun-menu__bullet {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--klun-radius-pill);
+  flex: none;
+  background: var(--klun-bg-soft-200);
+}
+.klun-menu__row[data-active] .klun-menu__bullet {
+  background: var(--klun-primary-base);
+}
+.klun-menu__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.klun-menu__badge {
+  flex: none;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--klun-radius-pill);
+  background: var(--klun-primary-base);
+  color: var(--klun-static-static-white);
+  font: var(--klun-text-label-xs);
+}
+.klun-menu__caret {
+  font-size: 18px;
+  flex: none;
+  color: var(--klun-icon-soft-400);
+  transition: transform 0.15s ease;
+}
+.klun-menu__caret[data-open] {
+  transform: rotate(90deg);
+}
+.klun-menu__group[data-nested] {
+  margin-top: 8px;
+}
+.klun-menu__group-label {
+  padding: 8px 12px 4px;
+  font: var(--klun-text-subheading-2xs, var(--klun-text-label-xs));
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--klun-text-soft-400);
+}
+.klun-menu__divider {
+  height: 1px;
+  background: var(--klun-stroke-soft-200);
+  margin: 6px 8px;
+}
+
+/* src/components/navigation/PageHeader.css */
+.klun-page-header {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px 24px;
+  background: var(--klun-bg-white-0);
+}
+.klun-page-header--bordered {
+  border-bottom: 1px solid var(--klun-stroke-soft-200);
+}
+.klun-page-header--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  box-shadow: var(--klun-shadow-sm);
+}
+.klun-page-header__breadcrumb {
+  min-height: 20px;
+}
+.klun-page-header__bar {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+.klun-page-header__back {
+  flex: none;
+  margin-top: 2px;
+}
+.klun-page-header__avatar {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+}
+.klun-page-header__heading {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.klun-page-header__title-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.klun-page-header__title {
+  margin: 0;
+  font: var(--klun-text-title-h5);
+  color: var(--klun-text-strong-950);
+  word-break: break-word;
+}
+.klun-page-header__tags {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.klun-page-header__subtitle {
+  margin-top: 4px;
+  font: var(--klun-text-paragraph-sm);
+  color: var(--klun-text-sub-600);
+}
+.klun-page-header__extra {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+.klun-page-header__content {
+  font: var(--klun-text-paragraph-md);
+  color: var(--klun-text-sub-600);
+}
+.klun-page-header__tabs {
+  margin: 0 -24px -16px;
+  padding: 0 24px;
+}
+@media (max-width: 640px) {
+  .klun-page-header__bar {
+    flex-wrap: wrap;
+  }
+  .klun-page-header__extra {
+    width: 100%;
+    margin-left: 0;
+  }
+}
+
+/* src/components/navigation/Pagination.css */
+.klun-pagination {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.klun-pagination__cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--klun-control-h-md, 36px);
+  height: var(--klun-control-h-md, 36px);
+  padding: 0 var(--klun-control-px-2xs, 8px);
+  border: none;
+  border-radius: var(--klun-radius-lg);
+  cursor: pointer;
+  font: var(--klun-text-label-sm);
+  background: transparent;
+  box-shadow: none;
+  color: var(--klun-text-sub-600);
+  transition: background var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease), box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
+}
+.klun-pagination__cell[data-active=true] {
+  background: var(--klun-bg-white-0);
+  box-shadow: var(--klun-shadow-xs), inset 0 0 0 1px var(--klun-stroke-soft-200);
+  color: var(--klun-text-strong-950);
+}
+.klun-pagination__cell:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.klun-pagination__ellipsis {
+  min-width: 24px;
+  text-align: center;
+  color: var(--klun-text-soft-400);
+}
+
+/* src/components/navigation/SegmentedControl.css */
+.klun-segmented-control {
+  display: inline-flex;
+  padding: 4px;
+  border-radius: var(--klun-radius-lg);
+  background: var(--klun-bg-weak-50);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+}
+.klun-segmented-control__segment {
+  display: inline-flex;
   align-items: center;
-  gap: 10px;
-  width: 100%;
-  height: var(--klun-control-h-lg, 40px);
-  padding: 0 var(--klun-control-px-sm, 12px) 0 var(--klun-menu-indent, 12px);
-  justify-content: flex-start;
+  justify-content: center;
+  gap: 6px;
+  flex: 1;
+  height: var(--klun-control-h-sm, 32px);
+  padding: 0 var(--klun-control-px-md, 14px);
   border: none;
-  border-radius: var(--klun-radius-lg);
+  border-radius: var(--klun-radius-md);
   cursor: pointer;
+  white-space: nowrap;
   background: transparent;
+  color: var(--klun-text-sub-600);
   box-shadow: none;
   font: var(--klun-text-label-sm);
-  color: var(--klun-text-sub-600);
-  text-align: left;
-  opacity: 1;
-  transition: background 0.12s ease, color 0.12s ease;
+  transition: background var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease), color var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
 }
-.klun-menu--collapsed .klun-menu__row {
-  padding: 0;
+.klun-segmented-control__segment[aria-selected=true] {
+  background: var(--klun-bg-white-0);
+  color: var(--klun-text-strong-950);
+  box-shadow: var(--klun-shadow-sm);
+}
+.klun-segmented-control__icon {
+  display: inline-flex;
+  font-size: 18px;
+}
+
+/* src/components/navigation/Sidebar.css */
+.klun-sidebar {
+  --_rail-w: 64px;
+  --_panel-w: 320px;
+  --_ease: var(--klun-sidebar-ease, cubic-bezier(0.25, 1.1, 0.4, 1));
+  --_dur: var(--klun-sidebar-duration, var(--klun-duration-500, 0.5s));
+  --_color-dur: var(--klun-duration-200, 0.2s);
+  --_color-ease: var(--klun-ease-out, ease);
+  --_bg: var(--klun-bg-white-0);
+  --_hover: var(--klun-bg-weak-50);
+  --_active: var(--klun-bg-soft-200);
+  --_stroke: var(--klun-stroke-soft-200);
+  --_fg: var(--klun-text-strong-950);
+  --_sub-fg: var(--klun-text-sub-600);
+  --_soft-fg: var(--klun-text-soft-400);
+  display: flex;
+  height: 100%;
+  color: var(--_fg);
+}
+.klun-sidebar__rail {
+  flex: none;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: var(--_rail-w);
+  padding: 16px;
+  background: var(--_bg);
+  border-right: 1px solid var(--_stroke);
+  border-radius: var(--klun-radius-2xl) 0 0 var(--klun-radius-2xl);
+}
+.klun-sidebar__brand {
+  flex: none;
+  display: flex;
+  align-items: center;
   justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-bottom: 8px;
 }
-.klun-menu__row:not([data-active]):not(:disabled):hover {
-  background: var(--klun-bg-weak-50);
+.klun-sidebar__nav,
+.klun-sidebar__rail-foot {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
 }
-.klun-menu__row[data-sub-active] {
-  color: var(--klun-text-strong-950);
+.klun-sidebar__rail-foot {
+  margin-top: auto;
 }
-.klun-menu__row[data-danger] {
-  color: var(--klun-state-error-base);
+.klun-sidebar__nav-button {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--klun-radius-md);
+  background: transparent;
+  color: var(--klun-icon-soft-400);
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color var(--_dur) var(--_ease), color var(--_dur) var(--_ease);
 }
-.klun-menu__row[data-active] {
-  color: var(--klun-primary-base);
-  background: var(--klun-primary-alpha-10, var(--klun-bg-weak-50));
-  box-shadow: inset 2px 0 0 var(--klun-primary-base);
+.klun-sidebar__nav-button:hover:not(:disabled) {
+  background: var(--_hover);
+  color: var(--klun-icon-sub-600);
 }
-.klun-menu__row:disabled {
-  cursor: not-allowed;
-  color: var(--klun-text-disabled-300);
-  opacity: 0.6;
+.klun-sidebar__nav-button[data-active] {
+  background: var(--_active);
+  color: var(--_fg);
 }
-.klun-menu__icon {
-  display: inline-flex;
-  font-size: 20px;
+.klun-sidebar__avatar {
   flex: none;
-  color: currentColor;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
 }
-.klun-menu__bullet {
-  width: 6px;
-  height: 6px;
-  border-radius: var(--klun-radius-pill);
+.klun-sidebar__panel {
   flex: none;
-  background: var(--klun-bg-soft-200);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: var(--_panel-w);
+  min-height: 0;
+  padding: 16px;
+  background: var(--_bg);
+  border-radius: 0 var(--klun-radius-2xl) var(--klun-radius-2xl) 0;
+  transition: width var(--_dur) var(--_ease), padding var(--_dur) var(--_ease);
 }
-.klun-menu__row[data-active] .klun-menu__bullet {
-  background: var(--klun-primary-base);
+.klun-sidebar--collapsed .klun-sidebar__panel {
+  width: var(--_rail-w);
+  min-width: var(--_rail-w);
+  padding-inline: 0;
+  align-items: center;
 }
-.klun-menu__label {
-  flex: 1;
+.klun-sidebar__panel-head {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 40px;
+}
+.klun-sidebar__panel-title {
   min-width: 0;
+  padding-inline: 8px;
   overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  font-family: var(--klun-font-sans);
+  font-size: 18px;
+  line-height: 27px;
+  font-weight: var(--klun-font-weight-semibold, 600);
+  color: var(--_fg);
 }
-.klun-menu__badge {
+.klun-sidebar__collapse {
   flex: none;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--klun-radius-pill);
-  background: var(--klun-primary-base);
-  color: var(--klun-static-static-white);
-  font: var(--klun-text-label-xs);
-}
-.klun-menu__caret {
-  font-size: 18px;
-  flex: none;
+  width: 40px;
+  height: 40px;
+  margin-right: 4px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--klun-radius-md);
+  background: transparent;
   color: var(--klun-icon-soft-400);
-  transition: transform 0.15s ease;
-}
-.klun-menu__caret[data-open] {
-  transform: rotate(90deg);
-}
-.klun-menu__group[data-nested] {
-  margin-top: 8px;
-}
-.klun-menu__group-label {
-  padding: 8px 12px 4px;
-  font: var(--klun-text-subheading-2xs, var(--klun-text-label-xs));
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--klun-text-soft-400);
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color var(--_color-dur) var(--_color-ease), color var(--_color-dur) var(--_color-ease);
 }
-.klun-menu__divider {
-  height: 1px;
-  background: var(--klun-stroke-soft-200);
-  margin: 6px 8px;
+.klun-sidebar__collapse:hover {
+  background: var(--_hover);
+  color: var(--klun-icon-sub-600);
 }
-
-/* src/components/navigation/PageHeader.css */
-.klun-page-header {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 16px 24px;
-  background: var(--klun-bg-white-0);
+.klun-sidebar__collapse i {
+  transition: transform var(--_dur) var(--_ease);
 }
-.klun-page-header--bordered {
-  border-bottom: 1px solid var(--klun-stroke-soft-200);
+.klun-sidebar--collapsed .klun-sidebar__panel-head {
+  justify-content: center;
 }
-.klun-page-header--sticky {
-  position: sticky;
-  top: 0;
-  z-index: 20;
-  box-shadow: var(--klun-shadow-sm);
+.klun-sidebar--collapsed .klun-sidebar__collapse {
+  margin-right: 0;
 }
-.klun-page-header__breadcrumb {
-  min-height: 20px;
+.klun-sidebar--collapsed .klun-sidebar__collapse i {
+  transform: rotate(180deg);
 }
-.klun-page-header__bar {
+.klun-sidebar__search {
+  flex: none;
+  box-sizing: border-box;
   display: flex;
-  align-items: flex-start;
-  gap: 12px;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  overflow: hidden;
+  background: var(--_bg);
+  border: 1px solid var(--_stroke);
+  border-radius: var(--klun-radius-md);
+  transition: width var(--_dur) var(--_ease), border-color var(--_color-dur) var(--_color-ease);
 }
-.klun-page-header__back {
-  flex: none;
-  margin-top: 2px;
+.klun-sidebar--collapsed .klun-sidebar__search {
+  width: 40px;
 }
-.klun-page-header__avatar {
+.klun-sidebar__search:focus-within {
+  border-color: var(--klun-stroke-strong-950);
+}
+.klun-sidebar__search-icon {
   flex: none;
-  display: inline-flex;
+  display: flex;
   align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 100%;
+  font-size: 16px;
+  color: var(--_fg);
 }
-.klun-page-header__heading {
-  flex: 1 1 auto;
+.klun-sidebar__search-input {
+  flex: 1;
   min-width: 0;
+  height: 100%;
+  padding: 0 8px 0 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  font: var(--klun-text-paragraph-sm);
+  color: var(--_fg);
+  transition: opacity var(--_dur) var(--_ease);
 }
-.klun-page-header__title-row {
+.klun-sidebar__search-input::placeholder {
+  color: var(--_soft-fg);
+}
+.klun-sidebar--collapsed .klun-sidebar__search-input {
+  opacity: 0;
+}
+.klun-sidebar__scroll {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
   display: flex;
-  align-items: center;
-  flex-wrap: wrap;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 16px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.klun-sidebar--collapsed .klun-sidebar__scroll {
   gap: 8px;
+  align-items: center;
 }
-.klun-page-header__title {
-  margin: 0;
-  font: var(--klun-text-title-h5);
-  color: var(--klun-text-strong-950);
-  word-break: break-word;
+.klun-sidebar__section,
+.klun-sidebar__group {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 }
-.klun-page-header__tags {
-  display: inline-flex;
+.klun-sidebar--collapsed .klun-sidebar__group {
   align-items: center;
-  flex-wrap: wrap;
-  gap: 6px;
 }
-.klun-page-header__subtitle {
-  margin-top: 4px;
+.klun-sidebar__section-title {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 16px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   font: var(--klun-text-paragraph-sm);
-  color: var(--klun-text-sub-600);
+  color: var(--_sub-fg);
+  transition: height var(--_dur) var(--_ease), opacity var(--_dur) var(--_ease);
 }
-.klun-page-header__extra {
+.klun-sidebar--collapsed .klun-sidebar__section-title {
+  height: 0;
+  opacity: 0;
+}
+.klun-sidebar__item {
+  box-sizing: border-box;
   flex: none;
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  gap: 8px;
-  margin-left: auto;
+  width: 100%;
+  height: 40px;
+  margin: 2px 0;
+  padding: 8px 16px;
+  border: 0;
+  border-radius: var(--klun-radius-md);
+  background: transparent;
+  color: var(--_fg);
+  font: var(--klun-text-paragraph-sm);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color var(--_color-dur) var(--_color-ease),
+    width var(--_dur) var(--_ease),
+    padding var(--_dur) var(--_ease);
 }
-.klun-page-header__content {
-  font: var(--klun-text-paragraph-md);
-  color: var(--klun-text-sub-600);
+.klun-sidebar__item:hover:not(:disabled) {
+  background: var(--_hover);
 }
-.klun-page-header__tabs {
-  margin: 0 -24px -16px;
-  padding: 0 24px;
+.klun-sidebar__item[data-active] {
+  background: var(--_hover);
 }
-@media (max-width: 640px) {
-  .klun-page-header__bar {
-    flex-wrap: wrap;
-  }
-  .klun-page-header__extra {
-    width: 100%;
-    margin-left: 0;
-  }
+.klun-sidebar--collapsed .klun-sidebar__item {
+  width: 40px;
+  min-width: 40px;
+  justify-content: center;
+  padding: 0;
 }
-
-/* src/components/navigation/Pagination.css */
-.klun-pagination {
-  display: inline-flex;
+.klun-sidebar__item-icon {
+  flex: none;
+  display: flex;
   align-items: center;
-  gap: 4px;
+  justify-content: center;
+  font-size: 16px;
+  color: currentColor;
 }
-.klun-pagination__cell {
-  display: inline-flex;
+.klun-sidebar__item-label {
+  flex: 1;
+  min-width: 0;
+  margin-left: 12px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: opacity var(--_dur) var(--_ease), margin-left var(--_dur) var(--_ease);
+}
+.klun-sidebar--collapsed .klun-sidebar__item-label {
+  opacity: 0;
+  margin-left: 0;
+}
+.klun-sidebar__item-caret {
+  flex: none;
+  display: flex;
   align-items: center;
   justify-content: center;
-  min-width: var(--klun-control-h-md, 36px);
-  height: var(--klun-control-h-md, 36px);
-  padding: 0 var(--klun-control-px-2xs, 8px);
-  border: none;
-  border-radius: var(--klun-radius-lg);
-  cursor: pointer;
-  font: var(--klun-text-label-sm);
-  background: transparent;
-  box-shadow: none;
-  color: var(--klun-text-sub-600);
-  transition: background var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease), box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
+  width: 16px;
+  margin-left: 8px;
+  font-size: 16px;
+  color: currentColor;
+  transition:
+    opacity var(--_dur) var(--_ease),
+    width var(--_dur) var(--_ease),
+    margin-left var(--_dur) var(--_ease);
 }
-.klun-pagination__cell[data-active=true] {
-  background: var(--klun-bg-white-0);
-  box-shadow: var(--klun-shadow-xs), inset 0 0 0 1px var(--klun-stroke-soft-200);
-  color: var(--klun-text-strong-950);
+.klun-sidebar__item-caret i {
+  transition: transform var(--_dur) var(--_ease);
 }
-.klun-pagination__cell:disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
+.klun-sidebar__item[aria-expanded=true] .klun-sidebar__item-caret i {
+  transform: rotate(180deg);
 }
-.klun-pagination__ellipsis {
-  min-width: 24px;
-  text-align: center;
-  color: var(--klun-text-soft-400);
+.klun-sidebar--collapsed .klun-sidebar__item-caret {
+  width: 0;
+  opacity: 0;
+  margin-left: 0;
 }
-
-/* src/components/navigation/SegmentedControl.css */
-.klun-segmented-control {
-  display: inline-flex;
-  padding: 4px;
-  border-radius: var(--klun-radius-lg);
-  background: var(--klun-bg-weak-50);
-  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+.klun-sidebar__sub {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 8px;
+  width: 100%;
 }
-.klun-segmented-control__segment {
-  display: inline-flex;
+.klun-sidebar__sub-item {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 1px 4px 1px 36px;
+}
+.klun-sidebar__sub-button {
+  box-sizing: border-box;
+  display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 6px;
-  flex: 1;
-  height: var(--klun-control-h-sm, 32px);
-  padding: 0 var(--klun-control-px-md, 14px);
-  border: none;
+  width: 100%;
+  height: 40px;
+  padding: 4px 12px;
+  border: 0;
   border-radius: var(--klun-radius-md);
-  cursor: pointer;
-  white-space: nowrap;
   background: transparent;
-  color: var(--klun-text-sub-600);
-  box-shadow: none;
-  font: var(--klun-text-label-sm);
-  transition: background var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease), color var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
+  color: var(--_sub-fg);
+  font-family: var(--klun-font-sans);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: var(--klun-font-weight-regular, 400);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--_color-dur) var(--_color-ease), color var(--_color-dur) var(--_color-ease);
 }
-.klun-segmented-control__segment[aria-selected=true] {
-  background: var(--klun-bg-white-0);
-  color: var(--klun-text-strong-950);
-  box-shadow: var(--klun-shadow-sm);
+.klun-sidebar__sub-button:hover:not(:disabled) {
+  background: var(--_hover);
+  color: var(--_fg);
 }
-.klun-segmented-control__icon {
-  display: inline-flex;
-  font-size: 18px;
+.klun-sidebar__nav-button:disabled,
+.klun-sidebar__item:disabled,
+.klun-sidebar__sub-button:disabled,
+.klun-sidebar__collapse:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.klun-sidebar__nav-button:focus-visible,
+.klun-sidebar__item:focus-visible,
+.klun-sidebar__sub-button:focus-visible,
+.klun-sidebar__collapse:focus-visible {
+  outline: none;
+  box-shadow: var(--klun-shadow-button-important-focus);
+}
+@media (prefers-reduced-motion: reduce) {
+  .klun-sidebar__panel,
+  .klun-sidebar__search,
+  .klun-sidebar__search-input,
+  .klun-sidebar__section-title,
+  .klun-sidebar__item,
+  .klun-sidebar__item-label,
+  .klun-sidebar__item-caret,
+  .klun-sidebar__item-caret i,
+  .klun-sidebar__collapse i {
+    transition: none;
+  }
 }
 
 /* src/components/navigation/StepIndicator.css */
@@ -9697,6 +13903,124 @@ body {
   background: var(--klun-primary-base);
 }
 
+/* src/components/navigation/Stepper.css */
+.klun-stepper {
+  width: 100%;
+}
+.klun-stepper__nav {
+  display: inline-flex;
+  width: 100%;
+}
+.klun-stepper__nav[data-orientation=horizontal] {
+  flex-direction: row;
+}
+.klun-stepper__nav[data-orientation=vertical] {
+  flex-direction: column;
+}
+.klun-stepper__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.klun-stepper__nav[data-orientation=horizontal] > .klun-stepper__item:not(:last-child) {
+  flex: 1;
+}
+.klun-stepper__nav[data-orientation=vertical] > .klun-stepper__item {
+  flex-direction: column;
+}
+.klun-stepper__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  border-radius: var(--klun-radius-pill);
+  cursor: pointer;
+  outline: none;
+}
+.klun-stepper__trigger:focus-visible {
+  position: relative;
+  z-index: 1;
+  box-shadow: var(--klun-shadow-button-important-focus);
+}
+.klun-stepper__trigger:disabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
+.klun-stepper__trigger:not(:disabled):hover .klun-stepper__indicator {
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+}
+.klun-stepper__indicator {
+  position: relative;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  overflow: hidden;
+  border-radius: var(--klun-radius-pill);
+  background: var(--klun-bg-soft-200);
+  color: var(--klun-text-sub-600);
+  font: var(--klun-text-label-xs);
+  transition:
+    background-color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease),
+    color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease),
+    box-shadow var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease);
+}
+.klun-stepper__indicator[data-state=active],
+.klun-stepper__indicator[data-state=completed] {
+  background: var(--klun-primary-base);
+  color: var(--klun-static-static-white, #fff);
+}
+.klun-stepper__indicator i {
+  font-size: 14px;
+  line-height: 1;
+}
+.klun-stepper__separator {
+  flex: 1;
+  border-radius: 2px;
+  background: var(--klun-stroke-soft-200);
+  transition: background-color var(--klun-duration-200, 0.2s) var(--klun-ease-out, ease);
+}
+.klun-stepper__nav[data-orientation=horizontal] .klun-stepper__separator {
+  height: 2px;
+  margin: 0 8px;
+}
+.klun-stepper__nav[data-orientation=vertical] .klun-stepper__separator {
+  flex: none;
+  width: 2px;
+  height: 48px;
+  margin: 8px 0;
+}
+.klun-stepper__separator[data-state=completed] {
+  background: var(--klun-primary-base);
+}
+.klun-stepper__title {
+  margin: 0;
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: var(--klun-font-weight-medium, 500);
+  color: var(--klun-text-strong-950);
+}
+.klun-stepper__description {
+  font: var(--klun-text-paragraph-xs);
+  color: var(--klun-text-sub-600);
+}
+.klun-stepper__nav[data-orientation=vertical] .klun-stepper__trigger {
+  flex-direction: column;
+  text-align: center;
+}
+.klun-stepper__panel {
+  width: 100%;
+  margin-top: 16px;
+}
+.klun-stepper__content {
+  width: 100%;
+}
+
 /* src/components/navigation/Tabs.css */
 .klun-tabs {
   display: flex;
@@ -10415,6 +14739,34 @@ body {
   color: var(--klun-text-soft-400);
 }
 
+/* src/components/overlays/HoverCard.css */
+.klun-hover-card__trigger {
+  display: inline-flex;
+}
+.klun-hover-card__panel {
+  position: fixed;
+  z-index: 1300;
+  width: 256px;
+  padding: 10px;
+  border-radius: var(--klun-radius-lg);
+  background: var(--klun-bg-white-0);
+  color: var(--klun-text-strong-950);
+  font: var(--klun-text-paragraph-sm);
+  box-shadow: var(--klun-shadow-md), inset 0 0 0 1px var(--klun-stroke-soft-200);
+  animation: klun-hover-card-in 120ms var(--klun-ease-out, ease);
+}
+@keyframes klun-hover-card-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .klun-hover-card__panel {
+    animation: none;
+  }
+}
+
 /* src/components/overlays/ImageViewer.css */
 .klun-image-viewer {
   position: fixed;