@clarify-labs/renderer 0.9.1 → 0.9.3

package/output/renderer.css

@@ -98,10 +98,12 @@
     --color-emerald-950: oklch(26.2% .051 172.552);
     --color-sky-50: oklch(97.7% .013 236.62);
     --color-sky-100: oklch(95.1% .026 236.824);
+    --color-sky-200: oklch(90.1% .058 230.902);
     --color-sky-300: oklch(82.8% .111 230.318);
     --color-sky-400: oklch(74.6% .16 232.661);
     --color-sky-500: oklch(68.5% .169 237.323);
     --color-sky-600: oklch(58.8% .158 241.966);
+    --color-sky-700: oklch(50% .134 242.749);
     --color-sky-900: oklch(39.1% .09 240.876);
     --color-sky-950: oklch(29.3% .066 243.157);
     --color-violet-300: oklch(81.1% .111 293.571);
@@ -113,10 +115,10 @@
     --color-rose-50: oklch(96.9% .015 12.422);
     --color-rose-100: oklch(94.1% .03 12.58);
     --color-rose-200: oklch(89.2% .058 10.001);
-    --color-rose-300: oklch(81% .117 11.638);
     --color-rose-400: oklch(71.2% .194 13.428);
     --color-rose-500: oklch(64.5% .246 16.439);
     --color-rose-600: oklch(58.6% .253 17.585);
+    --color-rose-700: oklch(51.4% .222 16.935);
     --color-rose-900: oklch(41% .159 10.272);
     --color-rose-950: oklch(27.1% .105 12.094);
     --color-zinc-50: oklch(98.5% 0 0);
@@ -441,8 +443,13 @@
   }
 
   html {
+    scroll-behavior: smooth;
     height: 100%;
-    scroll-padding-top: 3.5rem;
+    scroll-padding-top: calc(var(--clarify-header-offset, 3.5rem) + 1rem);
+  }
+
+  [id] {
+    scroll-margin-top: calc(var(--clarify-header-offset, 3.5rem) + 1rem);
   }
 
   body, #root {
@@ -685,6 +692,64 @@
     --clarify-schema-row-nested-width: calc(100% + 1rem);
     --clarify-server-url-max-width: min(36%, 16rem);
     --clarify-openapi-control-grid: minmax(0, 1fr) minmax(0, 1.2fr);
+    --clarify-openapi-variable-grid: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
+    --clarify-http-method-get-background: #00d2943d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-http-method-get-background: color-mix(in srgb, var(--color-emerald-400) 24%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-http-method-get-text: var(--color-emerald-700);
+    --clarify-http-method-post-background: #00bcfe3d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-http-method-post-background: color-mix(in srgb, var(--color-sky-400) 24%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-http-method-post-text: var(--color-sky-700);
+    --clarify-http-method-put-background: #fcbb0047;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-http-method-put-background: color-mix(in srgb, var(--color-amber-400) 28%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-http-method-put-text: var(--color-amber-700);
+    --clarify-http-method-patch-background: var(--clarify-http-method-put-background);
+    --clarify-http-method-patch-text: var(--clarify-http-method-put-text);
+    --clarify-http-method-delete-background: #ff667f3d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-http-method-delete-background: color-mix(in srgb, var(--color-rose-400) 24%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-http-method-delete-text: var(--color-rose-700);
+    --clarify-http-method-default-background: #9f9fa933;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-http-method-default-background: color-mix(in srgb, var(--color-zinc-400) 20%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-http-method-default-text: var(--color-zinc-800);
     --clarify-search-dialog-padding-block-lg: 15vh;
     --clarify-search-max-width: 36vw;
     --clarify-ui-control-font-size: .875rem;
@@ -846,6 +911,61 @@
 
   .dark, .dark .clarify-app {
     --clarify-code-border: #ffffff1f;
+    --clarify-http-method-get-background: #00d2944d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-http-method-get-background: color-mix(in srgb, var(--color-emerald-400) 30%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-http-method-get-text: var(--color-emerald-200);
+    --clarify-http-method-post-background: #00bcfe4d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-http-method-post-background: color-mix(in srgb, var(--color-sky-400) 30%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-http-method-post-text: var(--color-sky-200);
+    --clarify-http-method-put-background: #fcbb0057;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-http-method-put-background: color-mix(in srgb, var(--color-amber-400) 34%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-http-method-put-text: var(--color-amber-200);
+    --clarify-http-method-delete-background: #ff667f4d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-http-method-delete-background: color-mix(in srgb, var(--color-rose-400) 30%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-http-method-delete-text: var(--color-rose-200);
+    --clarify-http-method-default-background: #9f9fa942;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-http-method-default-background: color-mix(in srgb, var(--color-zinc-400) 26%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-http-method-default-text: var(--color-zinc-100);
   }
 
   .clarify-ui-control {
@@ -2793,6 +2913,16 @@
     }
   }
 
