@clarify-labs/renderer 0.11.0 → 0.11.2

package/output/renderer.css

@@ -520,7 +520,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-text-soft: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 72%, transparent);
+      --clarify-ui-text-soft: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 84%, var(--clarify-theme-tokens-colors-background));
     }
   }
 
@@ -530,7 +530,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-text-faint: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 58%, transparent);
+      --clarify-ui-text-faint: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 74%, var(--clarify-theme-tokens-colors-background));
     }
   }
 
@@ -1002,6 +1002,15 @@
   }
 
   .clarify-api-response {
+    --shiki-color-text: var(--clarify-ui-text-strong);
+    --shiki-token-constant: #047857;
+    --shiki-token-string: #047857;
+    --shiki-token-comment: #52525b;
+    --shiki-token-keyword: #0369a1;
+    --shiki-token-parameter: #be123c;
+    --shiki-token-function: #6d28d9;
+    --shiki-token-string-expression: #047857;
+    --shiki-token-punctuation: #52525b;
     --clarify-code-background: var(--clarify-theme-tokens-colors-surface);
     --clarify-code-surface: var(--clarify-theme-tokens-colors-surface);
     --clarify-code-header-background: var(--clarify-ui-subtle-background);
@@ -1015,6 +1024,18 @@
     --clarify-code-control-background-active: var(--clarify-ui-active-background);
   }
 
+  .dark .clarify-api-response {
+    --shiki-color-text: var(--color-white);
+    --shiki-token-constant: var(--color-emerald-300);
+    --shiki-token-string: var(--color-emerald-300);
+    --shiki-token-comment: var(--color-zinc-500);
+    --shiki-token-keyword: var(--color-sky-300);
+    --shiki-token-parameter: var(--color-pink-300);
+    --shiki-token-function: var(--color-violet-300);
+    --shiki-token-string-expression: var(--color-emerald-300);
+    --shiki-token-punctuation: var(--color-zinc-200);
+  }
+
   .clarify-ui-control {
     color: var(--clarify-ui-text);
     font-size: var(--clarify-ui-control-font-size);
@@ -1815,6 +1836,10 @@
     left: calc(var(--spacing) * 3);
   }
 
+  .left-4 {
+    left: calc(var(--spacing) * 4);
+  }
+
   .-z-10 {
     z-index: calc(10 * -1);
   }
@@ -1839,6 +1864,10 @@
     z-index: 60;
   }
 
+  .col-span-full {
+    grid-column: 1 / -1;
+  }
+
   .col-start-1 {
     grid-column-start: 1;
   }
@@ -1847,10 +1876,26 @@
     grid-column-start: 2;
   }
 
+  .col-start-3 {
+    grid-column-start: 3;
+  }
+
+  .col-start-4 {
+    grid-column-start: 4;
+  }
+
+  .col-start-5 {
+    grid-column-start: 5;
+  }
+
   .row-start-1 {
     grid-row-start: 1;
   }
 
+  .row-start-2 {
+    grid-row-start: 2;
+  }
+
   .container {
     width: 100%;
   }
@@ -2317,10 +2362,6 @@
     margin-right: var(--spacing);
   }
 
-  .mr-2 {
-    margin-right: calc(var(--spacing) * 2);
-  }
-
   .mr-auto {
     margin-right: auto;
   }
@@ -2493,6 +2534,10 @@
     height: calc(var(--spacing) * 12);
   }
 
+  .h-0 {
+    height: 0;
+  }
+
   .h-0\.5 {
     height: calc(var(--spacing) * .5);
   }
@@ -2565,6 +2610,10 @@
     height: 100%;
   }
 
+  .h-px {
+    height: 1px;
+  }
+
   .max-h-\(--clarify-error-component-stack-max-height\) {
     max-height: var(--clarify-error-component-stack-max-height);
   }
@@ -2901,10 +2950,6 @@
     flex: none;
   }
 
-  .shrink {
-    flex-shrink: 1;
-  }
-
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -3051,16 +3096,20 @@
     grid-template-columns: 2rem minmax(0, 1fr);
   }
 
+  .grid-cols-\[auto_auto_minmax\(0\,1fr\)_auto_auto\] {
+    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
+  }
+
   .grid-cols-\[auto_minmax\(0\,1fr\)\] {
     grid-template-columns: auto minmax(0, 1fr);
   }
 
