anentrypoint-design 0.0.183 → 0.0.185

package/dist/247420.css

@@ -4925,6 +4925,21 @@
     display: flex; gap: 4px; width: 100%; min-width: 0;
 }
 .ds-247420 .ds-ep-vec3 > * { flex: 1 1 0; min-width: 0; }
+/* Each axis cell (axis letter + scrub input) must show its full 3-decimal value
+   without clipping. The axis letter is a fixed micro-glyph; the input flexes to
+   fill the rest with tight padding and centered text so 0.000 / -0.0 / 1.000 are
+   always legible even in the narrow 3-up layout. */
+.ds-247420 .ds-ep-vec3 > * {
+    display: flex; align-items: center; gap: 2px;
+}
+.ds-247420 .ds-ep-vec3 .ds-ep-propfield-hint {
+    flex: 0 0 auto; width: 9px; text-align: center;
+    grid-column: auto; font-size: 0.8em; opacity: 0.7;
+}
+.ds-247420 .ds-ep-vec3 .ds-input-bare {
+    flex: 1 1 auto; min-width: 0; width: auto;
+    padding: 2px 4px; text-align: center; text-overflow: clip;
+}
 /* Dense numeric inputs in the inspector — compact, tight radius, mono. */
 .ds-247420 .ds-ep-propfield-value input,
 .ds-247420 .ds-ep-propfield-value .ds-input-bare {
@@ -5755,6 +5770,139 @@
 .ds-247420 .ov-lightbox-video { max-width: 92vw; max-height: 82vh; border-radius: var(--r-1); background: #000; /* true black media letterbox, intentional */ }
 .ds-247420 .ov-lightbox-label { color: var(--on-color); font-size: var(--fs-0, 12px); opacity: .85; }
 
+/* ---------------------------------------------------------------
+   Editor-primitive scrollbars — thin, dark, themed so docked panels
+   don't show a fat light OS scrollbar over the dark engine chrome.
+   --------------------------------------------------------------- */
+.ds-247420 .ds-ep-panel,
+.ds-247420 .ds-ep-panel-body,
+.ds-247420 .ds-ep-tree,
+.ds-247420 .ds-ep-eventlog,
+.ds-247420 .ds-ep-drawer { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
+.ds-247420 .ds-ep-panel ::-webkit-scrollbar,
+.ds-247420 .ds-ep-panel-body::-webkit-scrollbar,
+.ds-247420 .ds-ep-tree::-webkit-scrollbar,
+.ds-247420 .ds-ep-eventlog::-webkit-scrollbar { width: 8px; height: 8px; }
+.ds-247420 .ds-ep-panel ::-webkit-scrollbar-track,
+.ds-247420 .ds-ep-panel-body::-webkit-scrollbar-track,
+.ds-247420 .ds-ep-tree::-webkit-scrollbar-track,
+.ds-247420 .ds-ep-eventlog::-webkit-scrollbar-track { background: transparent; }
+.ds-247420 .ds-ep-panel ::-webkit-scrollbar-thumb,
+.ds-247420 .ds-ep-panel-body::-webkit-scrollbar-thumb,
+.ds-247420 .ds-ep-tree::-webkit-scrollbar-thumb,
+.ds-247420 .ds-ep-eventlog::-webkit-scrollbar-thumb {
+    background: var(--rule); border-radius: var(--r-pill, 999px);
+    border: 2px solid transparent; background-clip: padding-box;
+}
+.ds-247420 .ds-ep-panel ::-webkit-scrollbar-thumb:hover,
+.ds-247420 .ds-ep-panel-body::-webkit-scrollbar-thumb:hover {
+    background: var(--panel-text-3, var(--rule)); background-clip: padding-box;
+}
+
+/* ---------------------------------------------------------------
+   Dense app-prop inputs — color swatch + checkbox sized to match the
+   engine-editor density (raw browser controls otherwise read as jank).
+   --------------------------------------------------------------- */
+/* Specificity bump (.ds-ep-propfield-value prefix) so the sized swatch/check win
+   over the generic `.ds-ep-propfield-value input { width:100% }` rule — otherwise
+   a color/checkbox app-prop stretches to the full field width and reads as jank. */
+.ds-247420 .ds-ep-propfield-value input.ds-input-color { width: 28px; flex: 0 0 auto; }
+.ds-247420 .ds-ep-propfield-value input.ds-input-check { width: 16px; flex: 0 0 auto; }
+.ds-247420 .ds-input-color {
+    appearance: none; -webkit-appearance: none;
+    width: 28px; height: 22px; padding: 0;
+    border: 1px solid var(--rule); border-radius: var(--r-1, 4px);
+    background: var(--panel-2); cursor: pointer; flex-shrink: 0;
+}
+.ds-247420 .ds-input-color::-webkit-color-swatch-wrapper { padding: 2px; }
+.ds-247420 .ds-input-color::-webkit-color-swatch { border: none; border-radius: 2px; }
+.ds-247420 .ds-input-color:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-247420 .ds-input-check {
+    appearance: none; -webkit-appearance: none;
+    width: 16px; height: 16px; flex-shrink: 0;
+    border: 1px solid var(--rule); border-radius: var(--r-1, 4px);
+    background: var(--panel-2); cursor: pointer; position: relative;
+}
+.ds-247420 .ds-input-check:checked { background: var(--accent); border-color: var(--accent); }
+.ds-247420 .ds-input-check:checked::after {
+    content: ''; position: absolute; left: 4px; top: 1px;
+    width: 4px; height: 8px; border: solid var(--accent-fg, #fff);
+    border-width: 0 2px 2px 0; transform: rotate(45deg);
+}
+.ds-247420 .ds-input-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* ---------------------------------------------------------------
+   Tree drag-reparent affordance — clear drop target + dragging row.
+   useDropTarget marks the active row with [data-drop-target-active]; the
+   dragged source carries [data-dragging]. Both surfaced as visible state so a
+   reparent drag shows exactly where it will land.
+   --------------------------------------------------------------- */
+.ds-247420 .ds-ep-tree-item[data-drop-target-active] > .ds-ep-tree-row,
+.ds-247420 .ds-ep-tree-row[data-drop-target-active],
+.ds-247420 .ds-ep-tree-row.drag-over {
+    background: color-mix(in oklab, var(--accent) 22%, transparent);
+    box-shadow: inset 0 0 0 1px var(--accent);
+}
+.ds-247420 .ds-ep-panel-body[data-drop-target-active] {
+    box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 50%, transparent);
+}
+.ds-247420 .ds-ep-tree-item[data-dragging] > .ds-ep-tree-row,
+.ds-247420 .ds-ep-tree-item.dragging > .ds-ep-tree-row { opacity: 0.5; }
+
+/* ---------------------------------------------------------------
+   Floating editor docks — the non-occluding idiom. The game/3D
+   viewport fills the whole editor stage; the hierarchy + inspector
+   ride over it as translucent, backdrop-blurred, collapsible cards
+   so the play area stays visible (and clickable) behind them. The
+   dock layer is pointer-events:none; only the dock cards capture
+   input, so the exposed viewport gutter clicks through to the canvas.
+   --------------------------------------------------------------- */
+.ds-247420 .ds-ep-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
+.ds-247420 .ds-ep-dock-layer { display: block; }
+.ds-247420 .ds-ep-dock {
+    position: absolute; top: 8px; bottom: 8px;
+    display: flex; flex-direction: column;
+    width: 280px; max-width: calc(50% - 12px);
+    pointer-events: all;
+    background: color-mix(in oklab, var(--panel-1) 82%, transparent);
+    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
+    border: 1px solid var(--rule);
+    border-radius: var(--r-2, 8px);
+    box-shadow: 0 6px 24px color-mix(in oklab, #000 28%, transparent);
+    color: var(--panel-text);
+    overflow: hidden;
+}
+.ds-247420 .ds-ep-dock-left { left: 8px; }
+.ds-247420 .ds-ep-dock-right { right: 8px; }
+/* Collapsed: shrink to just the header strip, freeing the viewport. */
+.ds-247420 .ds-ep-dock.collapsed { bottom: auto; height: auto; }
+.ds-247420 .ds-ep-dock-head {
+    display: flex; align-items: center; gap: 6px;
+    flex: 0 0 auto; padding: 4px 6px 4px 10px;
+    border-bottom: 1px solid var(--rule);
+    background: color-mix(in oklab, var(--panel-1) 60%, transparent);
+}
+.ds-247420 .ds-ep-dock.collapsed .ds-ep-dock-head { border-bottom: 0; }
+.ds-247420 .ds-ep-dock-title {
+    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    font: 8px/1 var(--ff-mono, monospace); text-transform: uppercase; letter-spacing: 0.12em;
+    color: var(--panel-text-3);
+}
+.ds-247420 .ds-ep-dock-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: transparent; }
+.ds-247420 .ds-ep-dock-body.hidden { display: none; }
+/* The right dock's body reuses .ds-ep-panel but must stay transparent so the
+   dock's own translucency/blur shows the game view through. */
+.ds-247420 .ds-ep-dock-body.ds-ep-panel { background: transparent; }
+
+/* Mobile: docks become full-width bottom-anchored sheets so they don't crowd
+   the narrow viewport side-by-side; the viewport still fills the stage behind. */
+@media (max-width: 760px) {
+    .ds-247420 .ds-ep-dock { width: auto; max-width: none; left: 6px; right: 6px; top: auto; bottom: 6px; max-height: 46vh; }
+    .ds-247420 .ds-ep-dock-left { bottom: calc(46vh + 12px); max-height: 40vh; }
+    .ds-247420 .ds-ep-dock.collapsed { bottom: auto; }
+    .ds-247420 .ds-ep-dock-left.collapsed { top: 6px; bottom: auto; }
+}
+
 /* community-app.css */
 /* community-app.css — layout glue for mountCommunityApp (the full chat/community
    app GUI). Reuses the canonical app/body/main classes from app-shell.css and