Align shell actions and icons with Launcher and SEO

packages/tokens/themes.css

@@ -44,12 +44,14 @@
   --nodedc-app-panel-shadow-strong: 0 34px 110px rgba(0, 0, 0, 0.52);
   --nodedc-panel-action-border: rgba(255, 255, 255, 0.22);
   --nodedc-panel-action-border-hover: rgba(255, 255, 255, 0.3);
+  --nodedc-panel-action-bg: transparent;
+  --nodedc-panel-action-shadow: none;
   --nodedc-panel-item-bg: rgba(255, 255, 255, 0.04);
   --nodedc-panel-item-hover-bg: rgba(255, 255, 255, 0.085);
   --nodedc-panel-item-active-bg: rgba(255, 255, 255, 0.115);
   --nodedc-panel-icon-bg: rgba(255, 255, 255, 0.045);
   --nodedc-panel-active-icon-bg: rgba(247, 248, 244, 0.96);
-  --nodedc-panel-active-icon-color: rgb(var(--nodedc-on-accent-rgb));
+  --nodedc-panel-active-icon-color: rgba(8, 8, 10, 0.96);
   --nodedc-scrollbar-thumb: rgba(255, 255, 255, 0.15);
   --nodedc-primary-action-bg: rgb(var(--nodedc-accent-rgb));
   --nodedc-primary-action-hover: color-mix(in srgb, rgb(var(--nodedc-accent-rgb)) 84%, white);
@@ -105,6 +107,8 @@
   --nodedc-app-panel-shadow-strong: 0 18px 44px rgba(0, 0, 0, 0.14);
   --nodedc-panel-action-border: rgba(24, 32, 29, 0.12);
   --nodedc-panel-action-border-hover: rgba(24, 32, 29, 0.22);
+  --nodedc-panel-action-bg: #ffffff;
+  --nodedc-panel-action-shadow: 0 10px 24px rgba(24, 32, 29, 0.08);
   --nodedc-panel-item-bg: #f4f4f4;
   --nodedc-panel-item-hover-bg: #eeeeee;
   --nodedc-panel-item-active-bg: #e8e8e8;

packages/tokens/tokens.css

@@ -25,7 +25,7 @@
   --nodedc-inspector-button-radius: 1rem;
   --nodedc-select-toggle-width: 2.875rem;
   --nodedc-select-gap: 0.5rem;
-  --nodedc-icon-glyph-scale: 0.78;
+  --nodedc-icon-glyph-scale: 1;
 
   --nodedc-space-1: 0.25rem;
   --nodedc-space-2: 0.5rem;

packages/ui-core/styles.css

@@ -1041,6 +1041,11 @@ textarea.nodedc-field__control {
   box-shadow: none;
 }
 
+.nodedc-header__profile .nodedc-icon-button > svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 .nodedc-header__profile-button {
   display: inline-flex;
   min-height: var(--nodedc-header-control-height);
@@ -1307,8 +1312,9 @@ textarea.nodedc-field__control {
   border: 1px solid var(--nodedc-panel-action-border);
   border-radius: var(--nodedc-radius-circle);
   outline: 0;
-  background: transparent;
+  background: var(--nodedc-panel-action-bg);
   color: var(--nodedc-text-secondary);
+  box-shadow: var(--nodedc-panel-action-shadow);
   cursor: pointer;
 }
 
@@ -1319,7 +1325,7 @@ textarea.nodedc-field__control {
   color: var(--nodedc-text-primary);
 }
 
-.nodedc-application-panel[data-expanded="true"] .nodedc-application-panel__action:first-child {
+.nodedc-application-panel__action[data-active="true"] {
   border-color: transparent;
   background: var(--nodedc-glass-control-active);
   color: var(--nodedc-glass-control-active-text);
@@ -1598,6 +1604,10 @@ textarea.nodedc-field__control {
   color: var(--nodedc-panel-active-icon-color);
 }
 
+.nodedc-admin-panel__nav-item[data-active="true"] .nodedc-admin-panel__nav-icon > svg {
+  color: var(--nodedc-panel-active-icon-color);
+}
+
 .nodedc-admin-panel__footer {
   width: calc(100% + 2.2rem);
   margin-inline: -1.1rem;

packages/ui-react/src/ApplicationShell.tsx

@@ -1,6 +1,6 @@
 import type { HTMLAttributes, ReactNode } from "react";
 import { cn } from "./cn.js";
-import { Icon } from "./Icon.js";
+import { Icon, type IconName } from "./Icon.js";
 
 export interface ApplicationShellProps extends Omit<HTMLAttributes<HTMLDivElement>, "content"> {
   header: ReactNode;
@@ -49,10 +49,19 @@ export interface ApplicationPanelProps extends Omit<HTMLAttributes<HTMLElement>,
   expandLabel?: string;
   closeLabel?: string;
   onExpandedChange?: (expanded: boolean) => void;
+  /** Persistent utility actions rendered before expand/close in the panel header. */
+  utilityActions?: ApplicationPanelUtilityAction[];
   onClose: () => void;
   children: ReactNode;
 }
 
+export interface ApplicationPanelUtilityAction {
+  label: string;
+  icon: IconName;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
 export function ApplicationPanel({
   eyebrow,
   title,
@@ -61,6 +70,7 @@ export function ApplicationPanel({
   expandLabel = "Развернуть окно",
   closeLabel = "Закрыть окно",
   onExpandedChange,
+  utilityActions = [],
   onClose,
   children,
   className,
@@ -75,18 +85,33 @@ export function ApplicationPanel({
           {description ? <p>{description}</p> : null}
         </div>
         <div className="nodedc-application-panel__actions">
+          {utilityActions.map((action) => (
+            <button
+              key={action.label}
+              type="button"
+              className="nodedc-application-panel__action"
+              data-action="utility"
+              aria-label={action.label}
+              disabled={action.disabled}
+              onClick={action.onClick}
+            >
+              <Icon name={action.icon} size={16} strokeWidth={1.6} />
+            </button>
+          ))}
           {onExpandedChange ? (
             <button
               type="button"
               className="nodedc-application-panel__action"
+              data-action="expand"
+              data-active={expanded ? "true" : undefined}
               aria-label={expanded ? "Свернуть окно" : expandLabel}
               onClick={() => onExpandedChange(!expanded)}
             >
-              <Icon name={expanded ? "minimize" : "expand"} />
+              <Icon name={expanded ? "minimize" : "expand"} size={16} strokeWidth={1.6} />
             </button>
           ) : null}
-          <button type="button" className="nodedc-application-panel__action" aria-label={closeLabel} onClick={onClose}>
-            <Icon name="close" />
+          <button type="button" className="nodedc-application-panel__action" data-action="close" aria-label={closeLabel} onClick={onClose}>
+            <Icon name="close" size={16} strokeWidth={1.6} />
           </button>
         </div>
       </header>