-  .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.3fr\)\] {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
   }
 
-  .grid-cols-\[minmax\(5rem\,auto\)_1fr\] {
-    grid-template-columns: minmax(5rem, auto) 1fr;
+  .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   }
 
   .grid-rows-\[auto_minmax\(11rem\,1fr\)\] {
@@ -3163,12 +3212,6 @@
     gap: 1px;
   }
 
-  :where(.space-y-1 > :not(:last-child)) {
-    --tw-space-y-reverse: 0;
-    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
-    margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
-  }
-
   :where(.space-y-3 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
@@ -3223,6 +3266,10 @@
     row-gap: calc(var(--spacing) * .5);
   }
 
+  .gap-y-1 {
+    row-gap: var(--spacing);
+  }
+
   .gap-y-2 {
     row-gap: calc(var(--spacing) * 2);
   }
@@ -4086,6 +4133,10 @@
     padding-top: calc(var(--spacing) * .5);
   }
 
+  .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
+
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
@@ -4166,10 +4217,6 @@
     padding-left: calc(var(--spacing) * 2.5);
   }
 
-  .pl-3 {
-    padding-left: calc(var(--spacing) * 3);
-  }
-
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -4389,18 +4436,10 @@
     color: var(--clarify-code-muted);
   }
 
-  .text-\(--clarify-code-number\) {
-    color: var(--clarify-code-number);
-  }
-
   .text-\(--clarify-code-property\) {
     color: var(--clarify-code-property);
   }
 
-  .text-\(--clarify-code-string\) {
-    color: var(--clarify-code-string);
-  }
-
   .text-\(--clarify-code-success\) {
     color: var(--clarify-code-success);
   }
@@ -4613,10 +4652,6 @@
     opacity: .35;
   }
 
-  .opacity-45 {
-    opacity: .45;
-  }
-
   .opacity-80 {
     opacity: .8;
   }
@@ -5106,6 +5141,44 @@
     opacity: 1;
   }
 
+  .file\:mr-2::file-selector-button {
+    margin-right: calc(var(--spacing) * 2);
+  }
+
+  .file\:rounded-\(--clarify-theme-tokens-radius-md\)::file-selector-button {
+    border-radius: var(--clarify-theme-tokens-radius-md);
+  }
+
+  .file\:border::file-selector-button {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+
+  .file\:border-\(--clarify-theme-tokens-colors-border\)::file-selector-button {
+    border-color: var(--clarify-theme-tokens-colors-border);
+  }
+
+  .file\:bg-\(--clarify-ui-subtle-background\)::file-selector-button {
+    background-color: var(--clarify-ui-subtle-background);
+  }
+
+  .file\:px-2::file-selector-button {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
+  .file\:py-1::file-selector-button {
+    padding-block: var(--spacing);
+  }
+
+  .file\:text-xs::file-selector-button {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+
+  .file\:text-\(--clarify-ui-text-strong\)::file-selector-button {
+    color: var(--clarify-ui-text-strong);
+  }
+
   .placeholder\:text-\(--clarify-code-faint\)::placeholder {
     color: var(--clarify-code-faint);
   }
@@ -5583,10 +5656,6 @@
       max-width: var(--clarify-server-url-max-width);
     }
 
-    .sm\:max-w-48 {
-      max-width: calc(var(--spacing) * 48);
-    }
-
     .sm\:max-w-xl {
       max-width: var(--container-xl);
     }
@@ -5768,6 +5837,26 @@
       z-index: 50;
     }
 
+    .lg\:col-span-1 {
+      grid-column: span 1 / span 1;
+    }
+
+    .lg\:col-start-4 {
+      grid-column-start: 4;
+    }
+
+    .lg\:col-start-5 {
+      grid-column-start: 5;
+    }
+
+    .lg\:col-start-6 {
+      grid-column-start: 6;
+    }
+
+    .lg\:row-start-1 {
+      grid-row-start: 1;
+    }
+
     .lg\:block {
       display: block;
     }
@@ -5812,6 +5901,10 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 
+    .lg\:grid-cols-\[auto_auto_minmax\(0\,1fr\)_minmax\(0\,14rem\)_auto_auto\] {
+      grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 14rem) auto auto;
+    }
+
     .lg\:grid-cols-\[minmax\(0\,1\.12fr\)_minmax\(22rem\,0\.88fr\)\] {
       grid-template-columns: minmax(0, 1.12fr) minmax(22rem, .88fr);
     }
