castle-web-cli 0.4.1 → 0.4.2

package/kits/basic-2d-frozen/engine/ui.module.css

@@ -0,0 +1,928 @@
+@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;
+}
+
+/* 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;
+  }
+}