castle-web-cli 0.4.75 → 0.4.76

package/kits/basic-3d/engine/ui.module.css

@@ -1,944 +0,0 @@
-@font-face {
-  font-family: 'Basteleur';
-  src:
-    url('/Basteleur-Bold.woff2') format('woff2'),
-    url('/Basteleur-Bold.woff') format('woff');
-}
-
-:global(:root) {
-  --castle-font-body:
-    baltomobile, Balto, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    sans-serif;
-  --castle-font-display: var(--castle-font-body);
-  --castle-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
-  --castle-black: #000;
-  --castle-tap-highlight: #111;
-  --castle-panel: #080808;
-  --castle-panel-raised: #101010;
-  --castle-panel-sunken: #050505;
-  --castle-border: #444;
-  --castle-border-soft: #252525;
-  --castle-text: #fff;
-  --castle-text-dim: #777;
-  --castle-text-muted: #aaa;
-  --castle-inspector-bg: #fff;
-  --castle-inspector-text: #222;
-  --castle-inspector-muted: #888;
-  --castle-inspector-border: #000;
-  --castle-inspector-divider: #ccc;
-  --castle-inspector-input-bg: #fff;
-  --castle-inspector-button-bg: #fff;
-  --castle-workspace-bg: #f0f0f0;
-  --castle-stage-workspace-bg: #ddd;
-  --castle-sheet-bg: #fff;
-  --castle-card: #121213;
-  --castle-selected: #e3e6ff;
-  --castle-selected-ink: #242234;
-  --castle-danger: #ff5d5d;
-  --castle-ok: #81e69b;
-  --castle-blue: #8db7ff;
-  --castle-radius: 4px;
-}
-
-:global(*) {
-  box-sizing: border-box;
-}
-
-:global(html),
-:global(body),
-:global(#root) {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-}
-
-:global(body) {
-  overflow: hidden;
-  background: var(--castle-workspace-bg);
-  color: var(--castle-inspector-text);
-  font-family: var(--castle-font-body);
-  -webkit-font-smoothing: antialiased;
-}
-
-:global(button),
-:global(input),
-:global(select),
-:global(textarea) {
-  font: inherit;
-}
-
-:global(button),
-:global(input),
-:global(select),
-:global(textarea),
-:global([tabindex]) {
-  outline: none;
-}
-
-:global(*:focus),
-:global(*:focus-visible) {
-  outline: none;
-}
-
-.appShell {
-  width: 100vw;
-  height: 100vh;
-  display: grid;
-  grid-template-columns: 236px 1fr;
-  background: var(--castle-workspace-bg);
-  color: var(--castle-inspector-text);
-}
-
-.fileBrowser {
-  min-width: 0;
-  border-right: 1px solid var(--castle-inspector-divider);
-  background: var(--castle-workspace-bg);
-  display: flex;
-  flex-direction: column;
-}
-
-.fileBrowserHeader,
-.editorHeader {
-  height: 48px;
-  flex: 0 0 48px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--castle-inspector-divider);
-  background: var(--castle-sheet-bg);
-}
-
-.fileBrowserTitle,
-.editorTitle {
-  font-family: var(--castle-font-display);
-  letter-spacing: 0.01em;
-  font-size: 16px;
-  line-height: 1;
-}
-
-.fileBrowserSubtitle,
-.muted {
-  color: var(--castle-inspector-muted);
-  font-size: 12px;
-}
-
-.fileTree {
-  flex: 1 1 0;
-  min-height: 0;
-  padding: 8px 6px;
-  overflow-y: auto;
-}
-
-.fileBranch {
-  min-width: 0;
-}
-
-.fileRow,
-.fileDirRow {
-  width: 100%;
-  border: 0;
-  border-radius: var(--castle-radius);
-  background: transparent;
-  color: var(--castle-inspector-text);
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 6px;
-  padding: 8px 9px 8px calc(9px + var(--file-depth, 0) * 16px);
-  text-align: left;
-  cursor: pointer;
-}
-
-.fileDirRow {
-  color: var(--castle-inspector-muted);
-}
-
-.fileRow:hover,
-.fileDirRow:hover {
-  background: var(--castle-sheet-bg);
-  color: var(--castle-inspector-text);
-}
-
-.fileRowSelected {
-  background: var(--castle-sheet-bg);
-  color: var(--castle-inspector-text);
-}
-
-.fileRowSelected:hover {
-  background: var(--castle-sheet-bg);
-  color: var(--castle-inspector-text);
-}
-
-.fileDisclosure {
-  width: 12px;
-  flex: 0 0 12px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--castle-inspector-muted);
-  font-size: 10px;
-}
-
-.mainEditor {
-  min-width: 0;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  background: var(--castle-sheet-bg);
-}
-
-.editorHeader {
-  justify-content: space-between;
-}
-
-.editorHeaderLeft,
-.editorHeaderRight,
-.toolbar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.editorBody {
-  min-height: 0;
-  flex: 1;
-  display: flex;
-  overflow: hidden;
-}
-
-.sceneWorkspace {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-  display: grid;
-  grid-template-columns: minmax(360px, 1fr) 320px;
-  grid-template-rows: 48px minmax(0, 1fr);
-}
-
-.sceneTools,
-.drawingTools {
-  grid-column: 1;
-  grid-row: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--castle-inspector-divider);
-  background: var(--castle-sheet-bg);
-}
-
-.sceneTools {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  gap: 8px;
-}
-
-.sceneToolsGroup {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.sceneToolsGroup:last-child {
-  justify-self: end;
-}
-
-.stageWrap {
-  grid-column: 1;
-  grid-row: 2;
-  min-width: 0;
-  min-height: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  background: var(--castle-stage-workspace-bg);
-}
-
-.stageCard {
-  position: relative;
-  width: min(52vh, 440px);
-  aspect-ratio: 5 / 7;
-  max-width: calc(100vw - 620px);
-  background: var(--castle-card);
-  border: 1px solid var(--castle-inspector-border);
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
-}
-
-.stageCanvas {
-  width: 100%;
-  height: 100%;
-  display: block;
-  touch-action: none;
-}
-
-/* Full-bleed stage -- edit mode fills the workspace; play mode keeps the
-   5:7 card so the deck previews at its real aspect. */
-.stageWrapFull {
-  padding: 0;
-}
-
-.stageWrapFull .stageCard {
-  width: 100%;
-  height: 100%;
-  max-width: none;
-  aspect-ratio: auto;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-}
-
-/* Game-time UI overlay -- sits exactly over the canvas and clips to the card.
-   Behavior `ui` output lands in `.sceneUiLayer`, which is sized in card units
-   and scaled onto the canvas box. */
-.sceneUiRoot {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  pointer-events: none;
-}
-
-.sceneUiLayer {
-  position: absolute;
-  left: 0;
-  top: 0;
-  transform-origin: 0 0;
-}
-
-.inspector {
-  grid-column: 2;
-  grid-row: 1 / span 2;
-  min-width: 0;
-  border-left: 1px solid var(--castle-inspector-divider);
-  background: var(--castle-inspector-bg);
-  color: var(--castle-inspector-text);
-  overflow: auto;
-  padding: 0;
-}
-
-.panel {
-  border: 0;
-  border-bottom: 1px solid var(--castle-inspector-divider);
-  border-radius: 0;
-  background: var(--castle-inspector-bg);
-  color: var(--castle-inspector-text);
-  margin: 0;
-  overflow: visible;
-  box-shadow: none;
-}
-
-.panel:last-child {
-  border-bottom: 0;
-}
-
-.panelHeader {
-  padding: 14px 16px 6px;
-  border-bottom: 0;
-  color: var(--castle-inspector-text);
-  font-size: 16px;
-  font-weight: 650;
-}
-
-.panelBody {
-  padding: 8px 16px 4px;
-}
-
-.fieldRow {
-  display: grid;
-  grid-template-columns: minmax(82px, 0.5fr) minmax(0, 1fr);
-  align-items: center;
-  gap: 12px;
-  padding-bottom: 12px;
-  margin-bottom: 0;
-  min-height: 28px;
-}
-
-.fieldRow:last-child {
-  margin-bottom: 0;
-}
-
-.fieldLabel {
-  color: var(--castle-inspector-text);
-  font-size: 16px;
-}
-
-.input,
-.select,
-.textarea {
-  width: 100%;
-  border: 1px solid var(--castle-inspector-border);
-  border-radius: var(--castle-radius);
-  background: var(--castle-inspector-input-bg);
-  color: var(--castle-inspector-text);
-  padding: 5px 8px;
-  outline: 0;
-}
-
-.select {
-  appearance: none;
-  -webkit-appearance: none;
-  padding-right: 26px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23222' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  text-overflow: ellipsis;
-}
-
-.numberField {
-  position: relative;
-  width: 100%;
-}
-
-.numberInput {
-  padding-right: 22px;
-  appearance: textfield;
-  -moz-appearance: textfield;
-}
-
-.numberInput::-webkit-inner-spin-button,
-.numberInput::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  appearance: none;
-  margin: 0;
-}
-
-.numberSteppers {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  bottom: 1px;
-  width: 18px;
-  display: flex;
-  flex-direction: column;
-  border-left: 1px solid var(--castle-inspector-divider);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.1s;
-}
-
-.numberField:hover .numberSteppers,
-.numberField:focus-within .numberSteppers {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.numberStepper {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  padding: 0;
-  background: transparent;
-  color: var(--castle-inspector-muted);
-  cursor: pointer;
-  font-size: 8px;
-  line-height: 1;
-}
-
-.numberStepper:first-child {
-  border-bottom: 1px solid var(--castle-inspector-divider);
-}
-
-.numberStepper:hover {
-  background: #eee;
-  color: var(--castle-inspector-text);
-}
-
-.numberStepper:disabled {
-  opacity: 0.3;
-  cursor: default;
-  background: transparent;
-}
-
-.colorInput {
-  width: 100%;
-  height: 28px;
-  border: 1px solid var(--castle-inspector-border);
-  border-radius: var(--castle-radius);
-  background: var(--castle-inspector-input-bg);
-  padding: 2px;
-  outline: 0;
-  cursor: pointer;
-}
-
-.toggle {
-  width: 44px;
-  height: 24px;
-  border: 1px solid var(--castle-inspector-border);
-  border-radius: 999px;
-  background: #fff;
-  padding: 2px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-}
-
-.toggleOn {
-  background: var(--castle-black);
-  justify-content: flex-end;
-}
-
-.toggleKnob {
-  width: 18px;
-  height: 18px;
-  border-radius: 999px;
-  background: var(--castle-black);
-}
-
-.toggleOn .toggleKnob {
-  background: var(--castle-text);
-}
-
-.textarea {
-  min-height: 0;
-  resize: none;
-  font-family: var(--castle-font-mono);
-  font-size: 12px;
-  line-height: 1.45;
-}
-
-.button {
-  border: 1px solid var(--castle-inspector-border);
-  border-radius: var(--castle-radius);
-  background: var(--castle-inspector-button-bg);
-  color: var(--castle-inspector-text);
-  padding: 6px 10px;
-  cursor: pointer;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-}
-
-.iconButton {
-  width: 34px;
-  height: 34px;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.iconButton svg {
-  width: 1em;
-  height: 1em;
-}
-
-.button:hover {
-  background: #eee;
-}
-
-.buttonPrimary,
-.buttonActive {
-  background: var(--castle-black);
-  border-color: var(--castle-black);
-  color: var(--castle-text);
-}
-
-.buttonPrimary:hover,
-.buttonActive:hover {
-  background: var(--castle-black);
-  border-color: var(--castle-black);
-  color: var(--castle-text);
-}
-
-.buttonDanger {
-  color: var(--castle-danger);
-}
-
-.button:disabled {
-  opacity: 0.35;
-  cursor: default;
-}
-
-.actorList {
-  display: grid;
-  gap: 4px;
-}
-
-.actorRow {
-  width: 100%;
-  border: 1px solid transparent;
-  background: transparent;
-  color: var(--castle-inspector-text);
-  border-radius: var(--castle-radius);
-  padding: 7px 8px;
-  text-align: left;
-  cursor: pointer;
-}
-
-.actorRowSelected {
-  background: var(--castle-black);
-  border-color: var(--castle-black);
-  color: var(--castle-text);
-}
-
-.drawingEditor,
-.codeEditor {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-  display: grid;
-  grid-template-columns: minmax(320px, 1fr) 280px;
-  background: var(--castle-workspace-bg);
-}
-
-.drawingEditor {
-  grid-template-rows: 48px minmax(0, 1fr);
-}
-
-.drawingCanvasWrap {
-  grid-column: 1;
-  grid-row: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  min-width: 0;
-  min-height: 0;
-}
-
-.drawingCanvas {
-  image-rendering: pixelated;
-  background:
-    linear-gradient(45deg, #ddd 25%, transparent 25%),
-    linear-gradient(-45deg, #ddd 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #ddd 75%),
-    linear-gradient(-45deg, transparent 75%, #ddd 75%);
-  background-size: 16px 16px;
-  background-position:
-    0 0,
-    0 8px,
-    8px -8px,
-    -8px 0;
-  border: 1px solid var(--castle-inspector-border);
-  max-width: min(70vh, 520px);
-  max-height: min(70vh, 520px);
-}
-
-.palette {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 6px;
-  padding-bottom: 12px;
-}
-
-.swatch {
-  aspect-ratio: 1;
-  border: 1px solid var(--castle-inspector-border);
-  border-radius: var(--castle-radius);
-  cursor: pointer;
-}
-
-.swatchSelected {
-  outline: 2px solid var(--castle-black);
-  outline-offset: 1px;
-}
-
-.codeEditor {
-  grid-template-columns: 1fr;
-}
-
-.codeMirrorHost {
-  min-width: 0;
-  min-height: 0;
-  height: 100%;
-}
-
-.headerFilesButton {
-  width: 34px;
-  height: 34px;
-  border: 1px solid var(--castle-inspector-border);
-  border-radius: var(--castle-radius);
-  background: var(--castle-inspector-button-bg);
-  color: var(--castle-inspector-text);
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 34px;
-}
-
-.headerFilesButton[aria-pressed='true'] {
-  background: var(--castle-black);
-  border-color: var(--castle-black);
-  color: var(--castle-text);
-}
-
-/* mobileOnly comes AFTER element-specific rules so `display: none` wins on desktop. */
-.mobileOnly,
-.headerFilesButton,
-.sheetBackdrop,
-.sheetGrab,
-.sheetGrabBar,
-.sheetGrabLabelRow,
-.sheetGrabLabel,
-.sheetGrabHint {
-  display: none;
-}
-
-@media (max-width: 860px) {
-  :root {
-    --sheet-high-height: 62vh;
-    --sheet-low-height: 18vh;
-  }
-
-  /* `display: contents` makes wrapper spans transparent in layout so their
-     children become direct flex items of the parent (gap applies, etc). */
-  .mobileOnly {
-    display: contents;
-  }
-
-  .headerFilesButton {
-    display: inline-flex;
-  }
-
-  /* Backdrop sits below the header so the files toggle stays interactive. */
-  .sheetBackdrop {
-    display: block;
-    position: fixed;
-    top: 52px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 30;
-    background: transparent;
-  }
-
-  .appShell {
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    position: relative;
-  }
-
-  .mainEditor {
-    grid-column: 1;
-    grid-row: 1;
-    min-height: 0;
-  }
-
-  /* Header: title (left, compact) + centered icon group (right slot includes files button). */
-  .editorHeader {
-    height: 52px;
-    flex: 0 0 52px;
-    padding: 8px 10px;
-    gap: 8px;
-    justify-content: space-between;
-  }
-
-  .editorHeaderLeft {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .editorHeaderRight {
-    flex: 0 0 auto;
-    justify-content: flex-end;
-    gap: 14px;
-  }
-
-  .editorTitle {
-    font-size: 15px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .muted {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  /* Hide the desktop tools row on mobile -- buttons live in the header instead. */
-  .sceneTools,
-  .drawingTools {
-    display: none;
-  }
-
-  .sceneWorkspace {
-    grid-template-columns: 1fr;
-    grid-template-rows: minmax(0, 1fr);
-  }
-
-  .drawingEditor {
-    grid-template-columns: 1fr;
-    grid-template-rows: minmax(0, 1fr);
-  }
-
-  .stageWrap {
-    grid-column: 1;
-    grid-row: 1;
-    align-items: flex-start;
-    padding: 10px 12px 12px;
-    background: var(--castle-stage-workspace-bg);
-  }
-
-  .stageCard {
-    max-width: min(92vw, 480px);
-    max-height: 100%;
-    width: auto;
-  }
-
-  /* Drawing centers higher in the canvas region -- around the 1/3-from-top mark. */
-  .drawingCanvasWrap {
-    grid-column: 1;
-    grid-row: 1;
-    align-items: flex-start;
-    padding: 6vh 16px 16px;
-  }
-
-  .drawingCanvas {
-    max-width: min(82vw, 480px);
-    max-height: min(54vh, 480px);
-  }
-
-  /* File-browser + inspector sheets share fixed-bottom positioning, height,
-     transform/transition, and chrome. Per-sheet differences (z-index, side
-     border, background, padding) follow in dedicated rules below. */
-  .fileBrowser,
-  .inspector {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: var(--sheet-high-height);
-    transform: translateY(100%);
-    transition:
-      transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
-      height 0.28s cubic-bezier(0.32, 0.72, 0, 1);
-    border-top: 1px solid var(--castle-inspector-divider);
-    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-  }
-
-  /* File-browser sheet: hidden off-screen by default; slides up to high snap. */
-  .fileBrowser {
-    z-index: 50;
-    border-right: 0;
-    background: var(--castle-sheet-bg);
-  }
-
-  .fileBrowser[data-sheet-snap='high'] {
-    transform: translateY(0);
-  }
-
-  /* Hide the desktop fileBrowserHeader on mobile (the grab handle replaces it). */
-  .fileBrowserHeader {
-    display: none;
-  }
-
-  .fileTree {
-    flex: 1 1 0;
-    min-height: 0;
-    overflow-y: auto;
-    padding: 4px 6px 12px;
-  }
-
-  /* Inspector sheet: hidden off-screen by default; slides up to high (full) or low (partial). */
-  .inspector {
-    z-index: 45;
-    border-left: 0;
-    background: var(--castle-inspector-bg);
-    padding: 0;
-  }
-
-  .inspector[data-sheet-snap='high'] {
-    transform: translateY(0);
-    height: var(--sheet-high-height);
-  }
-
-  .inspector[data-sheet-snap='low'] {
-    transform: translateY(0);
-    height: var(--sheet-low-height);
-  }
-
-  /* Auto-height variant -- inspector hugs its content at the high snap (drawing/code). */
-  .inspector.inspectorAuto[data-sheet-snap='high'] {
-    height: auto;
-    max-height: var(--sheet-high-height);
-  }
-
-  /* Shared sheet chrome -- grab bar pill + label row. Always visible when sheet is visible. */
-  .sheetGrab {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: center;
-    flex: 0 0 auto;
-    padding: 8px 14px 8px;
-    cursor: grab;
-    user-select: none;
-    touch-action: none;
-    background: var(--castle-sheet-bg);
-    border-bottom: 1px solid var(--castle-inspector-divider);
-  }
-
-  .inspector .sheetGrab {
-    background: var(--castle-inspector-bg);
-  }
-
-  .sheetGrabBar {
-    display: block;
-    width: 36px;
-    height: 4px;
-    border-radius: 999px;
-    background: var(--castle-inspector-divider);
-    margin: 0 auto 8px;
-    flex: 0 0 4px;
-  }
-
-  .sheetGrabLabelRow {
-    display: flex;
-    align-items: baseline;
-    gap: 8px;
-    min-width: 0;
-  }
-
-  .sheetGrabLabel {
-    display: inline;
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--castle-inspector-text);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .sheetGrabHint {
-    display: inline;
-    font-size: 12px;
-    color: var(--castle-inspector-muted);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-  }
-
-  .sheetBody {
-    flex: 1;
-    min-height: 0;
-    overflow: auto;
-  }
-
-  .inspectorBody {
-    background: var(--castle-inspector-bg);
-  }
-
-  .codeInspectorInfo {
-    display: grid;
-    grid-template-columns: 80px 1fr;
-    gap: 6px 12px;
-    padding: 14px 16px;
-    font-size: 13px;
-    color: var(--castle-inspector-text);
-    word-break: break-all;
-  }
-}