castle-web-cli 0.4.180 → 0.4.182

package/kits/physics-2d/engine/ui.module.css

@@ -1741,113 +1741,11 @@
   padding: 8px 16px 4px;
 }
 
-/* The field styles from here down (.fieldRow through the numpad and checkbox
-   rules) are COPIED into cli/src/shell/kitPanels.css, scoped there to
-   .castle-params-panel, so the shell's Params view renders identically to this
-   inspector. Nothing enforces it -- change one, change the other. See the
-   matching note above the field components in ui.jsx. */
-.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: 14px;
-}
-
-/* Instance override: purple label + input border, plus a "Default: X [Reset]"
-   sub-line rendered below the control (see FieldRow). */
-.fieldLabelOverridden {
-  color: var(--castle-override);
-}
-
-.fieldRowOverridden .input,
-.fieldRowOverridden .select,
-.fieldRowOverridden .textarea,
-.fieldRowOverridden .colorInput,
-.fieldRowOverridden .checkbox {
-  border-color: var(--castle-override-border);
-}
-
-.fieldOverride {
-  padding-bottom: 12px;
-}
-
-.fieldOverride .fieldRow {
-  padding-bottom: 4px;
-}
-
-/* A muted line of explanation under a field, sitting in the control column the
-   same way the override sub-line above does. For a prop whose name can't carry
-   its own meaning -- see `hint` in a behavior's propertyMeta. */
-.fieldNote {
-  display: grid;
-  grid-template-columns: minmax(82px, 0.5fr) minmax(0, 1fr);
-  gap: 12px;
-  margin-top: -6px;
-  padding-bottom: 12px;
-}
-
-.fieldNoteInner {
-  grid-column: 2;
-  min-width: 0;
-  font-size: 12px;
-  line-height: 1.35;
-  color: var(--castle-inspector-muted);
-}
-
-.fieldDefault {
-  display: grid;
-  grid-template-columns: minmax(82px, 0.5fr) minmax(0, 1fr);
-  gap: 12px;
-}
-
-.fieldDefaultInner {
-  grid-column: 2;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  font-size: 12px;
-  color: var(--castle-inspector-muted);
-}
-
-.fieldDefaultInner > span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.fieldResetBtn {
-  margin-left: auto;
-  border: 0;
-  padding: 0;
-  background: transparent;
-  color: var(--castle-override);
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.fieldResetBtn:hover {
-  color: var(--castle-inspector-text);
-}
-
-.input,
+/* --field-border is set by an overridden FieldRow (fields/fields.module.css). */
 .select,
 .textarea {
   width: 100%;
-  border: 1px solid var(--castle-inspector-border);
+  border: 1px solid var(--field-border, var(--castle-inspector-border));
   border-radius: var(--castle-radius);
   background: var(--castle-inspector-input-bg);
   color: var(--castle-inspector-text);
@@ -2061,277 +1959,6 @@
   background: var(--castle-inspector-input-bg);
 }
 
-.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: 14px;
-  line-height: 1;
-}
-
-.numberStepper:first-child {
-  border-bottom: 1px solid var(--castle-inspector-divider);
-}
-
-/* Number fields are drag scrubbers: drag the field to change the value — a bounded
-   field (min AND max) maps the pointer across [min,max] like a slider and shows a
-   fill; an unbounded field scrubs relatively and into negatives — tap to type. The
-   input sits transparent on top and only takes pointer events while editing, so a
-   drag reaches the box; a tap focuses it (JS) to raise the keyboard. */
-/* Number fields are drag scrubbers with a tap-to-open custom numpad (no native
-   keyboard). A bounded field (min AND max) is a slider with fill + thumb; an
-   unbounded one shows a grip and scrubs into negatives. touch-action: pan-y (set
-   inline) lets a vertical drag scroll the field list while horizontal scrubs. */
-.numberScrub {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  overflow: hidden;
-  padding: 5px 8px;
-  cursor: ew-resize;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.numberSlider {
-  cursor: pointer;
-}
-
-.numberValue {
-  position: relative;
-  z-index: 1;
-  flex: 1 1 auto;
-  min-width: 0;
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-.scrubGrip {
-  position: relative;
-  z-index: 1;
-  flex: 0 0 auto;
-  color: var(--castle-inspector-muted);
-  font-size: 12px;
-  line-height: 1;
-  letter-spacing: -2px;
-  opacity: 0.4;
-}
-
-/* Value bubble that floats above the finger while scrubbing (the finger covers the
-   field, so the live number needs to show somewhere visible). */
-.scrubBubble {
-  position: fixed;
-  z-index: 1001;
-  transform: translate(-50%, -100%);
-  padding: 3px 10px;
-  border-radius: 8px;
-  background: rgba(20, 24, 30, 0.96);
-  border: 1px solid var(--castle-inspector-border);
-  color: var(--castle-inspector-text);
-  font-size: 15px;
-  font-variant-numeric: tabular-nums;
-  pointer-events: none;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
-}
-
-.sliderFill {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  background: rgba(90, 140, 210, 0.3);
-  pointer-events: none;
-  z-index: 0;
-}
-
-.sliderThumb {
-  position: absolute;
-  top: 50%;
-  width: 3px;
-  height: 60%;
-  border-radius: 2px;
-  background: rgba(150, 190, 240, 0.95);
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-  z-index: 1;
-}
-
-/* Custom numeric pad, shown as a bottom sheet. */
-.numpadBackdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  background: rgba(0, 0, 0, 0.35);
-}
-
-.numpadSheet {
-  background: var(--castle-inspector-bg, #16181d);
-  border-top: 1px solid var(--castle-inspector-border);
-  border-radius: 14px 14px 0 0;
-  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
-  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
-}
-
-.numpadValueRow {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 6px 8px 12px;
-}
-
-/* Label and number are one value line, not a caption plus a value — same size
-   and color. A long label (e.g. "Friction Static") truncates rather than
-   pushing the number off, which is why the number never shrinks. */
-.numpadValueLabel {
-  color: var(--castle-inspector-text);
-  font-size: 22px;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.numpadValueNum {
-  flex: 0 0 auto;
-  color: var(--castle-inspector-text);
-  font-size: 22px;
-  font-variant-numeric: tabular-nums;
-}
-
-.numpadGrid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 8px;
-}
-
-.numpadKey {
-  height: 52px;
-  border: 1px solid var(--castle-inspector-border);
-  border-radius: 10px;
-  background: var(--castle-inspector-input-bg);
-  color: var(--castle-inspector-text);
-  font-size: 20px;
-  cursor: pointer;
-  touch-action: manipulation;
-}
-
-.numpadKey:active {
-  background: var(--castle-inspector-divider);
-}
-
-.numpadKeyZero {
-  grid-column: span 3;
-}
-
-.numpadKeyDone {
-  background: rgba(90, 140, 210, 0.9);
-  border-color: transparent;
-  color: #fff;
-  font-size: 16px;
-}
-
-.numberStepper:hover {
-  background: var(--castle-inspector-input-bg);
-  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;
-}
-
-.checkbox {
-  width: 20px;
-  height: 20px;
-  flex: 0 0 auto;
-  justify-self: end;
-  border: 1px solid var(--castle-inspector-border);
-  border-radius: var(--castle-radius);
-  background: var(--castle-inspector-input-bg);
-  padding: 0;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: none;
-  color: var(--castle-text);
-}
-
-.checkboxOn {
-  background: var(--castle-black);
-}
-
-.checkboxMark {
-  display: none;
-  width: 12px;
-  height: 12px;
-}
-
-.checkboxOn .checkboxMark {
-  display: block;
-}
-
 .textarea {
   min-height: 0;
   resize: vertical;

package/kits/physics-2d/package.json

@@ -7,7 +7,7 @@
     "palette": "node scripts/palette.mjs",
     "restart": "node ../../cli/dist/index.js restart .",
     "screenshot": "node ../../cli/dist/index.js screenshot .",
-    "check": "eslint . && jscpd && node --input-type=module -e \"const { bundleProject } = await import('../../cli/dist/bundle.js'); await bundleProject('.');\""
+    "check": "node ../../scripts/sync-shared.mjs --check && eslint . && jscpd && node --input-type=module -e \"const { bundleProject } = await import('../../cli/dist/bundle.js'); await bundleProject('.');\""
   },
   "jscpd": {
     "path": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "castle-web-cli",
-  "version": "0.4.180",
+  "version": "0.4.182",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/castle-xyz/castle-experimental-web.git"
@@ -12,7 +12,7 @@
   "scripts": {
     "build": "rm -rf dist && tsc && chmod +x dist/index.js && vite build && cp -R src/castle-host dist/castle-host && chmod -R u+w kits 2>/dev/null; rm -rf kits && cp -R ../kits kits && chmod -R u+w kits && rm -rf kits/*/imports",
     "dev": "tsc --watch",
-    "check": "node ../scripts/sync-tokens.mjs --check && node ../scripts/tests/icon-registry.mjs && node ../scripts/tests/sandbox-graphql-fields.mjs && eslint . && jscpd && tsc --noEmit && tsc --noEmit -p src/shell/tsconfig.json"
+    "check": "node ../scripts/sync-shared.mjs --check && node ../scripts/tests/icon-registry.mjs && node ../scripts/tests/sandbox-graphql-fields.mjs && eslint . && jscpd && tsc --noEmit && tsc --noEmit -p src/shell/tsconfig.json"
   },
   "jscpd": {
     "path": [
@@ -21,6 +21,7 @@
     "ignore": [
       "src/castle-host/**",
       "src/shell/castle-patterns.css",
+      "src/shell/fields/**",
       "src/shell/icons.ts"
     ],
     "threshold": 0,