@forgeax/interface 0.4.1

package/dist/package/browser/components/PanelShell/PanelShell.css

@@ -0,0 +1,517 @@
+.fx-panel-header {
+  position: relative;
+  min-height: var(--fx-panel-header-height, 38px);
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--color-divider-default, var(--color-border-default, #2a2d30));
+  background: rgba(0, 0, 0, 0.16);
+}
+
+/* When a panel hides its dockview tab (single-tab "hideTitle", e.g. the
+   viewport), this header IS the group's top row and sits level with neighbouring
+   groups' 35px tab strips (--dv-tabs-and-actions-container-height). Match that
+   height exactly — and shrink the inner action buttons + vertical padding — so
+   there's no step between this toolbar and adjacent tab bars. Scoped to
+   hideTitle panels only; normal panel headers (which sit BELOW their own tab
+   strip) keep the taller 38px. */
+.fx-panel[data-dock-single-tab="hideTitle"] > .fx-panel-header {
+  box-sizing: border-box;
+  min-height: 0;
+  height: var(--dv-tabs-and-actions-container-height, 35px);
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.fx-panel[data-dock-single-tab="hideTitle"] > .fx-panel-header .fx-panel-action {
+  height: 24px;
+}
+.fx-panel[data-dock-single-tab="hideTitle"] > .fx-panel-header .fx-panel-action[data-has-label="false"] {
+  width: 24px;
+  padding: 4px;
+}
+/* The `control` family (dropdown fields, search box, thumb slider, FPS readout)
+   are the other fixed-26px elements in this row — bring them down to 24px too so
+   every button in the compact viewport header shares one height. */
+.fx-panel[data-dock-single-tab="hideTitle"] > .fx-panel-header .fx-panel-control-field,
+.fx-panel[data-dock-single-tab="hideTitle"] > .fx-panel-header .fx-panel-search-control,
+.fx-panel[data-dock-single-tab="hideTitle"] > .fx-panel-header .fx-panel-thumb-slider {
+  height: 24px;
+}
+/* Some header controls are rendered by the editor via `host.panelControls`, so
+   their inner buttons carry the editor's own classes (not .fx-panel-*) and kept
+   their taller default here. Constrain the interactive element inside ANY
+   `.fx-panel-control` wrapper from the interface side — class-agnostic — so the
+   editor-contributed dropdowns/toggles/readouts also land on 24px. */
+.fx-panel[data-dock-single-tab="hideTitle"] > .fx-panel-header .fx-panel-control {
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+}
+.fx-panel[data-dock-single-tab="hideTitle"] > .fx-panel-header .fx-panel-control button,
+.fx-panel[data-dock-single-tab="hideTitle"] > .fx-panel-header .fx-panel-control select,
+.fx-panel[data-dock-single-tab="hideTitle"] > .fx-panel-header .fx-panel-control [role="button"] {
+  height: 24px;
+  min-height: 24px;
+  box-sizing: border-box;
+}
+
+.fx-panel-header-zone {
+  position: relative;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Zones are content-sized: folding is decided against the header width in JS, so
+   the zones never have to absorb overflow by shrinking. Only the center grows,
+   which keeps it centered in whatever space the sides leave. */
+.fx-panel-header-zone[data-zone="left"] {
+  flex: 0 1 auto;
+  z-index: 2;
+}
+
+.fx-panel-header-zone[data-zone="center"] {
+  flex: 1 1 auto;
+  justify-content: center;
+  z-index: 1;
+}
+
+.fx-panel-header-zone[data-zone="right"] {
+  flex: 0 1 auto;
+  justify-content: flex-end;
+  margin-left: auto;
+  z-index: 2;
+}
+
+.fx-panel-title-block {
+  min-width: 0;
+  flex: 0 1 auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.fx-panel-icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--color-text-tertiary, #778);
+  font-size: 12px;
+}
+
+.fx-panel-title-wrap {
+  min-width: 0;
+  flex: 0 1 auto;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.fx-panel-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-primary, #e8eaed);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.fx-panel-subtitle {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-tertiary, #778);
+  font-size: 11px;
+}
+
+.fx-panel-toolbar {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.fx-panel-toolbar-item {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+/* Overflow-aware toolbar zone: shrinks under flex pressure and clips its
+   visible row; JS folds the surplus buttons into the flyout. flex-basis is
+   pinned to the measured natural width so folding cannot feed back into the
+   allocated width (which would oscillate). */
+.fx-panel-toolbar-overflow {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  flex-wrap: nowrap;
+}
+
+.fx-panel-toolbar-overflow[data-location="header/right"] {
+  justify-content: flex-end;
+}
+
+.fx-panel-toolbar-overflow[data-location="header/center"] {
+  justify-content: center;
+}
+
+/* Keep every item at its natural width so pressure surfaces as real overflow
+   and triggers folding — instead of a shrinkable child (e.g. an ellipsis
+   readout like the FPS control) silently truncating and swallowing the signal. */
+.fx-panel-toolbar-overflow > * {
+  flex: 0 0 auto;
+}
+
+/* Off-screen clone used only to measure each item's natural width. Absolutely
+   positioned so it never contributes to the live container's layout.
+   Prefer translate over visibility:hidden — some Radix-wrapped triggers report
+   0×0 under visibility:hidden/inert, which would permanently exclude them from
+   the fold set (e.g. the viewport "视图预设" control). */
+.fx-panel-overflow-measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translateY(-9999px);
+  opacity: 0;
+  pointer-events: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.fx-panel-overflow-measure-item {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+}
+
+.fx-panel-overflow-flyout {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  /* PopoverContent already provides border/padding/surface — avoid a second
+     inner frame that reads as a stray top divider above the first item. */
+  padding: 6px;
+  border: none;
+  border-radius: 10px;
+  background: var(--color-background-floating);
+  box-shadow: none;
+}
+
+/* Belt-and-suspenders: never paint a separator as the first/last flyout row. */
+.fx-panel-overflow-flyout > .fx-panel-control:first-child:has(.fx-vp-separator),
+.fx-panel-overflow-flyout > .fx-panel-control:last-child:has(.fx-vp-separator) {
+  display: none;
+}
+
+.fx-panel-control {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+}
+
+.fx-panel-control[data-enabled="false"] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.fx-panel-tooltip-trigger {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+}
+
+.fx-panel-tooltip-trigger:has(.fx-panel-action:disabled) .fx-panel-action {
+  pointer-events: none;
+}
+
+.fx-panel-control-field {
+  appearance: none;
+  height: 26px;
+  min-width: 0;
+  border: 1px solid var(--border-soft);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 11.5px;
+  line-height: 1;
+  outline: none;
+}
+
+.fx-panel-control-field:hover {
+  background: var(--sel-neutral);
+  color: var(--color-text-primary);
+}
+
+.fx-panel-control-field:focus,
+.fx-panel-control-field:focus-visible {
+  border-color: var(--border-soft);
+  background: rgba(255, 255, 255, 0.045);
+  color: var(--color-text-primary);
+  box-shadow: none;
+}
+
+.fx-panel-search-control {
+  position: relative;
+  width: 160px;
+  height: 26px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 9px;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: 6px;
+  background: var(--color-background-elevated);
+}
+
+.fx-panel-search-control:focus-within {
+  border-color: var(--color-brand-line, var(--color-brand-primary));
+}
+
+.fx-panel-search-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  outline: none;
+}
+
+.fx-panel-search-input::placeholder {
+  color: var(--text-mute);
+}
+
+.fx-panel-search-input::-webkit-search-cancel-button {
+  appearance: none;
+  display: none;
+}
+
+.fx-panel-sort-control {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.fx-panel-sort-select {
+  width: 94px;
+  padding: 4px 24px 4px 8px;
+}
+
+.fx-panel-sort-select option {
+  background: var(--color-background-floating);
+  color: var(--color-text-primary);
+}
+
+.fx-panel-thumb-control {
+  width: 94px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.fx-panel-thumb-slider {
+  width: 94px;
+  height: 26px;
+  accent-color: var(--primary);
+}
+
+.fx-panel-action {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  min-width: 0;
+  height: 26px;
+  padding: 4px 9px;
+  border: 1px solid var(--border-soft);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text-secondary);
+  cursor: pointer;
+  font: inherit;
+  font-size: 11.5px;
+  line-height: 1;
+}
+
+.fx-panel-action:hover:not(:disabled) {
+  background: var(--sel-neutral);
+  color: var(--color-text-primary);
+}
+
+.fx-panel-action[data-has-label="false"] {
+  width: 26px;
+  padding: 5px;
+}
+
+.fx-panel-action:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.fx-panel-action[data-active="true"] {
+  color: var(--primary);
+  background: rgba(212, 255, 72, 0.08);
+  border-color: rgba(212, 255, 72, 0.4);
+}
+
+.fx-panel-action[data-highlight="true"] {
+  color: var(--primary);
+  background: rgba(212, 255, 72, 0.08);
+  border-color: rgba(212, 255, 72, 0.4);
+  box-shadow: none;
+}
+
+.fx-panel-action[data-active="true"]:hover:not(:disabled),
+.fx-panel-action[data-highlight="true"]:hover:not(:disabled) {
+  color: var(--primary);
+  background: rgba(212, 255, 72, 0.14);
+  border-color: rgba(212, 255, 72, 0.55);
+}
+
+.fx-panel-action-label {
+  max-width: 88px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11.5px;
+}
+
+.fx-panel-menu {
+  min-width: 214px;
+  max-height: min(320px, var(--radix-dropdown-menu-content-available-height));
+  overflow-y: hidden;
+  overflow-x: hidden;
+  padding: 6px;
+  border: 1px solid var(--color-border-default);
+  border-radius: 10px;
+  background: var(--color-background-floating);
+  color: var(--color-text-secondary);
+  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6);
+  animation-duration: 120ms;
+  animation-timing-function: var(--ease-out, var(--motion-ease-out));
+}
+
+.fx-panel-menu-title {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 5px 8px 6px;
+  background: var(--color-background-floating);
+  color: var(--color-text-tertiary);
+  font-family: var(--prim-font-mono, var(--font-mono));
+  font-size: 9.5px;
+  letter-spacing: 0.07em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+.fx-panel-menu-scroll {
+  max-height: 238px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.fx-panel-menu-footer {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  background: var(--color-background-floating);
+}
+
+.fx-panel-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-height: 28px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  outline: none;
+}
+
+.fx-panel-menu-item:hover,
+.fx-panel-menu-item:focus,
+.fx-panel-menu-item[data-highlighted],
+.fx-panel-menu-item[data-highlight="true"] {
+  background: var(--color-interaction-hover);
+  color: var(--color-text-primary);
+}
+
+.fx-panel-menu-checkbox {
+  width: 15px;
+  height: 15px;
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--color-border-default);
+  border-radius: 4px;
+  color: var(--color-text-on-bright-primary);
+}
+
+.fx-panel-menu-tico {
+  width: 16px;
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+}
+
+.fx-panel-menu-item.is-reset .fx-panel-menu-icon {
+  width: 13px;
+  height: 13px;
+  color: var(--color-text-tertiary);
+}
+
+.fx-panel-menu-item.is-reset:hover .fx-panel-menu-icon,
+.fx-panel-menu-item.is-reset:focus .fx-panel-menu-icon,
+.fx-panel-menu-item.is-reset[data-highlighted] .fx-panel-menu-icon {
+  color: var(--color-text-secondary);
+}
+
+.fx-panel-menu-checkbox[data-checked="true"] {
+  border-color: var(--color-brand-primary);
+  background: var(--color-brand-primary);
+}
+
+.fx-panel-menu-icon {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+  color: currentColor;
+  stroke-width: 1.7;
+}
+
+.fx-panel-menu-label {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.fx-panel-menu-source {
+  display: none;
+}
+
+.fx-panel-menu [role="separator"] {
+  height: 1px;
+  margin: 5px 6px;
+  background: var(--color-divider-default);
+}

package/dist/package/browser/components/PanelShell/PanelShell.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+import type { PanelDescriptor } from '../DockShell/panelRenderers';
+import './PanelShell.css';
+export declare function PanelShell({ id, panel, }: {
+    id: string;
+    panel?: PanelDescriptor;
+}): ReactNode;