@typespec/playground 0.5.0-dev.5 → 0.5.0-dev.6

package/dist/{manifest-CNmB2KUS-CNmB2KUS.js → manifest-onl5D1yL-onl5D1yL.js}

@@ -1,6 +1,6 @@
 const manifest = {
   "version": "0.60.1",
-  "commit": "66e847c71be174f2c789307a7ccb32306d1ca8ba"
+  "commit": "3d809416fc2342be5568c611e3ed30972770899e"
 };
 
 export { manifest as default };

package/dist/react/index.js

@@ -9553,7 +9553,7 @@ class TabsterCore {
     this._forgetMemorizedElements = [];
     this._wrappers = new Set();
     this._initQueue = [];
-    this._version = "8.0.1";
+    this._version = "8.1.0";
     this._noop = false;
 
     this.getWindow = () => {
@@ -10138,29 +10138,11 @@ function isHTMLElement(target) {
     ]);
 };
 
-/**
- * @internal
- *
- * @param entry - CSS bucket entry that can be either a string or an array
- * @returns An array where the first element is the CSS rule
- */
-function normalizeCSSBucketEntry(entry) {
-  if (!Array.isArray(entry)) {
-    return [entry];
-  }
-  if (process.env.NODE_ENV !== 'production' && entry.length > 2) {
-    throw new Error('CSS Bucket contains an entry with greater than 2 items, please report this to https://github.com/microsoft/griffel/issues');
-  }
-  return entry;
-}
-
 // ----
-
 // Heads up!
 // These constants are global and will be shared between Griffel instances.
 // Any change in them should happen only in a MAJOR version. If it happens,
 // please change "__NAMESPACE_PREFIX__" to include a version.
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const __GLOBAL__ = typeof window === 'undefined' ? global : window;
 const __NAMESPACE_PREFIX__ = '@griffel/';
@@ -10170,232 +10152,31 @@ function getGlobalVar(name, defaultValue) {
   }
   return __GLOBAL__[Symbol.for(__NAMESPACE_PREFIX__ + name)];
 }
-
 /** @internal */
 const DEBUG_RESET_CLASSES = /*#__PURE__*/getGlobalVar('DEBUG_RESET_CLASSES', {});
-
 /** @internal */
 const DEFINITION_LOOKUP_TABLE = /*#__PURE__*/getGlobalVar('DEFINITION_LOOKUP_TABLE', {});
-
 // ----
-
 /** @internal */
 const DATA_BUCKET_ATTR = 'data-make-styles-bucket';
-
 /** @internal */
 const DATA_PRIORITY_ATTR = 'data-priority';
-
 /** @internal */
 const RESET_HASH_PREFIX = 'r';
-
 /** @internal */
 const SEQUENCE_HASH_LENGTH = 7;
-
 /** @internal */
 const SEQUENCE_PREFIX = '___';
-
 /** @internal */
 const DEBUG_SEQUENCE_SEPARATOR = '_';
-
 /** @internal */
 const SEQUENCE_SIZE = process.env.NODE_ENV === 'production' ? SEQUENCE_PREFIX.length + SEQUENCE_HASH_LENGTH : SEQUENCE_PREFIX.length + SEQUENCE_HASH_LENGTH + DEBUG_SEQUENCE_SEPARATOR.length + SEQUENCE_HASH_LENGTH;
-
 // indexes for values in LookupItem tuple
-
 /** @internal */
 const LOOKUP_DEFINITIONS_INDEX = 0;
-
 /** @internal */
 const LOOKUP_DIR_INDEX = 1;
 
