@stainless-api/docs-ui 0.1.0-beta.80 → 0.1.0-beta.82

package/dist/components/primitives.d.ts

@@ -58,7 +58,7 @@ type TooltipProps = {
 declare function Tooltip({
   content,
   children
-}: TooltipProps): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+}: TooltipProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
 type LinkProps = {
   stainlessPath?: string;
   scroll?: boolean;
@@ -69,7 +69,7 @@ declare function Link({
   scroll,
   children,
   ...props
-}: LinkProps): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+}: LinkProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
 type InputProps = {
   left?: ReactNode;
   right?: ReactNode;

package/dist/components/properties.js

@@ -4,7 +4,8 @@ import "../contexts/index.js";
 import { useComponents } from "../contexts/use-components.js";
 import style_default from "../style.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ArrowDownWideNarrowIcon, ArrowUpNarrowWideIcon } from "lucide-react";
+import { ArrowDownWideNarrowIcon, ArrowUpNarrowWideIcon, LinkIcon } from "lucide-react";
+import { Button } from "@stainless-api/ui-primitives";
 
 //#region src/components/properties.tsx
 function PropertyToggle({ target }) {
@@ -49,10 +50,8 @@ function splitDescription(description) {
 function Property({ id, name, typeName, badges, type, declaration, description, title, deprecated, expand, additional, constraints, children }) {
 	const Docs = useComponents();
 	const language = useLanguage();
-	const properties = useSettings()?.properties;
+	const { collapseDescription, showTitle, types } = useSettings()?.properties ?? {};
 	if (useIgnoredResources().includes(id || "")) return null;
-	const { collapseDescription, showTitle } = properties ?? {};
-	const types = properties?.types;
 	const [descFirstLine, descRest] = collapseDescription === "show-first-line" ? splitDescription(description) : [null, description];
 	const textContent = /* @__PURE__ */ jsxs(Fragment, { children: [
 		typeof deprecated === "string" && /* @__PURE__ */ jsx("div", {
@@ -117,10 +116,10 @@ function Property({ id, name, typeName, badges, type, declaration, description,
 		className: style_default.PropertyInfo,
 		children: types === "simple" ? simple : rich
 	});
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		className: style_default.Property,
 		"data-stldocs-language": language,
-		children: children || collapseDescription !== false && descRest ? /* @__PURE__ */ jsxs(Docs.Expander, {
+		children: [children || collapseDescription !== false && descRest ? /* @__PURE__ */ jsxs(Docs.Expander, {
 			summary: content,
 			muted: !children,
 			open: expand,
@@ -132,7 +131,14 @@ function Property({ id, name, typeName, badges, type, declaration, description,
 					children
 				})
 			]
-		}) : content
+		}) : content, id && /* @__PURE__ */ jsx(Button, {
+			className: style_default.DeepLinkButton,
+			variant: "outline",
+			size: "sm",
+			href: `#${encodeURIComponent(id)}`,
+			"aria-label": "Link to this property",
+			children: /* @__PURE__ */ jsx(Button.Icon, { icon: LinkIcon })
+		})]
 	});
 }
 

package/dist/components/sdk.d.ts

@@ -108,7 +108,7 @@ type SDKReferenceProps = {
 declare function SDKReference({
   stainlessPath,
   children
-}: SDKReferenceProps): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | null | undefined;
+}: SDKReferenceProps): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
 type SDKLanguageBlockProps = {
   language: DocsLanguage;
   version: string;

package/dist/contexts/docs.d.ts

@@ -47,7 +47,7 @@ declare function useDeclaration<Required extends boolean>(stainlessPath: string,
 declare function useAvailableLanguages(stainlessPath: string): SpecLanguage[];
 declare function useIgnoredResources(): string[];
 declare function useResource(name: string): Resource | undefined;
-declare function useLanguage(): "http" | "node" | "python" | "go" | "typescript" | "terraform" | "ruby" | "java" | "kotlin" | "csharp" | "php" | "cli";
+declare function useLanguage(): "cli" | "csharp" | "go" | "http" | "java" | "kotlin" | "node" | "php" | "python" | "ruby" | "terraform" | "typescript";
 declare function useContentPanelLayout(): ContentPanelLayout;
 type DocsProviderProps = DocsContextType & {
   children: React$1.ReactNode;

package/dist/languages/http.js

@@ -297,7 +297,7 @@ function MethodInfo({ decl, children }) {
 		});
 		return /* @__PURE__ */ jsxs("div", {
 			className: style_default.MethodInfo,
-			children: [children, implementedLanguages.length > 0 && /* @__PURE__ */ jsxs("div", {
+			children: [children, availableLanguageLinks.length > 0 && /* @__PURE__ */ jsxs("div", {
 				className: clsx("stl-ui-prose", style_default.MethodAvailableLanguages),
 				children: [/* @__PURE__ */ jsx("h5", { children: "Supported Languages" }), /* @__PURE__ */ jsxs("div", {
 					className: style_default.MethodAvailableLanguages,
@@ -375,14 +375,10 @@ function Declaration({ decl }) {
 			}),
 			/* @__PURE__ */ jsx(Lang.Type, { type: decl.type })
 		] });
-		case "HttpDeclTypeAlias": return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsx(Identifier, { name: decl.ident }),
-			/* @__PURE__ */ jsx("span", {
-				className: style_default.TextOperator,
-				children: " = "
-			}),
-			/* @__PURE__ */ jsx(Lang.Type, { type: decl.type })
-		] });
+		case "HttpDeclTypeAlias": return /* @__PURE__ */ jsxs(Fragment$1, { children: [/^UnionMember/.test(decl.ident) ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Identifier, { name: decl.ident }), /* @__PURE__ */ jsx("span", {
+			className: style_default.TextOperator,
+			children: " = "
+		})] }), /* @__PURE__ */ jsx(Lang.Type, { type: decl.type })] });
 		case "HttpDeclReference": return /* @__PURE__ */ jsx(Lang.Type, { type: decl.type });
 	}
 }

package/dist/routing.d.ts

@@ -8,7 +8,7 @@ declare const Languages: readonly ["http", "node", "python", "go", "typescript",
 declare const SupportedLanguageSyntaxes: string[];
 type DocsLanguage = (typeof Languages)[number];
 declare const LanguageNames: Record<DocsLanguage, string>;
-declare function getLanguageSnippet(language: DocsLanguage): "http.curl" | "node.default" | "python.default" | "go.default" | "typescript.default" | "terraform.default" | "ruby.default" | "java.default" | "kotlin.default" | "csharp.default" | "php.default" | "cli.default";
+declare function getLanguageSnippet(language: DocsLanguage): "http.curl" | "cli.default" | "csharp.default" | "go.default" | "java.default" | "kotlin.default" | "node.default" | "php.default" | "python.default" | "ruby.default" | "terraform.default" | "typescript.default";
 declare function isSupportedLanguage(language: string): language is DocsLanguage;
 type ParsedStainlessPath = ReturnType<typeof parseStainlessPath>;
 declare function parseStainlessPath(stainlessPath: string): {

package/dist/spec.d.ts

@@ -36,13 +36,13 @@ declare function generateNavigation(resource: Partial<Resource>): {
 declare function generateSpecForResource(spec: Spec, name: string, lang: DocsLanguage, transforms: SpecTransforms): Partial<Spec>;
 declare function transform(spec: Spec, transforms: SpecTransforms): {
   name: string;
-  lang: "http" | "node" | "python" | "go" | "typescript" | "terraform" | "ruby" | "java" | "kotlin" | "csharp" | "php" | "cli";
+  lang: "cli" | "csharp" | "go" | "http" | "java" | "kotlin" | "node" | "php" | "python" | "ruby" | "terraform" | "typescript";
   spec: Partial<Spec>;
 }[];
 declare function split(spec: Spec, transforms?: SpecTransforms): {
   resources: ReturnType<typeof transform>;
   navigation: {
-    languages: ("http" | "node" | "python" | "go" | "typescript" | "terraform" | "ruby" | "java" | "kotlin" | "csharp" | "php" | "cli" | "sql" | "openapi")[] | undefined;
+    languages: ("cli" | "csharp" | "go" | "http" | "java" | "kotlin" | "node" | "php" | "python" | "ruby" | "terraform" | "typescript" | "sql" | "openapi")[] | undefined;
     resources: {
       [k: string]: {
         title: string | undefined;

package/dist/style.d.ts

@@ -172,6 +172,7 @@ declare const _default: {
   readonly BreadcrumbsItem: "stldocs-breadcrumbs-item";
   readonly BreadcrumbsLink: "stldocs-breadcrumbs-link";
   readonly BreadcrumbsNonLink: "stldocs-breadcrumbs-non-link";
+  readonly DeepLinkButton: "stldocs-deep-link-button";
 };
 //#endregion
 export { _default as default };

package/dist/style.js

@@ -171,7 +171,8 @@ var style_default = {
 	Breadcrumbs: "stldocs-breadcrumbs",
 	BreadcrumbsItem: "stldocs-breadcrumbs-item",
 	BreadcrumbsLink: "stldocs-breadcrumbs-link",
-	BreadcrumbsNonLink: "stldocs-breadcrumbs-non-link"
+	BreadcrumbsNonLink: "stldocs-breadcrumbs-non-link",
+	DeepLinkButton: "stldocs-deep-link-button"
 };
 
 //#endregion

package/dist/styles/main.css

@@ -176,7 +176,7 @@
   }
 
   .stldocs-expander-summary-content {
-    width: 100%;
+    max-width: 100%;
   }
 
   .stldocs-property-header {
@@ -340,10 +340,6 @@
 
 .stldocs-root .stldocs-property {
   padding: 0.2rem 0;
-
-  [open] > .stldocs-expander-summary {
-    padding-bottom: 0;
-  }
 }
 
 .stldocs-root .stldocs-property:not(.stldocs-property .stldocs-property) > .stldocs-property-info {

package/dist/styles/primitives.css

@@ -135,21 +135,18 @@
 /* Generic expand/collapse button */
 .stldocs-root .stldocs-expander {
   &[data-stldocs-expander-muted='true'] {
-    .stldocs-icon {
+    .stldocs-expander-summary-icon {
       visibility: hidden;
     }
 
-    &:hover {
-      .stldocs-icon {
-        visibility: visible;
-      }
+    &:hover .stldocs-expander-summary-icon {
+      visibility: visible;
     }
   }
 
   .stldocs-expander-summary {
     cursor: pointer;
     display: flex;
-    /* padding: 0.4rem 0; */
 
     & > .stldocs-expander-summary-icon {
       margin-right: 8px;
@@ -170,7 +167,8 @@
   &[open],
   &[data-open='true'] {
     & > .stldocs-expander-summary {
-      .stldocs-type-preview[data-stldocs-type-preview='properties'] .stldocs-type-preview-content {
+      .stldocs-type-preview[data-stldocs-type-preview='properties']
+        :is(.stldocs-type-preview-content, .stldocs-type-brace) {
         display: none;
       }
 
@@ -186,7 +184,6 @@
     }
 
     & > .stldocs-expander-content {
-      margin-left: var(--stldocs-expander-margin-shift);
       line-height: 150%;
 
       & > .stldocs-property-children {
@@ -200,6 +197,11 @@
       }
     }
   }
+
+  /* makes a big perf difference in browser calculating layout, even though the UA should do this? */
+  &:not([open], [data-open='true']) .stldocs-expander-content {
+    display: none;
+  }
 }
 
 /* Markdown content */
@@ -438,3 +440,95 @@
   }
 }
 
+/* Deeplink button */
+
+/* Link is not inside <summary> because interactive content in <summary> considered harmful
+ * Subgrid must be applied from the top-level .stldocs-property all the way down to where the
+ * inline summary content is rendered, so that the link button can be positioned at the “end” of
+ * the summary line without actually shrinking the <details> or summary element.
+ */
+.stldocs-root .stldocs-property:has(.stldocs-deep-link-button) {
+  display: grid;
+  /* expander  |  summary content  |  deeplink */
+  grid-template-columns: auto minmax(0, max-content) 1fr;
+  grid-template-rows: auto auto;
+  gap: 0;
+  width: 100%;
+
+  /* expander child */
+  & > .stldocs-expander {
+    grid-column: 1 / -1;
+    grid-row: 1 / -1;
+
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+
+    & > .stldocs-expander-summary {
+      grid-column: 1 / -1;
+      grid-row: 1;
+      display: grid;
+      grid-template-columns: subgrid;
+      grid-template-rows: subgrid;
+      & > .stldocs-expander-summary-icon {
+        grid-column: 1;
+      }
+      & > .stldocs-expander-summary-content {
+        grid-column: 2;
+      }
+    }
+
+    &::details-content,
+    & > .stldocs-expander-content {
+      grid-row: 2;
+      grid-column: 2 / -1;
+    }
+  }
+
+  /* non-expanding child */
+  & > .stldocs-property-info {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  & > .stldocs-deep-link-button {
+    grid-column: span 1 / -1;
+    grid-row: 1;
+    align-self: center;
+    justify-self: start;
+    margin-left: 0.25em;
+    display: none;
+    margin-top: -1rem;
+    margin-bottom: -1rem;
+    animation: stldocs-deep-link-delay-enter 0.2s ease-out;
+    animation-delay: 0.3s;
+    animation-fill-mode: both;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  /* show link button when expander summary is hovered */
+  & > .stldocs-expander:has(> .stldocs-expander-summary:hover) + .stldocs-deep-link-button,
+  /* show link button when non-expander rows are hovered */
+  &:not(:has(> .stldocs-expander)):hover > .stldocs-deep-link-button,
+  /* keep it visible when it itself is hovered or focused */
+  & > .stldocs-deep-link-button:is(:hover, :focus) {
+    display: flex;
+  }
+}
+
+@keyframes stldocs-deep-link-delay-enter {
+  from {
+    display: none;
+    opacity: 0;
+    scale: 0.85;
+  }
+  to {
+    opacity: 1;
+    scale: 0.99;
+  }
+}
+

package/dist/styles.css

@@ -1527,21 +1527,18 @@ a.stl-ui-button {
 /* Generic expand/collapse button */
 .stldocs-root .stldocs-expander {
   &[data-stldocs-expander-muted='true'] {
-    .stldocs-icon {
+    .stldocs-expander-summary-icon {
       visibility: hidden;
     }
 
-    &:hover {
-      .stldocs-icon {
-        visibility: visible;
-      }
+    &:hover .stldocs-expander-summary-icon {
+      visibility: visible;
     }
   }
 
   .stldocs-expander-summary {
     cursor: pointer;
     display: flex;
-    /* padding: 0.4rem 0; */
 
     & > .stldocs-expander-summary-icon {
       margin-right: 8px;
@@ -1562,7 +1559,8 @@ a.stl-ui-button {
   &[open],
   &[data-open='true'] {
     & > .stldocs-expander-summary {
-      .stldocs-type-preview[data-stldocs-type-preview='properties'] .stldocs-type-preview-content {
+      .stldocs-type-preview[data-stldocs-type-preview='properties']
+        :is(.stldocs-type-preview-content, .stldocs-type-brace) {
         display: none;
       }
 
@@ -1578,7 +1576,6 @@ a.stl-ui-button {
     }
 
     & > .stldocs-expander-content {
-      margin-left: var(--stldocs-expander-margin-shift);
       line-height: 150%;
 
       & > .stldocs-property-children {
@@ -1592,6 +1589,11 @@ a.stl-ui-button {
       }
     }
   }
+
+  /* makes a big perf difference in browser calculating layout, even though the UA should do this? */
+  &:not([open], [data-open='true']) .stldocs-expander-content {
+    display: none;
+  }
 }
 
 /* Markdown content */
@@ -1830,6 +1832,98 @@ a.stl-ui-button {
   }
 }
 
+/* Deeplink button */
+
+/* Link is not inside <summary> because interactive content in <summary> considered harmful
+ * Subgrid must be applied from the top-level .stldocs-property all the way down to where the
+ * inline summary content is rendered, so that the link button can be positioned at the “end” of
+ * the summary line without actually shrinking the <details> or summary element.
+ */
+.stldocs-root .stldocs-property:has(.stldocs-deep-link-button) {
+  display: grid;
+  /* expander  |  summary content  |  deeplink */
+  grid-template-columns: auto minmax(0, max-content) 1fr;
+  grid-template-rows: auto auto;
+  gap: 0;
+  width: 100%;
+
+  /* expander child */
+  & > .stldocs-expander {
+    grid-column: 1 / -1;
+    grid-row: 1 / -1;
+
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+
+    & > .stldocs-expander-summary {
+      grid-column: 1 / -1;
+      grid-row: 1;
+      display: grid;
+      grid-template-columns: subgrid;
+      grid-template-rows: subgrid;
+      & > .stldocs-expander-summary-icon {
+        grid-column: 1;
+      }
+      & > .stldocs-expander-summary-content {
+        grid-column: 2;
+      }
+    }
+
+    &::details-content,
+    & > .stldocs-expander-content {
+      grid-row: 2;
+      grid-column: 2 / -1;
+    }
+  }
+
+  /* non-expanding child */
+  & > .stldocs-property-info {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  & > .stldocs-deep-link-button {
+    grid-column: span 1 / -1;
+    grid-row: 1;
+    align-self: center;
+    justify-self: start;
+    margin-left: 0.25em;
+    display: none;
+    margin-top: -1rem;
+    margin-bottom: -1rem;
+    animation: stldocs-deep-link-delay-enter 0.2s ease-out;
+    animation-delay: 0.3s;
+    animation-fill-mode: both;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  /* show link button when expander summary is hovered */
+  & > .stldocs-expander:has(> .stldocs-expander-summary:hover) + .stldocs-deep-link-button,
+  /* show link button when non-expander rows are hovered */
+  &:not(:has(> .stldocs-expander)):hover > .stldocs-deep-link-button,
+  /* keep it visible when it itself is hovered or focused */
+  & > .stldocs-deep-link-button:is(:hover, :focus) {
+    display: flex;
+  }
+}
+
+@keyframes stldocs-deep-link-delay-enter {
+  from {
+    display: none;
+    opacity: 0;
+    scale: 0.85;
+  }
+  to {
+    opacity: 1;
+    scale: 0.99;
+  }
+}
+
 /* Overview page content */
 .stldocs-root .stldocs-overview {
   .stldocs-overview-header {
@@ -2008,7 +2102,7 @@ a.stl-ui-button {
   }
 
   .stldocs-expander-summary-content {
-    width: 100%;
+    max-width: 100%;
   }
 
   .stldocs-property-header {
@@ -2172,10 +2266,6 @@ a.stl-ui-button {
 
 .stldocs-root .stldocs-property {
   padding: 0.2rem 0;
-
-  [open] > .stldocs-expander-summary {
-    padding-bottom: 0;
-  }
 }
 
 .stldocs-root .stldocs-property:not(.stldocs-property .stldocs-property) > .stldocs-property-info {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stainless-api/docs-ui",
   "private": false,
-  "version": "0.1.0-beta.80",
+  "version": "0.1.0-beta.82",
   "publishConfig": {
     "access": "public"
   },