@walkeros/explorer 4.7.0 → 4.7.1

package/dist/styles.css

@@ -77,7 +77,9 @@
   --grid-row-min-height: 250px;
   --grid-row-max-height: 450px;
   --grid-box-max-height-mobile: 500px;
-  --height-snippet-min: 20px;
+  --height-code-view-max: 600px;
+  --step-example-min-box-width: 220px;
+  --step-example-max-height: 360px;
   --monaco-font-size: 13px;
   --monaco-line-height: 1.5;
   --monaco-font-size-snippet: 16px;
@@ -175,7 +177,9 @@
   --grid-row-min-height: 250px;
   --grid-row-max-height: 450px;
   --grid-box-max-height-mobile: 500px;
-  --height-snippet-min: 20px;
+  --height-code-view-max: 600px;
+  --step-example-min-box-width: 220px;
+  --step-example-max-height: 360px;
   --monaco-font-size: 13px;
   --monaco-line-height: 1.5;
   --monaco-font-size-snippet: 16px;
@@ -341,6 +345,12 @@
     }
   }
 }
+@container grid-container (min-width: 800px) {
+  .elb-explorer-grid.elb-explorer-grid--columns {
+    grid-auto-flow: row;
+    grid-template-columns: repeat(var(--grid-columns), minmax(var(--grid-min-box-width), 1fr));
+  }
+}
 @container grid-container (min-width: 800px) {
   .elb-explorer-grid.elb-explorer-grid--row-auto {
     grid-auto-rows: auto;
@@ -945,12 +955,51 @@ html[data-theme=dark] .shiki span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.elb-code-snippet {
-  min-height: var(--height-snippet-min);
-}
 .elb-code-snippet .elb-code-static {
   font-size: 15px;
 }
+.elb-code-view--fit.elb-explorer-box {
+  height: auto;
+  min-height: 0;
+  max-height: var(--height-code-view-max);
+}
+.elb-code-view--fit > .elb-explorer-content,
+.elb-code-view--fit .elb-code-static,
+.elb-code-view--fit .elb-code-static pre {
+  flex: 0 1 auto;
+  min-height: 0;
+}
+.elb-code-view-actions {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 1;
+  display: flex;
+  background: var(--bg-box);
+  border-radius: var(--radius-button);
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.elb-explorer-content:hover > .elb-code-view-actions,
+.elb-code-view-actions:focus-within {
+  opacity: 1;
+}
+@media (hover: none) {
+  .elb-code-view-actions {
+    opacity: 1;
+  }
+}
+.elb-step-example-boxes {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: var(--spacing-grid-gap);
+}
+.elb-step-example .elb-step-example-boxes > .elb-explorer-box {
+  flex: 1 1 var(--step-example-min-box-width);
+  min-width: 0;
+  max-height: var(--step-example-max-height);
+}
 .elb-preview-content {
   flex: 1;
   min-height: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@walkeros/explorer",
-  "version": "4.7.0",
+  "version": "4.7.1",
   "description": "Interactive React components for walkerOS documentation and exploration",
   "license": "MIT",
   "type": "module",
@@ -36,10 +36,10 @@
     "@rjsf/core": "^6.1.2",
     "@rjsf/utils": "^6.1.2",
     "@rjsf/validator-ajv8": "^6.1.2",
-    "@walkeros/collector": "4.7.0",
-    "@walkeros/core": "4.7.0",
-    "@walkeros/web-core": "4.7.0",
-    "@walkeros/web-source-browser": "4.7.0",
+    "@walkeros/collector": "4.7.1",
+    "@walkeros/core": "4.7.1",
+    "@walkeros/web-core": "4.7.1",
+    "@walkeros/web-source-browser": "4.7.1",
     "clsx": "^2.1.1",
     "monaco-editor": "^0.55.1",
     "prettier": "^3.7.4",
@@ -65,8 +65,8 @@
     "@typescript-eslint/eslint-plugin": "^8.28.0",
     "@typescript-eslint/parser": "^8.28.0",
     "@vitejs/plugin-react": "^6.0.2",
-    "@walkeros/config": "4.7.0",
-    "@walkeros/web-destination-gtag": "4.7.0",
+    "@walkeros/config": "4.7.1",
+    "@walkeros/web-destination-gtag": "4.7.1",
     "eslint": "^9.23.0",
     "eslint-plugin-jest": "^29.15.2",
     "eslint-plugin-storybook": "^10.1.11",