-function createIsomorphicStyleSheet(styleElement, bucketName, priority, elementAttributes) {
-  // no CSSStyleSheet in SSR, just append rules here for server render
-  const __cssRulesForSSR = [];
-  elementAttributes[DATA_BUCKET_ATTR] = bucketName;
-  elementAttributes[DATA_PRIORITY_ATTR] = String(priority);
-  if (styleElement) {
-    for (const attrName in elementAttributes) {
-      styleElement.setAttribute(attrName, elementAttributes[attrName]);
-    }
-  }
-  function insertRule(rule) {
-    if (styleElement != null && styleElement.sheet) {
-      return styleElement.sheet.insertRule(rule, styleElement.sheet.cssRules.length);
-    }
-    return __cssRulesForSSR.push(rule);
-  }
-  return {
-    elementAttributes,
-    insertRule,
-    element: styleElement,
-    bucketName,
-    cssRules() {
-      if (styleElement != null && styleElement.sheet) {
-        return Array.from(styleElement.sheet.cssRules).map(cssRule => cssRule.cssText);
-      }
-      return __cssRulesForSSR;
-    }
-  };
-}
-
-/**
- * Ordered style buckets using their short pseudo name.
- *
- * @internal
- */
-const styleBucketOrdering = [
-// reset styles
-'r',
-// catch-all
-'d',
-// link
-'l',
-// visited
-'v',
-// focus-within
-'w',
-// focus
-'f',
-// focus-visible
-'i',
-// hover
-'h',
-// active
-'a',
-// at rules for reset styles
-'s',
-// keyframes
-'k',
-// at-rules
-'t',
-// @media rules
-'m',
-// @container rules
-'c'];
-
-// avoid repeatedly calling `indexOf` to determine order during new insertions
-const styleBucketOrderingMap = /*#__PURE__*/styleBucketOrdering.reduce((acc, cur, j) => {
-  acc[cur] = j;
-  return acc;
-}, {});
-function getStyleSheetKey(bucketName, media, priority) {
-  return (bucketName === 'm' ? bucketName + media : bucketName) + priority;
-}
-
-/**
- * Lazily adds a `<style>` bucket to the `<head>`. This will ensure that the style buckets are ordered.
- */
-function getStyleSheetForBucket(bucketName, targetDocument, insertionPoint, renderer, metadata = {}) {
-  var _ref, _ref2;
-  const isMediaBucket = bucketName === 'm';
-  const media = (_ref = metadata['m']) != null ? _ref : '0';
-  const priority = (_ref2 = metadata['p']) != null ? _ref2 : 0;
-  const stylesheetKey = getStyleSheetKey(bucketName, media, priority);
-  if (!renderer.stylesheets[stylesheetKey]) {
-    const tag = targetDocument && targetDocument.createElement('style');
-    const stylesheet = createIsomorphicStyleSheet(tag, bucketName, priority, Object.assign({}, renderer.styleElementAttributes, isMediaBucket && {
-      media
-    }));
-    renderer.stylesheets[stylesheetKey] = stylesheet;
-    if (targetDocument && tag) {
-      targetDocument.head.insertBefore(tag, findInsertionPoint(targetDocument, insertionPoint, bucketName, renderer, metadata));
-    }
-  }
-  return renderer.stylesheets[stylesheetKey];
-}
-function isSameInsertionKey(element, bucketName, metadata) {
-  var _ref3, _element$media;
-  const targetKey = bucketName + ((_ref3 = metadata['m']) != null ? _ref3 : '');
-  const elementKey = element.getAttribute(DATA_BUCKET_ATTR) + ((_element$media = element.media) != null ? _element$media : '');
-  return targetKey === elementKey;
-}
-
-/**
- * Finds an element before which the new bucket style element should be inserted following the bucket sort order.
- *
- * @param targetDocument - A document
- * @param insertionPoint - An element that will be used as an initial insertion point
- * @param targetBucket - The bucket that should be inserted to DOM
- * @param renderer - Griffel renderer
- * @param metadata - metadata for CSS rule
- * @returns - Smallest style element with greater sort order than the current bucket
- */
-function findInsertionPoint(targetDocument, insertionPoint, targetBucket, renderer, metadata = {}) {
-  var _ref4, _ref5;
-  const targetOrder = styleBucketOrderingMap[targetBucket];
-  const media = (_ref4 = metadata['m']) != null ? _ref4 : '';
-  const priority = (_ref5 = metadata['p']) != null ? _ref5 : 0;
-
-  // Similar to javascript sort comparators where
-  // a positive value is increasing sort order
-  // a negative value is decreasing sort order
-  let comparer = el => targetOrder - styleBucketOrderingMap[el.getAttribute(DATA_BUCKET_ATTR)];
-  let styleElements = targetDocument.head.querySelectorAll(`[${DATA_BUCKET_ATTR}]`);
-  if (targetBucket === 'm') {
-    const mediaElements = targetDocument.head.querySelectorAll(`[${DATA_BUCKET_ATTR}="${targetBucket}"]`);
-
-    // only reduce the scope of the search and change comparer
-    // if there are other media buckets already on the page
-    if (mediaElements.length) {
-      styleElements = mediaElements;
-      comparer = el => renderer.compareMediaQueries(media, el.media);
-    }
-  }
-  const comparerWithPriority = el => {
-    if (isSameInsertionKey(el, targetBucket, metadata)) {
-      return priority - Number(el.getAttribute('data-priority'));
-    }
-    return comparer(el);
-  };
-  const length = styleElements.length;
-  let index = length - 1;
-  while (index >= 0) {
-    const styleElement = styleElements.item(index);
-    if (comparerWithPriority(styleElement) > 0) {
-      return styleElement.nextSibling;
-    }
-    index--;
-  }
-  if (length > 0) {
-    return styleElements.item(0);
-  }
-  return insertionPoint ? insertionPoint.nextSibling : null;
-}
-
-/**
- * Suffixes to be ignored in case of error
- */
-const ignoreSuffixes = /*#__PURE__*/['-moz-placeholder', '-moz-focus-inner', '-moz-focusring', '-ms-input-placeholder', '-moz-read-write', '-moz-read-only'].join('|');
-const ignoreSuffixesRegex = /*#__PURE__*/new RegExp(`:(${ignoreSuffixes})`);
-
-/**
- * @internal
- *
- * Calls `sheet.insertRule` and catches errors related to browser prefixes.
- */
-function safeInsertRule(sheet, ruleCSS) {
-  try {
-    sheet.insertRule(ruleCSS);
-  } catch (e) {
-    // We've disabled these warnings due to false-positive errors with browser prefixes
-    if (process.env.NODE_ENV !== 'production' && !ignoreSuffixesRegex.test(ruleCSS)) {
-      // eslint-disable-next-line no-console
-      console.error(`There was a problem inserting the following rule: "${ruleCSS}"`, e);
-    }
-  }
-}
-
-const isDevToolsEnabled = /*#__PURE__*/(() => {
-  // Accessing "window.sessionStorage" causes an exception when third party cookies are blocked
-  // https://stackoverflow.com/questions/30481516/iframe-in-chrome-error-failed-to-read-localstorage-from-window-access-deni
-  try {
-    var _window$sessionStorag;
-    return Boolean(typeof window !== 'undefined' && ((_window$sessionStorag = window.sessionStorage) == null ? void 0 : _window$sessionStorag.getItem('__GRIFFEL_DEVTOOLS__')));
-  } catch (e) {
-    return false;
-  }
-})();
-
 /* eslint-disable */
 // Inspired by https://github.com/garycourt/murmurhash-js
 // Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