@@ -5850,6 +5943,10 @@
       padding-block: var(--clarify-search-dialog-padding-block-lg);
     }
 
+    .lg\:pt-0 {
+      padding-top: 0;
+    }
+
     .lg\:pt-10 {
       padding-top: calc(var(--spacing) * 10);
     }
@@ -6566,36 +6663,36 @@
     display: none;
   }
 
-  .\[\&\>\[role\=tooltip\]\]\:w-80 > [role="tooltip"] {
+  :is(.\*\:\[\[role\=tooltip\]\]\:w-80 > *)[role="tooltip"] {
     width: calc(var(--spacing) * 80);
   }
 
-  .\[\&\>\[role\=tooltip\]\]\:max-w-\[min\(20rem\,calc\(100vw-2rem\)\)\] > [role="tooltip"] {
+  :is(.\*\:\[\[role\=tooltip\]\]\:max-w-\[min\(20rem\,calc\(100vw-2rem\)\)\] > *)[role="tooltip"] {
     max-width: min(20rem, 100vw - 2rem);
   }
 
-  .\[\&\>\[role\=tooltip\]\]\:border > [role="tooltip"] {
+  :is(.\*\:\[\[role\=tooltip\]\]\:border > *)[role="tooltip"] {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
 
-  .\[\&\>\[role\=tooltip\]\]\:border-\(--clarify-theme-tokens-colors-border\) > [role="tooltip"] {
+  :is(.\*\:\[\[role\=tooltip\]\]\:border-\(--clarify-theme-tokens-colors-border\) > *)[role="tooltip"] {
     border-color: var(--clarify-theme-tokens-colors-border);
   }
 
-  .\[\&\>\[role\=tooltip\]\]\:bg-\(--clarify-theme-tokens-colors-surface\) > [role="tooltip"] {
+  :is(.\*\:\[\[role\=tooltip\]\]\:bg-\(--clarify-theme-tokens-colors-surface\) > *)[role="tooltip"] {
     background-color: var(--clarify-theme-tokens-colors-surface);
   }
 
-  .\[\&\>\[role\=tooltip\]\]\:p-3 > [role="tooltip"] {
+  :is(.\*\:\[\[role\=tooltip\]\]\:p-3 > *)[role="tooltip"] {
     padding: calc(var(--spacing) * 3);
   }
 
-  .\[\&\>\[role\=tooltip\]\]\:text-\(--clarify-ui-text\) > [role="tooltip"] {
+  :is(.\*\:\[\[role\=tooltip\]\]\:text-\(--clarify-ui-text\) > *)[role="tooltip"] {
     color: var(--clarify-ui-text);
   }
 
-  .\[\&\>\[role\=tooltip\]\]\:shadow-xl > [role="tooltip"] {
+  :is(.\*\:\[\[role\=tooltip\]\]\:shadow-xl > *)[role="tooltip"] {
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }

package/output/server.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_ClarifyShell = require("./ClarifyShell-BAjq876Z.cjs");
-const require_PageActions = require("./PageActions-DJRXlGhz.cjs");
+const require_ClarifyShell = require("./ClarifyShell-Cn48irqj.cjs");
+const require_PageActions = require("./PageActions-Bw9SAHLl.cjs");
 let react = require("react");
 let react_router_dom = require("react-router-dom");
 let react_jsx_runtime = require("react/jsx-runtime");

package/output/server.js

@@ -1,5 +1,5 @@
-import { t as ClarifyShell } from "./ClarifyShell-GoSXvgMg.js";
-import { T as prefixHref } from "./PageActions-bugd7GZh.js";
+import { t as ClarifyShell } from "./ClarifyShell-D_HluctW.js";
+import { T as prefixHref } from "./PageActions-BLzCasvB.js";
 import { StrictMode } from "react";
 import { StaticRouter } from "react-router-dom";
 import { jsx } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clarify-labs/renderer",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "license": "AGPL-3.0-only",
   "type": "module",
   "repository": {
@@ -92,6 +92,7 @@
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "shiki": "^4.3.0",
+    "yaml": "^2.9.0",
     "zustand": "^5.0.14"
   }
 }