@kylincloud/flamegraph 0.35.6

package/src/sass/_sanitize.scss

@@ -0,0 +1,407 @@
+// ==========================================================================
+// Sanitize - CSS Reset & Normalize (合并自 sanitize.css)
+// ==========================================================================
+
+// --------------------------------------------------------------------------
+// Document
+// --------------------------------------------------------------------------
+
+// Add border box sizing in all browsers (opinionated).
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+// 1. Add text decoration inheritance in all browsers (opinionated).
+// 2. Add vertical alignment inheritance in all browsers (opinionated).
+::before,
+::after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+// 1. Use the default cursor in all browsers (opinionated).
+// 2. Change the line height in all browsers (opinionated).
+// 3. Use a 4-space tab width in all browsers (opinionated).
+// 4. Remove the grey highlight on links in iOS (opinionated).
+// 5. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+// 6. Breaks words to prevent overflow in all browsers (opinionated).
+html {
+  cursor: default;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-tap-highlight-color: transparent;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+}
+
+// --------------------------------------------------------------------------
+// Sections
+// --------------------------------------------------------------------------
+
+body {
+  margin: 0;
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+// --------------------------------------------------------------------------
+// Grouping content
+// --------------------------------------------------------------------------
+
+// Remove the margin on nested lists
+dl dl, dl ol, dl ul,
+ol dl, ul dl,
+ol ol, ol ul,
+ul ol, ul ul {
+  margin: 0;
+}
+
+hr {
+  height: 0;
+  overflow: visible;
+}
+
+main {
+  display: block;
+}
+
+nav ol,
+nav ul {
+  list-style: none;
+  padding: 0;
+}
+
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+// --------------------------------------------------------------------------
+// Text-level semantics
+// --------------------------------------------------------------------------
+
+a {
+  background-color: transparent;
+}
+
+abbr[title] {
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+// --------------------------------------------------------------------------
+// Embedded content
+// --------------------------------------------------------------------------
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+audio,
+video {
+  display: inline-block;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+iframe {
+  border-style: none;
+}
+
+img {
+  border-style: none;
+}
+
+svg:not([fill]) {
+  fill: currentColor;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+// --------------------------------------------------------------------------
+// Tabular data
+// --------------------------------------------------------------------------
+
+table {
+  border-collapse: collapse;
+}
+
+// --------------------------------------------------------------------------
+// Forms
+// --------------------------------------------------------------------------
+
+button,
+input,
+select {
+  margin: 0;
+}
+
+button {
+  overflow: visible;
+  text-transform: none;
+}
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+fieldset {
+  border: 1px solid #a0a0a0;
+  padding: 0.35em 0.75em 0.625em;
+}
+
+input {
+  overflow: visible;
+}
+
+legend {
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  white-space: normal;
+}
+
+progress {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+select {
+  text-transform: none;
+}
+
+textarea {
+  margin: 0;
+  overflow: auto;
+  resize: vertical;
+}
+
+[type='checkbox'],
+[type='radio'] {
+  padding: 0;
+}
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+// --------------------------------------------------------------------------
+// Forms - Enhanced (from forms.css)
+// --------------------------------------------------------------------------
+
+button,
+input,
+select,
+textarea {
+  background-color: transparent;
+  border: 1px solid WindowFrame;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  padding: 0.25em 0.375em;
+}
+
+select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background: no-repeat right center / 1em;
+  border-radius: 0;
+  padding-right: 1em;
+}
+
+select:not([multiple]):not([size]) {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
+}
+
+::-ms-expand {
+  display: none;
+}
+
+:-ms-input-placeholder {
+  color: rgba(0, 0, 0, 0.54);
+}
+
+// --------------------------------------------------------------------------
+// Interactive
+// --------------------------------------------------------------------------
+
+details {
+  display: block;
+}
+
+dialog {
+  background-color: white;
+  border: solid;
+  color: black;
+  display: block;
+  height: fit-content;
+  left: 0;
+  margin: auto;
+  padding: 1em;
+  position: absolute;
+  right: 0;
+  width: fit-content;
+}
+
+dialog:not([open]) {
+  display: none;
+}
+
+summary {
+  display: list-item;
+}
+
+// --------------------------------------------------------------------------
+// Scripting
+// --------------------------------------------------------------------------
+
+canvas {
+  display: inline-block;
+}
+
+template {
+  display: none;
+}
+
+// --------------------------------------------------------------------------
+// User interaction
+// --------------------------------------------------------------------------
+
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea,
+[tabindex] {
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+}
+
+[hidden] {
+  display: none;
+}
+
+// --------------------------------------------------------------------------
+// Accessibility
+// --------------------------------------------------------------------------
+
+[aria-busy='true'] {
+  cursor: progress;
+}
+
+[aria-controls] {
+  cursor: pointer;
+}
+
+[aria-disabled='true'],
+[disabled] {
+  cursor: not-allowed;
+}
+
+[aria-hidden='false'][hidden] {
+  display: initial;
+}
+
+[aria-hidden='false'][hidden]:not(:focus) {
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+}
+
+// --------------------------------------------------------------------------
+// Typography (from typography.css)
+// --------------------------------------------------------------------------
+
+html {
+  font-family: system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Ubuntu',
+    'Cantarell', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+code,
+kbd,
+samp,
+pre {
+  font-family: 'Menlo', 'Consolas', 'Roboto Mono', 'Ubuntu Monospace',
+    'Noto Mono', 'Oxygen Mono', 'Liberation Mono', monospace,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+// --------------------------------------------------------------------------
+// Focus visible
+// --------------------------------------------------------------------------
+
+:focus-visible {
+  outline: revert !important;
+}

package/src/sass/_variables.scss

@@ -0,0 +1,53 @@
+// ==========================================================================
+// SCSS Variables - 颜色变量定义
+// ==========================================================================
+
+// 基础背景色
+$bg-color: #1b1b1b;
+$btn-color: #272727;
+$btn-hover-color: #3b3b3b;
+
+// --------------------------------------------------------------------------
+// 调色板集合 (可根据需要切换)
+// --------------------------------------------------------------------------
+
+// Bdazzled Blue Palette
+$bdazzled-blue: #3d5a80ff;
+$pale-cerulean: #98c1d9ff;
+$light-cyan: #e0fbfcff;
+$burnt-sienna: #ee6c4dff;
+$gunmetal: #293241ff;
+
+// Floral White Palette
+$floral-white: #fffcf2ff;
+$pale-silver: #ccc5b9ff;
+$black-olive: #403d39ff;
+$eerie-black: #252422ff;
+$flame: #eb5e28ff;
+
+// Space Cadet Palette
+$space-cadet: #2d3142ff;
+$silver: #bfc0c0ff;
+$white: #ffffffff;
+$mandarin: #ef8354ff;
+$independence: #4f5d75ff;
+
+// Black Coral Palette
+$black-coral: #495867ff;
+$blue-yonder: #577399ff;
+$beau-blue: #bdd5eaff;
+$ghost-white: #f7f7ffff;
+$orange-red-crayola: #fe5f55ff;
+
+// Rich Black Palette
+$rich-black-fogra-29: #0d1b2aff;
+$oxford-blue: #1b263bff;
+$shadow-blue: #778da9ff;
+$platinum: #e0e1ddff;
+
+// Davys Grey Palette
+$davys-grey: #484a47ff;
+$cadet: #5c6d70ff;
+$burnished-brown: #a37774ff;
+$middle-red: #e88873ff;
+$melon: #e0ac9dff;

package/src/sass/flamegraph.scss

@@ -0,0 +1,18 @@
+// ==========================================================================
+// Flamegraph Styles - 主入口文件
+// ==========================================================================
+
+// 1. 基础变量和工具
+@use './mixins' as *;
+@use './variables' as *;      // 替换 @import './variables';
+@use './css-variables' as *;  // 替换 @import './css-variables';
+@use './sanitize';            // 替换 @import './sanitize';
+@use './common';              // 替换 @import './common';
+
+// 2. 自定义元素基础样式
+pyro-flamegraph {
+  color: var(--ps-neutral-2);
+  -webkit-font-smoothing: antialiased;
+  font: 400 16px/1.7 -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}

package/src/search.spec.ts

@@ -0,0 +1,11 @@
+import { isMatch } from './search';
+
+describe('search', () => {
+  it('matches substrings', () => {
+    expect(isMatch('foo', 'foobar')).toBe(true);
+  });
+
+  it('ignores cases', () => {
+    expect(isMatch('foo', 'FOOBAR')).toBe(true);
+  });
+});

package/src/search.ts

@@ -0,0 +1,4 @@
+// Whether a query matches a node
+export function isMatch(query: string, nodeName: string) {
+  return nodeName.toLowerCase().includes(query.toLowerCase());
+}

package/src/shameful-any.d.ts

@@ -0,0 +1,2 @@
+// src/types/shameful-any.d.ts
+type ShamefulAny = any;

package/src/shims/Box.module.scss

@@ -0,0 +1,57 @@
+.box {
+  background-color: var(--ps-ui-foreground);
+  border: 1px solid var(--ps-ui-border);
+  border-radius: 4px;
+
+  position: relative;
+}
+
+.padding {
+  margin-bottom: 10px;
+  padding: 10px;
+}
+
+.collapseBox {
+  @extend .box;
+  margin-bottom: 10px;
+
+  .box {
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+    padding-bottom: 0;
+    height: auto;
+
+    &.collapsedContent {
+      height: 0;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+    }
+  }
+}
+
+.collapseTitle {
+  font-weight: 500;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 5px 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+
+  &:hover {
+    background-color: var(--ps-ui-border);
+  }
+}
+
+.collapseIcon {
+  display: flex;
+  transition: transform 0.1s;
+
+  &.collapsed {
+    transform: rotate(90deg);
+    display: flex;
+  }
+}

package/src/shims/Box.tsx

@@ -0,0 +1,105 @@
+// src/shims/Box.tsx
+import React, { useState } from 'react';
+import classNames from 'classnames/bind';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
+import styles from './Box.module.scss';
+
+const cx = classNames.bind(styles);
+
+/**
+ * Box 支持的主题类型
+ * - dark  : 原 Pyroscope 深色风格（默认）
+ * - light : 原 light 主题
+ * - kylin : 贴近 antd 白色系的主题（在 _css-variables.scss 里定义）
+ */
+export type BoxTheme = 'dark' | 'light' | 'kylin';
+
+/**
+ * Box renders its children with a box around it
+ */
+export interface BoxProps {
+  children: React.ReactNode;
+  /**
+   * 关闭 padding，默认 false
+   */
+  noPadding?: boolean;
+
+  /**
+   * 额外 className（来自宿主项目）
+   */
+  className?: string;
+
+  /**
+   * Box 使用的主题，默认 'dark'
+   */
+  theme?: BoxTheme;
+}
+
+export default function Box(props: BoxProps) {
+  const {
+    children,
+    noPadding,
+    className = '',
+    theme = 'dark', // ✅ 默认保持原来的 dark 风格
+  } = props;
+
+  const paddingClass = noPadding ? '' : styles.padding;
+
+  return (
+    <div
+      className={`${styles.box} ${paddingClass} ${className}`}
+      // ✅ 把主题挂在 Box 自己身上，作为 CSS 变量的“局部根”
+      data-theme={theme}
+    >
+      {children}
+    </div>
+  );
+}
+
+// ===================== 折叠盒子 =====================
+
+export interface CollapseBoxProps {
+  /** 标题（必填） */
+  title: string;
+  children: React.ReactNode;
+  /**
+   * 折叠 Box 的主题，默认也用 dark
+   */
+  theme?: BoxTheme;
+}
+
+export function CollapseBox({ title, children, theme = 'dark' }: CollapseBoxProps) {
+  const [collapsed, toggleCollapse] = useState(false);
+
+  return (
+    <div
+      className={styles.collapseBox}
+      // ✅ 外层也挂一个 theme，保证边框/背景色跟 Box 一致
+      data-theme={theme}
+    >
+      <div
+        onClick={() => toggleCollapse((c) => !c)}
+        className={styles.collapseTitle}
+        aria-hidden
+      >
+        <div>{title}</div>
+        <FontAwesomeIcon
+          className={cx({
+            [styles.collapseIcon]: true,
+            [styles.collapsed]: collapsed,
+          })}
+          icon={faChevronDown}
+        />
+      </div>
+      <Box
+        theme={theme}
+        className={cx({
+          [styles.collapsedContent]: collapsed,
+        })}
+      >
+        {children}
+      </Box>
+    </div>
+  );
+}