@@ -10479,7 +10260,6 @@ function reduceToClassName(classMap, dir) {
   // `hashString` is needed to handle `null` values in a class map as they don't produce any classes.
   let classString = '';
   let hashString = '';
-
   // eslint-disable-next-line guard-for-in
   for (const propertyHash in classMap) {
     const classNameMapping = classMap[propertyHash];
@@ -10494,7 +10274,6 @@ function reduceToClassName(classMap, dir) {
   }
   return [classString.slice(0, -1), hashString.slice(0, -1)];
 }
-
 /**
  * Reduces classname maps for slots to classname strings. Registers them in a definition cache to be used by
  * `mergeClasses()`.
@@ -10503,11 +10282,9 @@ function reduceToClassName(classMap, dir) {
  */
 function reduceToClassNameForSlots(classesMapBySlot, dir) {
   const classNamesForSlots = {};
-
   // eslint-disable-next-line guard-for-in
   for (const slotName in classesMapBySlot) {
     const [slotClasses, slotClassesHash] = reduceToClassName(classesMapBySlot[slotName], dir);
-
     // Handles a case when there are no classes in a set i.e. "makeStyles({ root: {} })"
     if (slotClassesHash === '') {
       classNamesForSlots[slotName] = '';
@@ -10523,33 +10300,12 @@ function reduceToClassNameForSlots(classesMapBySlot, dir) {
 
 // Contains a mapping of previously resolved sequences of atomic classnames
 const mergeClassesCachedResults = {};
-
-/**
- * Function can take any number of arguments, joins classes together and deduplicates atomic declarations generated by
- * `makeStyles()`. Handles scoped directional styles.
- *
- * Classnames can be of any length, this function can take both atomic declarations and class names.
- *
- * Input:
- * ```
- * // not real classes
- * mergeClasses('ui-button', 'displayflex', 'displaygrid')
- * ```
- *
- * Output:
- * ```
- * 'ui-button displaygrid'
- * ```
- */
-
 function mergeClasses() {
   // arguments are parsed manually to avoid double loops as TS & Babel transforms rest via an additional loop
   // @see https://babeljs.io/docs/en/babel-plugin-transform-parameters
   /* eslint-disable prefer-rest-params */
-
   let dir = null;
   let resultClassName = '';
-
   // Is used as a cache key to avoid object merging
   let sequenceMatch = '';
   const sequencesIds = new Array(arguments.length);
@@ -10576,7 +10332,6 @@ function mergeClasses() {
         resultClassName += className + ' ';
       } else {
         const sequenceId = className.substr(sequenceIndex, SEQUENCE_SIZE);
-
         // Handles a case with mixed classnames, i.e. "ui-button ATOMIC_CLASSES"
         if (sequenceIndex > 0) {
           resultClassName += className.slice(0, sequenceIndex);
@@ -10592,13 +10347,11 @@ function mergeClasses() {
       }
     }
   }
-
   // .slice() there allows to avoid trailing space for non-atomic classes
   // "ui-button ui-flex " => "ui-button ui-flex"
   if (sequenceMatch === '') {
     return resultClassName.slice(0, -1);
   }
-
   // It's safe to reuse results to avoid continuous merging as results are stable
   // "__seq1 ... __seq2 ..." => "__seq12 ..."
   const mergeClassesResult = mergeClassesCachedResults[sequenceMatch];
@@ -10627,13 +10380,11 @@ function mergeClasses() {
       }
     }
   }
-
   // eslint-disable-next-line prefer-spread
   const resultClassesMap = Object.assign.apply(Object,
   // .assign() mutates the first object, we can't mutate mappings as it will produce invalid results later
   [{}].concat(sequenceMappings));
   const [atomicClasses, classesMapHash] = reduceToClassName(resultClassesMap, dir);
-
   // Each merge of classes generates a new sequence of atomic classes that needs to be registered
   const newSequenceHash = hashSequence(classesMapHash, dir, sequencesIds);
   const newClassName = newSequenceHash + ' ' + atomicClasses;
@@ -10723,7 +10474,7 @@ function getDebugTree(debugSequenceHash, parentNode) {
     return undefined;
   }
   const parentLookupItem = parentNode ? DEFINITION_LOOKUP_TABLE[parentNode.sequenceHash] : undefined;
-  const debugClassNames = getDebugClassNames(lookupItem, parentLookupItem, parentNode == null ? void 0 : parentNode.debugClassNames, parentNode == null ? void 0 : parentNode.children);
+  const debugClassNames = getDebugClassNames(lookupItem, parentLookupItem, parentNode === null || parentNode === void 0 ? void 0 : parentNode.debugClassNames, parentNode === null || parentNode === void 0 ? void 0 : parentNode.children);
   const node = {
     sequenceHash: debugSequenceHash,
     direction: lookupItem[1],
@@ -10738,7 +10489,6 @@ function getDebugTree(debugSequenceHash, parentNode) {
       node.children.push(child);
     }
   });
-
   // if it's leaf (makeStyle node), get css rules
   if (!node.children.length) {
     node.rules = {};
@@ -10782,10 +10532,207 @@ function injectDevTools(document) {
   });
 }
 
+const isDevToolsEnabled = /*#__PURE__*/(() => {
+  var _a;
+  // Accessing "window.sessionStorage" causes an exception when third party cookies are blocked
+  // https://stackoverflow.com/questions/30481516/iframe-in-chrome-error-failed-to-read-localstorage-from-window-access-deni
+  try {
+    return Boolean(typeof window !== 'undefined' && ((_a = window.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem('__GRIFFEL_DEVTOOLS__')));
+  } catch (e) {
+    return false;
+  }
+})();
+
+/**
+ * @internal
+ *
+ * @param entry - CSS bucket entry that can be either a string or an array
+ * @returns An array where the first element is the CSS rule
+ */
+function normalizeCSSBucketEntry(entry) {
+  if (!Array.isArray(entry)) {
+    return [entry];
+  }
+  if (process.env.NODE_ENV !== 'production' && entry.length > 2) {
+    throw new Error('CSS Bucket contains an entry with greater than 2 items, please report this to https://github.com/microsoft/griffel/issues');
+  }
+  return entry;
+}
+
+function createIsomorphicStyleSheet(styleElement, bucketName, priority, elementAttributes) {
+  // no CSSStyleSheet in SSR, just append rules here for server render
+  const __cssRulesForSSR = [];
+  elementAttributes[DATA_BUCKET_ATTR] = bucketName;
+  elementAttributes[DATA_PRIORITY_ATTR] = String(priority);
+  if (styleElement) {
+    for (const attrName in elementAttributes) {
+      styleElement.setAttribute(attrName, elementAttributes[attrName]);
+    }
+  }
+  function insertRule(rule) {
+    if (styleElement === null || styleElement === void 0 ? void 0 : styleElement.sheet) {
+      return styleElement.sheet.insertRule(rule, styleElement.sheet.cssRules.length);
+    }
+    return __cssRulesForSSR.push(rule);
+  }
+  return {
+    elementAttributes,
+    insertRule,
+    element: styleElement,
+    bucketName,
+    cssRules() {
+      if (styleElement === null || styleElement === void 0 ? void 0 : styleElement.sheet) {
+        return Array.from(styleElement.sheet.cssRules).map(cssRule => cssRule.cssText);
+      }
+      return __cssRulesForSSR;
+    }
+  };
+}
+
+/**
+ * Ordered style buckets using their short pseudo name.
+ *
+ * @internal
+ */
+const styleBucketOrdering = [
+// reset styles
+'r',
+// catch-all
+'d',
+// link
+'l',
+// visited
+'v',
+// focus-within
+'w',
+// focus
+'f',
+// focus-visible
+'i',
+// hover
+'h',
+// active
+'a',
+// at rules for reset styles
+'s',
+// keyframes
+'k',
+// at-rules
+'t',
+// @media rules
+'m',
+// @container rules
+'c'];
+// avoid repeatedly calling `indexOf` to determine order during new insertions
+const styleBucketOrderingMap = /*#__PURE__*/styleBucketOrdering.reduce((acc, cur, j) => {
+  acc[cur] = j;
+  return acc;
+}, {});
+function getStyleSheetKey(bucketName, media, priority) {
+  return (bucketName === 'm' ? bucketName + media : bucketName) + priority;
+}
+/**
+ * Lazily adds a `<style>` bucket to the `<head>`. This will ensure that the style buckets are ordered.
+ */
+function getStyleSheetForBucket(bucketName, targetDocument, insertionPoint, renderer, metadata = {}) {
+  var _a, _b;
+  const isMediaBucket = bucketName === 'm';
+  const media = (_a = metadata['m']) !== null && _a !== void 0 ? _a : '0';
+  const priority = (_b = metadata['p']) !== null && _b !== void 0 ? _b : 0;
+  const stylesheetKey = getStyleSheetKey(bucketName, media, priority);
+  if (!renderer.stylesheets[stylesheetKey]) {
+    const tag = targetDocument && targetDocument.createElement('style');
+    const stylesheet = createIsomorphicStyleSheet(tag, bucketName, priority, Object.assign({}, renderer.styleElementAttributes, isMediaBucket && {
+      media
+    }));
+    renderer.stylesheets[stylesheetKey] = stylesheet;
+    if (targetDocument && tag) {
+      targetDocument.head.insertBefore(tag, findInsertionPoint(targetDocument, insertionPoint, bucketName, renderer, metadata));
+    }
+  }
+  return renderer.stylesheets[stylesheetKey];
+}
+function isSameInsertionKey(element, bucketName, metadata) {
+  var _a, _b;
+  const targetKey = bucketName + ((_a = metadata['m']) !== null && _a !== void 0 ? _a : '');
+  const elementKey = element.getAttribute(DATA_BUCKET_ATTR) + ((_b = element.media) !== null && _b !== void 0 ? _b : '');
+  return targetKey === elementKey;
+}
+/**
+ * Finds an element before which the new bucket style element should be inserted following the bucket sort order.
+ *
+ * @param targetDocument - A document
+ * @param insertionPoint - An element that will be used as an initial insertion point
+ * @param targetBucket - The bucket that should be inserted to DOM
+ * @param renderer - Griffel renderer
+ * @param metadata - metadata for CSS rule
+ * @returns - Smallest style element with greater sort order than the current bucket
+ */
+function findInsertionPoint(targetDocument, insertionPoint, targetBucket, renderer, metadata = {}) {
+  var _a, _b;
+  const targetOrder = styleBucketOrderingMap[targetBucket];
+  const media = (_a = metadata['m']) !== null && _a !== void 0 ? _a : '';
+  const priority = (_b = metadata['p']) !== null && _b !== void 0 ? _b : 0;
+  // Similar to javascript sort comparators where
+  // a positive value is increasing sort order
+  // a negative value is decreasing sort order
+  let comparer = el => targetOrder - styleBucketOrderingMap[el.getAttribute(DATA_BUCKET_ATTR)];
+  let styleElements = targetDocument.head.querySelectorAll(`[${DATA_BUCKET_ATTR}]`);
+  if (targetBucket === 'm') {
+    const mediaElements = targetDocument.head.querySelectorAll(`[${DATA_BUCKET_ATTR}="${targetBucket}"]`);
+    // only reduce the scope of the search and change comparer
+    // if there are other media buckets already on the page
+    if (mediaElements.length) {
+      styleElements = mediaElements;
+      comparer = el => renderer.compareMediaQueries(media, el.media);
+    }
+  }
+  const comparerWithPriority = el => {
+    if (isSameInsertionKey(el, targetBucket, metadata)) {
+      return priority - Number(el.getAttribute('data-priority'));
+    }
+    return comparer(el);
+  };
+  const length = styleElements.length;
+  let index = length - 1;
+  while (index >= 0) {
+    const styleElement = styleElements.item(index);
+    if (comparerWithPriority(styleElement) > 0) {
+      return styleElement.nextSibling;
+    }
+    index--;
+  }
+  if (length > 0) {
+    return styleElements.item(0);
+  }
+  return insertionPoint ? insertionPoint.nextSibling : null;
+}
+
+/**
+ * Suffixes to be ignored in case of error
+ */
+const ignoreSuffixes = /*#__PURE__*/['-moz-placeholder', '-moz-focus-inner', '-moz-focusring', '-ms-input-placeholder', '-moz-read-write', '-moz-read-only'].join('|');
+const ignoreSuffixesRegex = /*#__PURE__*/new RegExp(`:(${ignoreSuffixes})`);
+/**
+ * @internal
+ *
+ * Calls `sheet.insertRule` and catches errors related to browser prefixes.
+ */
+function safeInsertRule(sheet, ruleCSS) {
+  try {
+    sheet.insertRule(ruleCSS);
+  } catch (e) {
+    // We've disabled these warnings due to false-positive errors with browser prefixes
+    if (process.env.NODE_ENV !== 'production' && !ignoreSuffixesRegex.test(ruleCSS)) {
+      // eslint-disable-next-line no-console
+      console.error(`There was a problem inserting the following rule: "${ruleCSS}"`, e);
+    }
+  }
+}
+
 let lastIndex = 0;
 /** @internal */
 const defaultCompareMediaQueries = (a, b) => a < b ? -1 : a > b ? 1 : 0;
-
 /**
  * Creates a new instances of a renderer.
  *
@@ -10793,12 +10740,14 @@ const defaultCompareMediaQueries = (a, b) => a < b ? -1 : a > b ? 1 : 0;
  */
 function createDOMRenderer(targetDocument = typeof document === 'undefined' ? undefined : document, options = {}) {
   const {
+    classNameHashSalt,
     unstable_filterCSSRule,
     insertionPoint,
     styleElementAttributes,
     compareMediaQueries = defaultCompareMediaQueries
   } = options;
   const renderer = {
+    classNameHashSalt,
     insertionCache: {},
     stylesheets: {},
     styleElementAttributes: Object.freeze(styleElementAttributes),
@@ -10808,7 +10757,6 @@ function createDOMRenderer(targetDocument = typeof document === 'undefined' ? un
       // eslint-disable-next-line guard-for-in
       for (const styleBucketName in cssRules) {
         const cssRulesForBucket = cssRules[styleBucketName];
-
         // This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
         for (let i = 0, l = cssRulesForBucket.length; i < l; i++) {
           const [ruleCSS, metadata] = normalizeCSSBucketEntry(cssRulesForBucket[i]);
@@ -10837,28 +10785,10 @@ function createDOMRenderer(targetDocument = typeof document === 'undefined' ? un
   return renderer;
 }
 
-/**
- * Default implementation of insertion factory. Inserts styles only once per renderer and performs
- * insertion immediately after styles computation.
- *
- * @internal
- */
-const insertionFactory$1 = () => {
-  const insertionCache = {};
-  return function insertStyles(renderer, cssRules) {
-    if (insertionCache[renderer.id] === undefined) {
-      renderer.insertCSSRules(cssRules);
-      insertionCache[renderer.id] = true;
-    }
-  };
-};
-
 // TODO: duplicated from https://github.com/lahmatiy/react-render-tracker/blob/main/src/publisher/react-integration/utils/stackTrace.ts
 // once it is published as a standalone npm package, remove this file
-
 // Adopted version of StackTrace-Parser
 // https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js
-
 const UNKNOWN_FUNCTION = '<unknown>';
 function parseStackTraceLine(line) {
   return parseChrome(line) || parseGecko(line) || parseJSC(line);
@@ -10874,7 +10804,6 @@ function parseChrome(line) {
   let loc = parts[2];
   const isNative = loc && loc.indexOf('native') === 0; // start of line
   const isEval = loc && loc.indexOf('eval') === 0; // start of line
-
   const submatch = chromeEvalRe.exec(loc);
   if (isEval && submatch != null) {
     // throw out eval line/column and use top-most line/column number
@@ -10923,7 +10852,7 @@ function getSourceURLfromError() {
     return undefined;
   }
   const result = parseStackTraceLine(userMakeStyleCallLine);
-  return result == null ? void 0 : result.loc;
+  return result === null || result === void 0 ? void 0 : result.loc;
 }
 function findUserMakeStyleCallInStacks(stacks) {
   for (let i = stacks.length - 1; i >= 0; --i) {
@@ -10939,6 +10868,22 @@ function findUserMakeStyleCallInStacks(stacks) {
   return undefined;
 }
 
+/**
+ * Default implementation of insertion factory. Inserts styles only once per renderer and performs
+ * insertion immediately after styles computation.
+ *
+ * @internal
+ */
+const insertionFactory$1 = () => {
+  const insertionCache = {};
+  return function insertStyles(renderer, cssRules) {
+    if (insertionCache[renderer.id] === undefined) {
+      renderer.insertCSSRules(cssRules);
+      insertionCache[renderer.id] = true;
+    }
+  };
+};
+
 /**
  * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
  *
@@ -11033,7 +10978,6 @@ const insertionFactory = () => {
  * @private
  */
 const RendererContext = /*#__PURE__*/React.createContext( /*#__PURE__*/createDOMRenderer());
-
 /**
  * Returns an instance of current makeStyles() renderer.
  *
@@ -11047,7 +10991,6 @@ function useRenderer() {
  * @private
  */
 const TextDirectionContext = /*#__PURE__*/React.createContext('ltr');
-
 /**
  * Returns current directionality of the element's text.
  *
@@ -38837,7 +38780,7 @@ let manifest;
 try {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    manifest = (await import('../manifest-CNmB2KUS-CNmB2KUS.js')).default;
+    manifest = (await import('../manifest-onl5D1yL-onl5D1yL.js')).default;
 }
 catch {
     const name = "../dist/manifest.js";
@@ -40556,7 +40499,7 @@ function stringify(value) {
     const n = value.n.toString();
     const sign = value.s === -1 ? "-" : "";
     const int = value.e <= 0 ? "0" : n.slice(0, value.e);
-    const decimal = value.e < n.length ? "." + n.slice(value.e).padStart(value.d, "0") : "";
+    const decimal = value.e < n.length ? "." + n.slice(-value.d).padStart(value.d, "0") : "";
     return sign + int + decimal;
 }
 const equals = (a, b) => a.n === b.n && a.e === b.e;
@@ -41976,6 +41919,41 @@ new Set([
     "intrinsic",
 ]);
 
+let currentProgram;
+/** @experimental */
+const TypekitPrototype = {};
+/** @experimental */
+function createTypekit() {
+    const tk = Object.create(TypekitPrototype);
+    Object.defineProperty(tk, "program", {
+        get() {
+            return currentProgram;
+        },
+    });
+    const handler = {
+        get(target, prop, receiver) {
+            const value = Reflect.get(target, prop, receiver);
+            if (prop === "program") {
+                // don't wrap program (probably need to ensure this isn't a nested program somewhere)
+                return value;
+            }
+            if (typeof value === "function") {
+                return function (...args) {
+                    return value.apply(proxy, args);
+                };
+            }
+            if (typeof value === "object" && value !== null) {
+                return new Proxy(value, handler);
+            }
+            return value;
+        },
+    };
+    const proxy = new Proxy(tk, handler);
+    return proxy;
+}
+/** @experimental */
+createTypekit();
+
 const globalLibraryUrlsLoadedSym = Symbol.for("TYPESPEC_LIBRARY_URLS_LOADED");
 if (globalThis[globalLibraryUrlsLoadedSym] === undefined) {
     globalThis[globalLibraryUrlsLoadedSym] = new Set();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typespec/playground",
-  "version": "0.5.0-dev.5",
+  "version": "0.5.0-dev.6",
   "author": "Microsoft Corporation",
   "description": "TypeSpec playground UI components.",
   "homepage": "https://typespec.io",
@@ -55,7 +55,7 @@
     "!dist/test/**"
   ],
   "dependencies": {
-    "@fluentui/react-components": "~9.54.15",
+    "@fluentui/react-components": "~9.54.16",
     "@fluentui/react-icons": "^2.0.258",
     "@typespec/bundler": "~0.1.7 || >=0.2.0-dev <0.2.0",
     "@typespec/compiler": "~0.60.1 || >=0.61.0-dev <0.61.0",
@@ -79,16 +79,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@playwright/test": "^1.47.0",
-    "@storybook/addon-actions": "^8.3.0",
-    "@storybook/cli": "^8.3.0",
-    "@storybook/react": "^8.3.0",
-    "@storybook/react-vite": "^8.3.0",
-    "@storybook/test": "^8.3.0",
-    "@storybook/types": "^8.3.0",
+    "@playwright/test": "^1.47.2",
+    "@storybook/addon-actions": "^8.3.3",
+    "@storybook/cli": "^8.3.3",
+    "@storybook/react": "^8.3.3",
+    "@storybook/react-vite": "^8.3.3",
+    "@storybook/test": "^8.3.3",
+    "@storybook/types": "^8.3.3",
     "@types/debounce": "~1.2.4",
-    "@types/node": "~22.5.4",
-    "@types/react": "~18.3.5",
+    "@types/node": "~22.7.1",
+    "@types/react": "~18.3.9",
     "@types/react-dom": "~18.3.0",
     "@types/swagger-ui-dist": "~3.30.5",
     "@typespec/bundler": "~0.1.7 || >=0.2.0-dev <0.2.0",
@@ -98,9 +98,9 @@
     "es-module-shims": "~1.10.0",
     "rimraf": "~6.0.1",
     "typescript": "~5.6.2",
-    "vite": "^5.4.4",
+    "vite": "^5.4.8",
     "vite-plugin-checker": "^0.8.0",
-    "vite-plugin-dts": "4.2.1",
+    "vite-plugin-dts": "4.2.2",
     "@typespec/react-components": "~0.57.0"
   },
   "peerDependencies": {},