+  .border-emerald-400\/70 {
+    border-color: #00d294b3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-emerald-400\/70 {
+      border-color: color-mix(in oklab, var(--color-emerald-400) 70%, transparent);
+    }
+  }
+
   .border-emerald-500\/20 {
     border-color: #00bb7f33;
   }
@@ -2865,6 +2995,30 @@
     background-color: var(--clarify-code-surface);
   }
 
+  .bg-\(--clarify-http-method-default-background\) {
+    background-color: var(--clarify-http-method-default-background);
+  }
+
+  .bg-\(--clarify-http-method-delete-background\) {
+    background-color: var(--clarify-http-method-delete-background);
+  }
+
+  .bg-\(--clarify-http-method-get-background\) {
+    background-color: var(--clarify-http-method-get-background);
+  }
+
+  .bg-\(--clarify-http-method-patch-background\) {
+    background-color: var(--clarify-http-method-patch-background);
+  }
+
+  .bg-\(--clarify-http-method-post-background\) {
+    background-color: var(--clarify-http-method-post-background);
+  }
+
+  .bg-\(--clarify-http-method-put-background\) {
+    background-color: var(--clarify-http-method-put-background);
+  }
+
   .bg-\(--clarify-skeleton-accent-background\) {
     background-color: var(--clarify-skeleton-accent-background);
   }
@@ -2959,14 +3113,8 @@
     }
   }
 
-  .bg-amber-400\/15 {
-    background-color: #fcbb0026;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-amber-400\/15 {
-      background-color: color-mix(in oklab, var(--color-amber-400) 15%, transparent);
-    }
+  .bg-emerald-50 {
+    background-color: var(--color-emerald-50);
   }
 
   .bg-emerald-50\/50 {
@@ -3037,16 +3185,6 @@
     background-color: var(--color-rose-400);
   }
 
-  .bg-rose-400\/15 {
-    background-color: #ff667f26;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-rose-400\/15 {
-      background-color: color-mix(in oklab, var(--color-rose-400) 15%, transparent);
-    }
-  }
-
   .bg-sky-50\/50 {
     background-color: #f0f9ff80;
   }
@@ -3067,16 +3205,6 @@
     }
   }
 
-  .bg-sky-400\/15 {
-    background-color: #00bcfe26;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-sky-400\/15 {
-      background-color: color-mix(in oklab, var(--color-sky-400) 15%, transparent);
-    }
-  }
-
   .bg-transparent {
     background-color: #0000;
   }
@@ -3097,16 +3225,6 @@
     background-color: var(--color-zinc-300);
   }
 
-  .bg-zinc-400\/15 {
-    background-color: #9f9fa926;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-zinc-400\/15 {
-      background-color: color-mix(in oklab, var(--color-zinc-400) 15%, transparent);
-    }
-  }
-
   .bg-zinc-950 {
     background-color: var(--color-zinc-950);
   }
@@ -3345,6 +3463,10 @@
     padding-right: calc(var(--spacing) * 9);
   }
 
+  .pb-0 {
+    padding-bottom: 0;
+  }
+
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
@@ -3574,6 +3696,30 @@
     color: var(--clarify-error-accent-text);
   }
 
+  .text-\(--clarify-http-method-default-text\) {
+    color: var(--clarify-http-method-default-text);
+  }
+
+  .text-\(--clarify-http-method-delete-text\) {
+    color: var(--clarify-http-method-delete-text);
+  }
+
+  .text-\(--clarify-http-method-get-text\) {
+    color: var(--clarify-http-method-get-text);
+  }
+
+  .text-\(--clarify-http-method-patch-text\) {
+    color: var(--clarify-http-method-patch-text);
+  }
+
+  .text-\(--clarify-http-method-post-text\) {
+    color: var(--clarify-http-method-post-text);
+  }
+
+  .text-\(--clarify-http-method-put-text\) {
+    color: var(--clarify-http-method-put-text);
+  }
+
   .text-\(--clarify-theme-tokens-colors-background\) {
     color: var(--clarify-theme-tokens-colors-background);
   }
@@ -3726,10 +3872,6 @@
     color: var(--color-zinc-500);
   }
 
-  .text-zinc-700 {
-    color: var(--color-zinc-700);
-  }
-
   .text-zinc-900 {
     color: var(--color-zinc-900);
   }
@@ -4029,6 +4171,11 @@
     user-select: none;
   }
 
+  .select-text {
+    -webkit-user-select: text;
+    user-select: text;
+  }
+
   .\[--anchor-gap\:--spacing\(1\)\] {
     --anchor-gap: var(--spacing);
   }
@@ -4386,6 +4533,10 @@
       grid-template-columns: var(--clarify-openapi-control-grid);
     }
 
+    .sm\:grid-cols-\(--clarify-openapi-variable-grid\) {
+      grid-template-columns: var(--clarify-openapi-variable-grid);
+    }
+
     .sm\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -4811,16 +4962,6 @@
     }
   }
 
-  .dark\:bg-amber-400\/20:where(.dark, .dark *) {
-    background-color: #fcbb0033;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-amber-400\/20:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
-    }
-  }
-
   .dark\:bg-amber-500\/10:where(.dark, .dark *) {
     background-color: #f99c001a;
   }
