@stevejtrettel/shader-sandbox 0.1.2 → 0.1.4

package/src/uniforms/uniforms-panel.css

@@ -0,0 +1,277 @@
+/**
+ * Uniforms Panel - Floating overlay styles
+ */
+
+/* Wrapper positions both toggle button and panel in same location */
+.uniforms-panel-wrapper {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+/* Toggle button - uses shared glass variables from app.css */
+.uniforms-toggle-button {
+  width: 32px;
+  height: 32px;
+  padding: 6px;
+  background: var(--glass-bg);
+  border: var(--glass-border);
+  border-radius: var(--glass-radius-sm);
+  color: var(--glass-text);
+  cursor: pointer;
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  box-shadow: var(--glass-shadow-sm);
+  transition: all 0.2s ease, opacity 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.uniforms-toggle-button:hover {
+  background: var(--glass-bg-hover);
+  transform: scale(1.05);
+}
+
+.uniforms-toggle-button:active {
+  transform: scale(0.95);
+}
+
+.uniforms-toggle-button svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* Hidden state for toggle button when panel is open */
+.uniforms-toggle-button.hidden {
+  opacity: 0;
+  transform: scale(0.8);
+  pointer-events: none;
+  position: absolute;
+}
+
+/* Panel - uses shared glass variables */
+.uniforms-panel {
+  width: 175px;
+  max-height: calc(100vh - 100px);
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border-radius: var(--glass-radius);
+  border: var(--glass-border);
+  box-shadow: var(--glass-shadow);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transform-origin: top right;
+  transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.2s ease;
+}
+
+/* Closed state - scales down to toggle button size from top-right */
+.uniforms-panel.closed {
+  opacity: 0;
+  transform: scale(0.18) translateX(0);
+  transform-origin: top right;
+  pointer-events: none;
+  max-height: 0;
+  padding: 0;
+}
+
+/* Header */
+.uniforms-panel-header {
+  padding: 10px 14px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--glass-text-muted);
+  background: rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Close button in header */
+.uniforms-panel-close {
+  background: transparent;
+  border: none;
+  color: var(--glass-text-muted);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.15s ease;
+}
+
+.uniforms-panel-close:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--glass-text);
+}
+
+/* Content area */
+.uniforms-panel-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* Override uniform controls styles for compact glass panel */
+.uniforms-panel .uniform-controls {
+  padding: 12px;
+  gap: 12px;
+  background: transparent;
+}
+
+.uniforms-panel .uniform-controls-header {
+  display: none; /* Hide the reset button header in compact mode */
+}
+
+.uniforms-panel .uniform-controls-list {
+  gap: 14px;
+}
+
+.uniforms-panel .uniform-control {
+  gap: 6px;
+}
+
+.uniforms-panel .uniform-control-label {
+  font-size: 11px;
+  color: var(--glass-text);
+}
+
+.uniforms-panel .uniform-control-value {
+  font-size: 10px;
+  padding: 1px 4px;
+  min-width: 40px;
+  color: var(--glass-text-muted);
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+/* Compact slider - glass style */
+.uniforms-panel .uniform-control-slider {
+  height: 4px;
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.uniforms-panel .uniform-control-slider::-webkit-slider-runnable-track {
+  height: 4px;
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.uniforms-panel .uniform-control-slider::-webkit-slider-thumb {
+  width: 12px;
+  height: 12px;
+  margin-top: -4px;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+
+.uniforms-panel .uniform-control-slider::-moz-range-track {
+  height: 4px;
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.uniforms-panel .uniform-control-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Compact toggle */
+.uniforms-panel .uniform-control-toggle {
+  width: 34px;
+  height: 18px;
+}
+
+.uniforms-panel .uniform-control-toggle-slider {
+  border-radius: 18px;
+}
+
+.uniforms-panel .uniform-control-toggle-slider::before {
+  width: 12px;
+  height: 12px;
+  left: 3px;
+  bottom: 3px;
+}
+
+.uniforms-panel .uniform-control-toggle input:checked + .uniform-control-toggle-slider::before {
+  transform: translateX(16px);
+}
+
+/* Compact XY pad */
+.uniforms-panel .uniform-control-xy-pad {
+  height: 100px;
+}
+
+.uniforms-panel .uniform-control-xy-handle {
+  width: 12px;
+  height: 12px;
+}
+
+/* Compact color swatch */
+.uniforms-panel .uniform-control-color-swatch {
+  height: 28px;
+}
+
+/* Compact vec3 sliders - glass style */
+.uniforms-panel .uniform-control-vec-slider-row {
+  gap: 6px;
+}
+
+.uniforms-panel .uniform-control-vec-component {
+  font-size: 9px;
+  width: 12px;
+  color: var(--glass-text-muted);
+}
+
+.uniforms-panel .uniform-control-vec-value {
+  font-size: 9px;
+  min-width: 32px;
+  color: var(--glass-text-muted);
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+/* XY pad glass style */
+.uniforms-panel .uniform-control-xy-pad {
+  background: rgba(0, 0, 0, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.uniforms-panel .uniform-control-xy-handle {
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+}
+
+/* Scrollbar styling for glass panel */
+.uniforms-panel-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.uniforms-panel-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.uniforms-panel-content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+}
+
+.uniforms-panel-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.35);
+}

package/templates/shaders/example-buffer/config.json

@@ -1,4 +1,5 @@
 {
+  "mode": "shadertoy",
   "layout": "default",
   "controls": true,
   "Image": {

package/dist-lib/engine/ShadertoyEngine.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ShadertoyEngine.d.ts","sourceRoot":"","sources":["../../src/engine/ShadertoyEngine.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EACL,gBAAgB,EAEhB,QAAQ,EACT,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EACL,aAAa,EAIb,WAAW,EAEZ,MAAM,SAAS,CAAC;AAkDjB,qBAAa,eAAe;IAC1B,QAAQ,CAAC,OAAO,EAAE,gBAAgB,CAAC;IACnC,QAAQ,CAAC,EAAE,EAAE,sBAAsB,CAAC;IAEpC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,aAAa,CAAuB;IAE5C,OAAO,CAAC,OAAO,CAAqB;IACpC,OAAO,CAAC,SAAS,CAA0B;IAC3C,OAAO,CAAC,gBAAgB,CAAuC;IAE/D,OAAO,CAAC,aAAa,CAA6B;IAGlD,OAAO,CAAC,UAAU,CAAmC;IACrD,OAAO,CAAC,aAAa,CAAkC;IAGvD,OAAO,CAAC,kBAAkB,CAMlB;gBAEI,IAAI,EAAE,aAAa;IAmC/B,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,KAAK,IAAI,WAAW,CASvB;IAED;;;OAGG;IACH,oBAAoB,IAAI,KAAK,CAAC;QAC5B,QAAQ,EAAE,QAAQ,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,YAAY,EAAE,OAAO,CAAC;QACtB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;KAC7B,CAAC;IAIF;;OAEG;IACH,SAAS,IAAI,OAAO;IAIpB;;OAEG;IACH,mBAAmB,IAAI,gBAAgB,GAAG,IAAI;IAK9C;;;;;OAKG;IACH,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;IAyCxE;;;OAGG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAsB3C;;;OAGG;IACH,KAAK,IAAI,IAAI;IAkCb;;;;;OAKG;IACH,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI;IAatD;;;OAGG;IACH,qBAAqB,IAAI,IAAI;IAa7B;;;;;;;OAOG;IACH,aAAa,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE;IAyD1F;;;;;;OAMG;IACH,eAAe,CAAC,eAAe,EAAE,MAAM,GAAG;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC;YAAE,QAAQ,EAAE,QAAQ,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAC,CAAA;KAAE;IA0CpH;;OAEG;IACH,OAAO,IAAI,IAAI;IAsCf,OAAO,CAAC,cAAc;IAgBtB;;;;;;OAMG;IACH,OAAO,CAAC,mBAAmB;IA4D3B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IA0FzB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAWtB;;;;;OAKG;IACH,OAAO,CAAC,mBAAmB;IA0C3B;;;;;;;;;OASG;IACH,OAAO,CAAC,yBAAyB;IA+BjC,OAAO,CAAC,WAAW;IAoCnB,OAAO,CAAC,mBAAmB;IAiC3B,OAAO,CAAC,mBAAmB;IAmB3B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IA4C7B;;;OAGG;IACH,OAAO,CAAC,gBAAgB;CAmBzB"}