@stainless-api/docs-ui 0.1.0-beta.57 → 0.1.0-beta.59

package/dist/styles/main.css

@@ -212,18 +212,26 @@
     color: var(--stl-color-red-foreground);
     font-size: var(--stl-typography-scale-sm);
   }
-
   .stldocs-property-declaration {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    flex: 1;
     min-width: 0;
+    max-width: max-content;
+    border-radius: var(--stl-ui-layout-border-radius-xs);
+    padding-inline: var(--stl-ui-layout-border-radius-xs);
+    margin-left: calc(-1 * var(--stl-ui-layout-border-radius-xs));
+    background-color: transparent;
+    transition: 0.1s background-color ease;
 
     .stldocs-property-deprecated {
       margin-right: 0.44rem;
     }
   }
+  .stldocs-property-info:is(:target, .stldocs-property-highlighted) .stldocs-property-declaration {
+    background-color: var(--stl-color-accent-muted-background);
+    transition: 0.1s background-color ease;
+  }
 
   .stldocs-property-description,
   .stldocs-property-title {
@@ -518,12 +526,17 @@
     top: calc(var(--sl-nav-height) + 1rem);
     position: sticky;
     z-index: 5;
-    border-radius: 16px;
-    background-color: transparent;
-    padding: 0;
+
     font-size: var(--stl-typography-scale-sm);
     font-family: var(--stl-typography-font-mono);
 
+    padding: 0.5rem;
+    border-radius: calc(12px + 0.5rem);
+    display: flex;
+    flex-direction: column;
+    background-color: var(--stl-color-faint-background);
+    border: 1px solid var(--stl-color-border-faint);
+
     .stldocs-snippet-request {
       background-color: var(--stl-color-background);
       --shiki-background: var(--stl-color-background);
@@ -562,7 +575,7 @@
         align-items: center;
       }
 
-      h5 {
+      h3 {
         font-weight: 500;
         font-style: normal;
         line-height: 100%;
@@ -617,6 +630,10 @@
       &.stldocs-snippet-response-pane-active {
         display: block;
       }
+
+      .stldocs-snippet-code {
+        padding: 0;
+      }
     }
 
     .stldocs-snippet-response {
@@ -645,8 +662,12 @@
     will-change: height;
     scrollbar-color: var(--stl-color-border) transparent;
 
+    pre,
     .shiki {
-      padding: 1rem;
+      margin: 0;
+      padding: 0;
+      width: max-content;
+      min-width: 100%;
     }
 
     pre.shiki {
@@ -673,6 +694,11 @@
     }
   }
 
+  .stldocs-snippet-footer {
+    border-top: 1px solid var(--stl-color-border);
+    padding: 0.5rem;
+  }
+
   .stldocs-snippet-response-tab {
     display: flex;
     gap: 0.5rem;
@@ -807,7 +833,6 @@
   }
 }
 
-/* Media Queries */
 @media (min-width: 1280px) {
   .stldocs-root .stldocs-method.stldocs-method-double-pane {
     .stldocs-method-example {
@@ -858,12 +883,6 @@
       grid-template-rows: unset;
 
       .stldocs-snippet {
-        padding: 0.5rem;
-        display: flex;
-        flex-direction: column;
-        background-color: var(--stl-color-faint-background);
-        border: 1px solid var(--stl-color-border);
-
         .stldocs-snippet-response {
           display: block;
         }
@@ -881,7 +900,7 @@
             position: absolute;
             top: calc(-0.5rem);
             left: -1rem;
-            background-color: var(--stl-color-border);
+            background-color: var(--stl-color-border-faint);
           }
         }
 

package/dist/styles/primitives.css

@@ -91,7 +91,8 @@
     }
   }
 
-  [data-stldocs-language='http'] {
+  [data-stldocs-language='http'],
+  [data-stldocs-language='cli'] {
     .stldocs-property-type,
     .stldocs-property-declaration {
       .stldocs-truncation,

package/dist/styles/resets.css

@@ -16,7 +16,7 @@
   }
 
   /* Markdown content should get prose styling */
-  :where(h1, h2, h3, h4, h5):not(.stldocs-markdown, .stldocs-markdown *) {
+  :where(h1, h2, h3, h4, h5):where(:not(.stldocs-markdown, .stldocs-markdown *)) {
     display: block;
     color: var(--stl-color-foreground);
     font-weight: 500;

package/dist/styles.css

@@ -1342,7 +1342,7 @@ a.stl-ui-button {
   }
 
   /* Markdown content should get prose styling */
-  :where(h1, h2, h3, h4, h5):not(.stldocs-markdown, .stldocs-markdown *) {
+  :where(h1, h2, h3, h4, h5):where(:not(.stldocs-markdown, .stldocs-markdown *)) {
     display: block;
     color: var(--stl-color-foreground);
     font-weight: 500;
@@ -1482,7 +1482,8 @@ a.stl-ui-button {
     }
   }
 
-  [data-stldocs-language='http'] {
+  [data-stldocs-language='http'],
+  [data-stldocs-language='cli'] {
     .stldocs-property-type,
     .stldocs-property-declaration {
       .stldocs-truncation,
@@ -2037,18 +2038,26 @@ a.stl-ui-button {
     color: var(--stl-color-red-foreground);
     font-size: var(--stl-typography-scale-sm);
   }
-
   .stldocs-property-declaration {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    flex: 1;
     min-width: 0;
+    max-width: max-content;
+    border-radius: var(--stl-ui-layout-border-radius-xs);
+    padding-inline: var(--stl-ui-layout-border-radius-xs);
+    margin-left: calc(-1 * var(--stl-ui-layout-border-radius-xs));
+    background-color: transparent;
+    transition: 0.1s background-color ease;
 
     .stldocs-property-deprecated {
       margin-right: 0.44rem;
     }
   }
+  .stldocs-property-info:is(:target, .stldocs-property-highlighted) .stldocs-property-declaration {
+    background-color: var(--stl-color-accent-muted-background);
+    transition: 0.1s background-color ease;
+  }
 
   .stldocs-property-description,
   .stldocs-property-title {
@@ -2343,12 +2352,17 @@ a.stl-ui-button {
     top: calc(var(--sl-nav-height) + 1rem);
     position: sticky;
     z-index: 5;
-    border-radius: 16px;
-    background-color: transparent;
-    padding: 0;
+
     font-size: var(--stl-typography-scale-sm);
     font-family: var(--stl-typography-font-mono);
 
+    padding: 0.5rem;
+    border-radius: calc(12px + 0.5rem);
+    display: flex;
+    flex-direction: column;
+    background-color: var(--stl-color-faint-background);
+    border: 1px solid var(--stl-color-border-faint);
+
     .stldocs-snippet-request {
       background-color: var(--stl-color-background);
       --shiki-background: var(--stl-color-background);
@@ -2387,7 +2401,7 @@ a.stl-ui-button {
         align-items: center;
       }
 
-      h5 {
+      h3 {
         font-weight: 500;
         font-style: normal;
         line-height: 100%;
@@ -2442,6 +2456,10 @@ a.stl-ui-button {
       &.stldocs-snippet-response-pane-active {
         display: block;
       }
+
+      .stldocs-snippet-code {
+        padding: 0;
+      }
     }
 
     .stldocs-snippet-response {
@@ -2470,8 +2488,12 @@ a.stl-ui-button {
     will-change: height;
     scrollbar-color: var(--stl-color-border) transparent;
 
+    pre,
     .shiki {
-      padding: 1rem;
+      margin: 0;
+      padding: 0;
+      width: max-content;
+      min-width: 100%;
     }
 
     pre.shiki {
@@ -2498,6 +2520,11 @@ a.stl-ui-button {
     }
   }
 
+  .stldocs-snippet-footer {
+    border-top: 1px solid var(--stl-color-border);
+    padding: 0.5rem;
+  }
+
   .stldocs-snippet-response-tab {
     display: flex;
     gap: 0.5rem;
@@ -2632,7 +2659,6 @@ a.stl-ui-button {
   }
 }
 
-/* Media Queries */
 @media (min-width: 1280px) {
   .stldocs-root .stldocs-method.stldocs-method-double-pane {
     .stldocs-method-example {
@@ -2683,12 +2709,6 @@ a.stl-ui-button {
       grid-template-rows: unset;
 
       .stldocs-snippet {
-        padding: 0.5rem;
-        display: flex;
-        flex-direction: column;
-        background-color: var(--stl-color-faint-background);
-        border: 1px solid var(--stl-color-border);
-
         .stldocs-snippet-response {
           display: block;
         }
@@ -2706,7 +2726,7 @@ a.stl-ui-button {
             position: absolute;
             top: calc(-0.5rem);
             left: -1rem;
-            background-color: var(--stl-color-border);
+            background-color: var(--stl-color-border-faint);
           }
         }
 

package/dist/{typescript-C8J1uyak.js → typescript-DDa446mB.js}

@@ -1,8 +1,8 @@
-import { t as __exportAll } from "./chunk-CAbhIZi1.js";
-import { a as useLanguage, l as useSpec, r as useDeclaration } from "./docs-CXqi26jB.js";
-import { n as useLanguageComponents } from "./contexts-CLpvBI91.js";
-import { t as useComponents } from "./use-components-DBx5LZk0.js";
-import { t as style_default } from "./style-Vk87Pfuy.js";
+import { t as __exportAll } from "./chunk-Du3t87LU.js";
+import { a as useLanguage, l as useSpec, r as useDeclaration } from "./docs-Bw-eLYjA.js";
+import { n as useLanguageComponents } from "./contexts-DZfPd182.js";
+import { t as useComponents } from "./use-components-Dbin0y07.js";
+import { t as style_default } from "./style-TeAZuiHh.js";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
@@ -74,7 +74,7 @@ function TypePreview({ path }) {
 	const language = useLanguage();
 	const decl = useDeclaration(path, false);
 	const { Join } = useComponents();
-	if (!(decl && "children" in decl && decl.children && decl.children.length > 0) || decl && "type" in decl && "kind" in decl["type"] && decl["type"]["kind"] === "TSTypeUnion") return;
+	if (!(decl && "children" in decl && decl.children && decl.children.length > 0) || decl && "type" in decl && decl.type !== void 0 && "kind" in decl["type"] && decl["type"]["kind"] === "TSTypeUnion") return;
 	const items = decl.children.map((prop, key) => {
 		const p = spec?.decls?.[language]?.[prop];
 		return /* @__PURE__ */ jsx("span", {

package/dist/{use-components-DBx5LZk0.js → use-components-Dbin0y07.js}

@@ -1,4 +1,4 @@
-import { i as useComponents$1 } from "./component-generics-B6Fn47Mz.js";
+import { i as useComponents$1 } from "./component-generics-CmIGbBLq.js";
 
 //#region src/contexts/use-components.tsx
 const useComponents = () => useComponents$1();

package/dist/{utils-C12Fme2N.js → utils-BoRmEFRn.js}

@@ -1,5 +1,5 @@
-import { t as __exportAll } from "./chunk-CAbhIZi1.js";
-import { f as parseStainlessPath } from "./routing-Dl0FprK1.js";
+import { t as __exportAll } from "./chunk-Du3t87LU.js";
+import { f as parseStainlessPath } from "./routing-Fzn1XfX_.js";
 
 //#region src/utils.ts
 var utils_exports = /* @__PURE__ */ __exportAll({

package/dist/utils.d.ts

@@ -1,14 +1,14 @@
-import * as SDKJSON from "@stainless/sdk-json";
+import { f as Resource, h as Spec } from "./index-Ct7H30x1.js";
 
 //#region src/utils.d.ts
 declare namespace utils_d_exports {
   export { flatResources, getResourceFromSpec, isResourceEmpty };
 }
-declare function flatResources(resources: Record<string, SDKJSON.Resource> | undefined, parents: SDKJSON.Resource[]): {
-  resource: SDKJSON.Resource;
-  parents: SDKJSON.Resource[];
+declare function flatResources(resources: Record<string, Resource> | undefined, parents: Resource[]): {
+  resource: Resource;
+  parents: Resource[];
 }[];
-declare function getResourceFromSpec(stainlessPath: string | string[], spec: SDKJSON.Spec): SDKJSON.Resource | null;
-declare function isResourceEmpty(resource: SDKJSON.Resource): boolean;
+declare function getResourceFromSpec(stainlessPath: string | string[], spec: Spec): Resource | null;
+declare function isResourceEmpty(resource: Resource): boolean;
 //#endregion
 export { flatResources, getResourceFromSpec, isResourceEmpty, utils_d_exports as t };

package/dist/utils.js

@@ -1,3 +1,3 @@
-import { n as getResourceFromSpec, r as isResourceEmpty, t as flatResources } from "./utils-C12Fme2N.js";
+import { n as getResourceFromSpec, r as isResourceEmpty, t as flatResources } from "./utils-BoRmEFRn.js";
 
 export { flatResources, getResourceFromSpec, isResourceEmpty };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stainless-api/docs-ui",
   "private": false,
-  "version": "0.1.0-beta.57",
+  "version": "0.1.0-beta.59",
   "publishConfig": {
     "access": "public"
   },
@@ -21,16 +21,16 @@
     "@stainless-api/ui-primitives": "0.1.0-beta.43"
   },
   "devDependencies": {
-    "@types/node": "24.10.4",
+    "@types/node": "24.10.9",
     "@types/react": "19.2.7",
     "@types/react-dom": "^19.2.3",
     "dotenv": "17.2.3",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "tsdown": "^0.19.0-beta.3",
+    "tsdown": "^0.20.0-beta.3",
     "typescript": "5.9.3",
     "@stainless/eslint-config": "0.1.0-beta.1",
-    "@stainless/sdk-json": "^0.1.0-beta.2"
+    "@stainless/sdk-json": "^0.1.0-beta.3"
   },
   "exports": {
     ".": {

package/dist/breadcrumbs-DTHE6aca.d.ts

@@ -1,25 +0,0 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
-import * as SDKJSON from "@stainless/sdk-json";
-
-//#region src/components/breadcrumbs.d.ts
-type Breadcrumb = {
-  title: string;
-  href: string;
-};
-type BreadcrumbConfig = {
-  includeCurrentPage?: boolean;
-};
-declare function generateApiBreadcrumbs(fullPath: string, spec: any, basePath: string): Breadcrumb[] | null;
-declare function SDKBreadcrumbs({
-  spec,
-  currentPath,
-  basePath,
-  config
-}: {
-  spec: SDKJSON.Spec;
-  currentPath: string;
-  basePath?: string;
-  config?: BreadcrumbConfig | null;
-}): react_jsx_runtime10.JSX.Element | null;
-//#endregion
-export { generateApiBreadcrumbs as n, SDKBreadcrumbs as t };

package/dist/component-generics-CXfH4VNh.d.ts

@@ -1,30 +0,0 @@
-import * as React$1 from "react";
-import * as react_jsx_runtime20 from "react/jsx-runtime";
-
-//#region src/contexts/component-generics.d.ts
-type DeepPartialMap<L> = { [K in keyof L]?: Partial<L[K]> };
-type ComponentsContextType<C, L> = {
-  components: C;
-  language: L;
-};
-declare const useComponentContext: () => ComponentsContextType<any, any>;
-declare function useComponents<C = unknown>(): C;
-declare function customizeComponents<C, L>(defaults: {
-  components: C;
-  language: L;
-}, overrides?: {
-  components?: Partial<C>;
-  language?: DeepPartialMap<L>;
-}): {
-  components: C;
-  language: L;
-};
-declare function ComponentProvider<C, L>({
-  value,
-  children
-}: {
-  value: ComponentsContextType<C, L>;
-  children: React$1.ReactNode;
-}): react_jsx_runtime20.JSX.Element;
-//#endregion
-export { useComponents as a, useComponentContext as i, ComponentsContextType as n, customizeComponents as r, ComponentProvider as t };

package/dist/docs-AUJrRqst.d.ts

@@ -1,47 +0,0 @@
-import * as React$1 from "react";
-import * as react_jsx_runtime87 from "react/jsx-runtime";
-import * as _stainless_sdk_json0 from "@stainless/sdk-json";
-import { LanguageDeclNodes, Spec, SpecLanguage } from "@stainless/sdk-json";
-
-//#region src/contexts/docs.d.ts
-type ContentPanelLayout = 'double-pane' | 'single-pane';
-type PropertySettingsType = {
-  types?: 'simple' | 'rich';
-  includeModelProperties?: boolean;
-  collapseDescription?: boolean;
-  showTitle?: boolean;
-  expandDepth?: number;
-};
-type DocsContextType = {
-  language: SpecLanguage;
-  spec: Spec | null;
-  settings?: {
-    properties?: PropertySettingsType;
-    contentPanelLayout?: ContentPanelLayout;
-    virtualExpanders?: boolean;
-  };
-};
-declare function useDocs(): DocsContextType;
-declare function useSpec(): Spec | null;
-declare function useSettings(): {
-  properties?: PropertySettingsType;
-  contentPanelLayout?: ContentPanelLayout;
-  virtualExpanders?: boolean;
-} | undefined;
-declare function useSnippet(stainlessPath: string, language?: SpecLanguage, variant?: string): string | undefined;
-type Declaration = LanguageDeclNodes[SpecLanguage];
-declare function useDeclaration<Required extends boolean>(stainlessPath: string, required: Required, language?: SpecLanguage): (Required extends true ? never : undefined) | Declaration;
-declare function useResource(name: string): _stainless_sdk_json0.Resource | undefined;
-declare function useLanguage(): "http" | "node" | "python" | "go" | "typescript" | "terraform" | "ruby" | "java" | "kotlin" | "csharp" | "php";
-declare function useContentPanelLayout(): ContentPanelLayout;
-type DocsProviderProps = DocsContextType & {
-  children: React$1.ReactNode;
-};
-declare function DocsProvider({
-  spec,
-  language,
-  settings,
-  children
-}: DocsProviderProps): react_jsx_runtime87.JSX.Element;
-//#endregion
-export { PropertySettingsType as a, useDocs as c, useSettings as d, useSnippet as f, DocsProviderProps as i, useLanguage as l, DocsContextType as n, useContentPanelLayout as o, useSpec as p, DocsProvider as r, useDeclaration as s, ContentPanelLayout as t, useResource as u };