@@ -4851,23 +4992,23 @@
     }
   }
 
-  .dark\:bg-emerald-400\/15:where(.dark, .dark *) {
-    background-color: #00d29426;
+  .dark\:bg-emerald-400\/10:where(.dark, .dark *) {
+    background-color: #00d2941a;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-emerald-400\/15:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-emerald-400) 15%, transparent);
+    .dark\:bg-emerald-400\/10:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-emerald-400) 10%, transparent);
     }
   }
 
-  .dark\:bg-emerald-400\/20:where(.dark, .dark *) {
-    background-color: #00d29433;
+  .dark\:bg-emerald-400\/15:where(.dark, .dark *) {
+    background-color: #00d29426;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-emerald-400\/20:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
+    .dark\:bg-emerald-400\/15:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--color-emerald-400) 15%, transparent);
     }
   }
 
@@ -4901,16 +5042,6 @@
     }
   }
 
-  .dark\:bg-rose-400\/20:where(.dark, .dark *) {
-    background-color: #ff667f33;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-rose-400\/20:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);
-    }
-  }
-
   .dark\:bg-sky-400\/5:where(.dark, .dark *) {
     background-color: #00bcfe0d;
   }
@@ -4921,16 +5052,6 @@
     }
   }
 
-  .dark\:bg-sky-400\/20:where(.dark, .dark *) {
-    background-color: #00bcfe33;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-sky-400\/20:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-sky-400) 20%, transparent);
-    }
-  }
-
   .dark\:bg-white:where(.dark, .dark *) {
     background-color: var(--color-white);
   }
@@ -4955,16 +5076,6 @@
     }
   }
 
-  .dark\:bg-zinc-400\/20:where(.dark, .dark *) {
-    background-color: #9f9fa933;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-zinc-400\/20:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-zinc-400) 20%, transparent);
-    }
-  }
-
   .dark\:bg-zinc-600:where(.dark, .dark *) {
     background-color: var(--color-zinc-600);
   }
@@ -5041,10 +5152,6 @@
     color: var(--color-amber-200);
   }
 
-  .dark\:text-amber-300:where(.dark, .dark *) {
-    color: var(--color-amber-300);
-  }
-
   .dark\:text-amber-400:where(.dark, .dark *) {
     color: var(--color-amber-400);
   }
@@ -5053,6 +5160,10 @@
     color: var(--color-emerald-100);
   }
 
+  .dark\:text-emerald-200:where(.dark, .dark *) {
+    color: var(--color-emerald-200);
+  }
+
   .dark\:text-emerald-300:where(.dark, .dark *) {
     color: var(--color-emerald-300);
   }
@@ -5073,10 +5184,6 @@
     color: var(--color-rose-100);
   }
 
-  .dark\:text-rose-300:where(.dark, .dark *) {
-    color: var(--color-rose-300);
-  }
-
   .dark\:text-rose-400:where(.dark, .dark *) {
     color: var(--color-rose-400);
   }
@@ -5089,10 +5196,6 @@
     color: var(--color-sky-100);
   }
 
-  .dark\:text-sky-300:where(.dark, .dark *) {
-    color: var(--color-sky-300);
-  }
-
   .dark\:text-sky-400:where(.dark, .dark *) {
     color: var(--color-sky-400);
   }

package/output/server.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_PageActions = require("./PageActions-GI1t-JrR.cjs");
-const require_ClarifyShell = require("./ClarifyShell-DJ4fOVOd.cjs");
+const require_PageActions = require("./PageActions-DEuFHgyB.cjs");
+const require_ClarifyShell = require("./ClarifyShell-Dm--LZco.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 { E as prefixHref } from "./PageActions-DaXQgMYP.js";
-import { t as ClarifyShell } from "./ClarifyShell-291_IXxJ.js";
+import { T as prefixHref } from "./PageActions-B_tSec1f.js";
+import { t as ClarifyShell } from "./ClarifyShell-BQ29N8P5.js";
 import { StrictMode } from "react";
 import { StaticRouter } from "react-router-dom";
 import { jsx } from "react/jsx-runtime";

package/output/shell/Header.d.ts

@@ -1,3 +1,4 @@
+import { RefObject } from 'react';
 import { Config, NavigationNode, NavigationTab, RouteItem } from '../types';
 export declare const Header: import('react').ForwardRefExoticComponent<Omit<Omit<import('framer-motion').HTMLMotionProps<"header">, "ref"> & import('react').RefAttributes<HTMLElement>, "ref"> & {
     config: Config;
@@ -7,4 +8,5 @@ export declare const Header: import('react').ForwardRefExoticComponent<Omit<Omit
     currentLocale?: string;
     currentRoute?: RouteItem;
     banner?: React.ReactNode;
+    topAreaRef?: RefObject<HTMLDivElement | null>;
 } & import('react').RefAttributes<HTMLElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clarify-labs/renderer",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "license": "AGPL-3.0-only",
   "type": "module",
   "repository": {