@typespec/html-program-viewer 0.73.0-dev.2 → 0.73.0-dev.3

package/dist/{manifest-BP_f_qo_.js → manifest-B5OFB_6C.js}

@@ -1,6 +1,6 @@
 const manifest = {
   "version": "1.2.1",
-  "commit": "6b1c5a82930e2edf81869b72da302b97a340ee59"
+  "commit": "1f82a2850594b3173a5e205858918a02bf66b96e"
 };
 
 export { manifest as default };

package/dist/react/index.js

@@ -1,6 +1,6 @@
 import require$$0, { useRef, useState, useMemo, useCallback, useEffect, useId, createContext, useContext } from 'react';
-import { mergeClasses, Breadcrumb, BreadcrumbItem, BreadcrumbButton, BreadcrumbDivider, Combobox, Option, Caption1, Card, CardHeader, Text, Divider } from '@fluentui/react-components';
-import { ChevronDownRegular, ChevronRightRegular, AppsListRegular, DatabaseRegular } from '@fluentui/react-icons';
+import { mergeClasses, Breadcrumb, BreadcrumbItem, BreadcrumbButton, BreadcrumbDivider, Combobox, Option, Caption1, Card, CardHeader, Text, Tooltip, Button, tokens, Divider } from '@fluentui/react-components';
+import { ChevronDownRegular, ChevronRightRegular, AppsListRegular, DatabaseRegular, BookmarkFilled, BookmarkRegular } from '@fluentui/react-icons';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { List, ListItem } from '@fluentui/react-list';
 
@@ -34312,7 +34312,7 @@ let manifest;
 try {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    manifest = (await import('../manifest-BP_f_qo_.js')).default;
+    manifest = (await import('../manifest-B5OFB_6C.js')).default;
 }
 catch {
     const name = "../dist/manifest.js";
@@ -46441,20 +46441,34 @@ function isTypeSpecType(data) {
   return typeof data === "object" && data !== null && "entityKind" in data && data.entityKind === "Type" && "kind" in data;
 }
 
-const main = "_main_d4sc6_7";
-const header = "_header_d4sc6_11";
-const doc = "_doc_d4sc6_25";
+const main = "_main_12y74_7";
+const header = "_header_12y74_11";
+const doc = "_doc_12y74_35";
 const style = {
-	"type-view": "_type-view_d4sc6_1",
+	"type-view": "_type-view_12y74_1",
 	main: main,
-	"header-section": "_header-section_d4sc6_11",
-	"inspect-section": "_inspect-section_d4sc6_15",
+	"header-section": "_header-section_12y74_11",
+	"inspect-section": "_inspect-section_12y74_15",
 	header: header,
+	"header-left": "_header-left_12y74_25",
+	"header-spacer": "_header-spacer_12y74_31",
 	doc: doc
 };
 
 const TypeNodeView = ({ node }) => {
   const program = useProgram();
+  const [isVarSet, setIsVarSet] = useState(() => Boolean(window.vars?.[node.name]));
+  const handleSaveType = () => setIsVarSet((x) => !x);
+  useEffect(() => {
+    if (isVarSet) {
+      if (!window.vars) window.vars = {};
+      window.vars[node.name] = node.type;
+    } else {
+      if (window.vars) {
+        delete window.vars[node.name];
+      }
+    }
+  }, [node.name, node.type, isVarSet]);
   return /* @__PURE__ */ jsxRuntimeExports$1.jsxs("div", { className: style["type-view"], children: [
     /* @__PURE__ */ jsxRuntimeExports$1.jsxs(Card, { className: style["main"], children: [
       /* @__PURE__ */ jsxRuntimeExports$1.jsx(
@@ -46462,8 +46476,20 @@ const TypeNodeView = ({ node }) => {
         {
           className: style["header-section"],
           header: /* @__PURE__ */ jsxRuntimeExports$1.jsxs("div", { className: style["header"], children: [
-            /* @__PURE__ */ jsxRuntimeExports$1.jsx(TypeKindTag, { type: node.type }),
-            /* @__PURE__ */ jsxRuntimeExports$1.jsx(Text, { weight: "semibold", size: 500, children: /* @__PURE__ */ jsxRuntimeExports$1.jsx(Mono, { children: node.name }) })
+            /* @__PURE__ */ jsxRuntimeExports$1.jsxs("div", { className: style["header-left"], children: [
+              /* @__PURE__ */ jsxRuntimeExports$1.jsx(TypeKindTag, { type: node.type }),
+              /* @__PURE__ */ jsxRuntimeExports$1.jsx(Text, { weight: "semibold", size: 500, children: /* @__PURE__ */ jsxRuntimeExports$1.jsx(Mono, { children: node.name }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports$1.jsx("div", { className: style["header-spacer"] }),
+            /* @__PURE__ */ jsxRuntimeExports$1.jsx(Tooltip, { content: `Save as vars.${node.name}`, relationship: "label", children: /* @__PURE__ */ jsxRuntimeExports$1.jsx(
+              Button,
+              {
+                icon: isVarSet ? /* @__PURE__ */ jsxRuntimeExports$1.jsx(BookmarkFilled, { style: { color: tokens.colorBrandBackground } }) : /* @__PURE__ */ jsxRuntimeExports$1.jsx(BookmarkRegular, {}),
+                onClick: handleSaveType,
+                size: "small",
+                appearance: "subtle"
+              }
+            ) })
           ] }),
           description: /* @__PURE__ */ jsxRuntimeExports$1.jsx(Caption1, { className: style["doc"], children: getDoc(program, node.type) })
         }

package/dist/react/type-view/type-view.d.ts

@@ -1,4 +1,9 @@
 import { TreeNavigator, TypeGraphTypeNode } from '../use-tree-navigation.js';
+declare global {
+    interface Window {
+        vars?: Record<string, unknown>;
+    }
+}
 export interface TypeNodeViewProps {
     readonly nav: TreeNavigator;
     readonly node: TypeGraphTypeNode;

package/dist/react/type-view/type-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type-view.d.ts","sourceRoot":"","sources":["../../../src/react/type-view/type-view.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAGlF,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,GAAG,EAAE,aAAa,CAAC;IAC5B,QAAQ,CAAC,IAAI,EAAE,iBAAiB,CAAC;CAClC;AAED,eAAO,MAAM,YAAY,GAAI,UAAU,iBAAiB,4CA+BvD,CAAC"}
+{"version":3,"file":"type-view.d.ts","sourceRoot":"","sources":["../../../src/react/type-view/type-view.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAGlF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KAChC;CACF;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,GAAG,EAAE,aAAa,CAAC;IAC5B,QAAQ,CAAC,IAAI,EAAE,iBAAiB,CAAC;CAClC;AAED,eAAO,MAAM,YAAY,GAAI,UAAU,iBAAiB,4CA+DvD,CAAC"}

package/dist/style.css

@@ -215,30 +215,40 @@
   background-color: var(--colorPaletteBerryForeground2);
   color: white;
 }
-._type-view_d4sc6_1 {
+._type-view_12y74_1 {
   display: flex;
   flex-direction: column;
   gap: 20px;
 }
 
-._main_d4sc6_7 {
+._main_12y74_7 {
   padding: var(--fui-Card--size) 0 !important;
 }
 
-._header-section_d4sc6_11 {
+._header-section_12y74_11 {
   padding: 0 var(--fui-Card--size);
 }
 
-._inspect-section_d4sc6_15 {
+._inspect-section_12y74_15 {
   padding: 0 var(--fui-Card--size);
 }
 
-._header_d4sc6_11 {
+._header_12y74_11 {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+._header-left_12y74_25 {
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
-._doc_d4sc6_25 {
+._header-spacer_12y74_31 {
+  margin-left: auto;
+}
+
+._doc_12y74_35 {
   color: var(--colorNeutralForeground3);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typespec/html-program-viewer",
-  "version": "0.73.0-dev.2",
+  "version": "0.73.0-dev.3",
   "author": "Microsoft Corporation",
   "description": "TypeSpec library for emitting an html view of the program.",
   "homepage": "https://typespec.io",