From d332fe9c84fc51f94ba0ccedd46bf2026db4fa66 Mon Sep 17 00:00:00 2001 From: Rob Hough Date: Tue, 28 Apr 2026 10:53:05 +0100 Subject: [PATCH] refactor(editor): Align @n8n/design-system with DS3 (no-changelog) (#28428) --- .../n8n/skills/design-system-rules/SKILL.md | 4 +- .gitignore | 1 + AGENTS.md | 7 +- cubic.yaml | 4 +- .../src/rules/css-var-naming.test.ts | 47 +- .../src/rules/css-var-naming.ts | 33 + .../src/components/N8nButton/Button.vue | 76 +-- .../src/components/N8nCard/Card.vue | 2 +- .../components/N8nHeading/Heading.stories.ts | 6 + .../src/components/N8nHeading/Heading.vue | 69 +- .../src/components/N8nInput/Input.vue | 12 +- .../N8nResizeWrapper/ResizeWrapper.vue | 2 + .../src/components/N8nText/Text.stories.ts | 6 + .../src/components/N8nText/Text.vue | 69 +- .../design-system/src/css/_primitives.scss | 379 ++++++----- .../design-system/src/css/_tokens.legacy.scss | 146 +++++ .../@n8n/design-system/src/css/_tokens.scss | 294 ++------- .../design-system/src/css/mixins/_focus.scss | 3 +- .../src/styleguide/ColorCircles.test.ts | 33 - .../src/styleguide/ColorCircles.utils.ts | 28 - .../src/styleguide/ColorCircles.vue | 95 --- .../src/styleguide/Sizes.test.ts | 24 - .../design-system/src/styleguide/Sizes.vue | 87 --- .../src/styleguide/border.stories.ts | 30 - .../src/styleguide/colors.stories.ts | 54 -- .../styleguide/colorsprimitives.stories.ts | 60 -- .../design-system/src/styleguide/colour.mdx | 52 ++ .../components/PrimitivesColorTable.vue | 239 +++++++ .../styleguide/components/SpacingPreview.vue | 79 --- .../src/styleguide/css-tokens.mdx | 97 +++ .../src/styleguide/fonts.stories.ts | 37 -- .../design-system/src/styleguide/shadow.mdx | 96 +++ .../src/styleguide/spacing-size.mdx | 78 +++ .../src/styleguide/spacing.stories.ts | 21 - .../design-system/src/styleguide/type.mdx | 91 +++ .../styleguide/utilities/spacing.stories.ts | 46 -- .../@n8n/design-system/src/types/text.ts | 3 + .../@n8n/storybook/.storybook/main.ts | 14 +- .../@n8n/storybook/.storybook/preview.ts | 1 - .../@n8n/storybook/.storybook/storybook.scss | 18 + packages/frontend/@n8n/storybook/package.json | 2 + packages/frontend/AGENTS.md | 136 +--- .../insights/components/InsightsSummary.vue | 8 +- .../ndv/shared/views/NodeDetailsViewV2.vue | 1 + pnpm-lock.yaml | 613 ++++++++++++++++++ 45 files changed, 1979 insertions(+), 1224 deletions(-) rename .agents/design-system-style-rules.md => .claude/plugins/n8n/skills/design-system-rules/SKILL.md (91%) create mode 100644 packages/frontend/@n8n/design-system/src/css/_tokens.legacy.scss delete mode 100644 packages/frontend/@n8n/design-system/src/styleguide/ColorCircles.test.ts delete mode 100644 packages/frontend/@n8n/design-system/src/styleguide/ColorCircles.utils.ts delete mode 100644 packages/frontend/@n8n/design-system/src/styleguide/ColorCircles.vue delete mode 100644 packages/frontend/@n8n/design-system/src/styleguide/Sizes.test.ts delete mode 100644 packages/frontend/@n8n/design-system/src/styleguide/Sizes.vue delete mode 100644 packages/frontend/@n8n/design-system/src/styleguide/border.stories.ts delete mode 100644 packages/frontend/@n8n/design-system/src/styleguide/colors.stories.ts delete mode 100644 packages/frontend/@n8n/design-system/src/styleguide/colorsprimitives.stories.ts create mode 100644 packages/frontend/@n8n/design-system/src/styleguide/colour.mdx create mode 100644 packages/frontend/@n8n/design-system/src/styleguide/components/PrimitivesColorTable.vue delete mode 100644 packages/frontend/@n8n/design-system/src/styleguide/components/SpacingPreview.vue create mode 100644 packages/frontend/@n8n/design-system/src/styleguide/css-tokens.mdx delete mode 100644 packages/frontend/@n8n/design-system/src/styleguide/fonts.stories.ts create mode 100644 packages/frontend/@n8n/design-system/src/styleguide/shadow.mdx create mode 100644 packages/frontend/@n8n/design-system/src/styleguide/spacing-size.mdx delete mode 100644 packages/frontend/@n8n/design-system/src/styleguide/spacing.stories.ts create mode 100644 packages/frontend/@n8n/design-system/src/styleguide/type.mdx delete mode 100644 packages/frontend/@n8n/design-system/src/styleguide/utilities/spacing.stories.ts diff --git a/.agents/design-system-style-rules.md b/.claude/plugins/n8n/skills/design-system-rules/SKILL.md similarity index 91% rename from .agents/design-system-style-rules.md rename to .claude/plugins/n8n/skills/design-system-rules/SKILL.md index 8b14eac3e6d..b70a481bbfe 100644 --- a/.agents/design-system-style-rules.md +++ b/.claude/plugins/n8n/skills/design-system-rules/SKILL.md @@ -1,7 +1,7 @@ # Design System Style Review Rules -Use these rules when reviewing CSS/SCSS/Vue style changes, especially in -`packages/frontend/` and `packages/frontend/@n8n/design-system/`. +Use these rules when working in `packages/frontend/` and `packages/frontend/@n8n/design-system/`. +Always follow guidance in `packages/frontend/@n8n/design-system/src/styleguide/*.mdx`. ## 1) Token source priority diff --git a/.gitignore b/.gitignore index c4ea3791749..b0842882fcf 100644 --- a/.gitignore +++ b/.gitignore @@ -25,6 +25,7 @@ packages/**/.turbo *.swp CHANGELOG-*.md *.mdx +!packages/frontend/@n8n/design-system/**/*.mdx build-storybook.log build.log *.junit.xml diff --git a/AGENTS.md b/AGENTS.md index 75450419fc2..606e242bb13 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -146,14 +146,11 @@ const children = getChildNodes(workflow.connections, 'NodeName', 'main', 1); - Import from appropriate error classes in each package ### Frontend Development +- Refer to `packages/frontend/AGENTS.md` - **All UI text must use i18n** - add translations to `@n8n/i18n` package - **Use CSS variables directly** - never hardcode spacing as px values - **data-testid must be a single value** (no spaces or multiple values) -- For style changes and design-system updates, follow - `.agents/design-system-style-rules.md` - -When implementing CSS, refer to @packages/frontend/CLAUDE.md for guidelines on -CSS variables and styling conventions. +- Always use `design-system-rules` skill in reviews ### Testing Guidelines - **Always work from within the package directory** when running tests diff --git a/cubic.yaml b/cubic.yaml index 27e275cee7c..44fc469e132 100644 --- a/cubic.yaml +++ b/cubic.yaml @@ -43,7 +43,7 @@ reviews: ## Step 4: Design System Style Rules - Follow `.agents/design-system-style-rules.md` for all CSS/SCSS/Vue style + Follow `.claude/plugins/n8n/skills/design-system-rules/SKILL.md` for all CSS/SCSS/Vue style review guidance. Enforcement level: @@ -213,7 +213,7 @@ reviews: humans handle edge cases. - name: Design System Tokens description: |- - Follow `.agents/design-system-style-rules.md`. + Follow `.claude/plugins/n8n/skills/design-system-rules/SKILL.md`. Apply balanced enforcement: - Strong warning: hard-coded visual values, legacy token usage, and diff --git a/packages/@n8n/stylelint-config/src/rules/css-var-naming.test.ts b/packages/@n8n/stylelint-config/src/rules/css-var-naming.test.ts index 66e9d5b2048..af85699db3e 100644 --- a/packages/@n8n/stylelint-config/src/rules/css-var-naming.test.ts +++ b/packages/@n8n/stylelint-config/src/rules/css-var-naming.test.ts @@ -20,17 +20,29 @@ describe('css-var-naming rule', () => { describe('namespace validation', () => { it('should accept valid n8n namespace', async () => { const namespacePattern = ` - :root { - --n8n--color--primary: #0d6efd; - --n8n--button--color--background--primary: #0d6efd; - --n8n--button--color--background--primary--hover: #0b5ed7; - --n8n--color--text--muted: #888; - } - `; + :root { + --n8n--color--primary: #0d6efd; + --n8n--button--color--background--primary: #0d6efd; + --n8n--button--color--background--primary--hover: #0b5ed7; + --n8n--color--text--muted: #888; + } + `; const result = await lintCSS(namespacePattern); expect(result.warnings).toHaveLength(0); }); + it('should bypass validation for custom n8n-prefixed variables', async () => { + const customN8nVars = ` + :root { + --n8n--my-custom-token: #0d6efd; + --n8n--x: 1; + color: var(--n8n--my-custom-token); + } + `; + const result = await lintCSS(customN8nVars); + expect(result.warnings).toHaveLength(0); + }); + it('should accept valid chat namespace', async () => { const namespacePattern = ` :root { @@ -145,18 +157,17 @@ describe('css-var-naming rule', () => { }); }); - it('should reject properties without values', async () => { - const invalidPattern = ` + it('should accept standalone properties without values', async () => { + const validPattern = ` :root { - --color: #0d6efd; - --spacing: 4px; + --background: #fff; + --icon-color: #999; + --text-color: #222; + --border-color: #ddd; } `; - const result = await lintCSS(invalidPattern); - expect(result.warnings.length).toBeGreaterThan(0); - expect(result.warnings[0]).toMatchObject({ - text: expect.stringContaining('Must have at least 2 groups'), - }); + const result = await lintCSS(validPattern); + expect(result.warnings).toHaveLength(0); }); it('should reject spacing property without value', async () => { @@ -1028,13 +1039,13 @@ describe('css-var-naming rule', () => { it('should reject invalid CSS variables in var() references', async () => { const invalidVarReferences = ` .button { - background: var(--button-color--background); + background: var(--button-color); } `; const result = await lintCSS(invalidVarReferences); expect(result.warnings.length).toBeGreaterThan(0); expect(result.warnings[0]).toMatchObject({ - text: expect.stringContaining('Must include a valid property'), + text: expect.stringContaining('Must have at least 2 groups'), }); }); diff --git a/packages/@n8n/stylelint-config/src/rules/css-var-naming.ts b/packages/@n8n/stylelint-config/src/rules/css-var-naming.ts index 281276273ff..18bed5c870e 100644 --- a/packages/@n8n/stylelint-config/src/rules/css-var-naming.ts +++ b/packages/@n8n/stylelint-config/src/rules/css-var-naming.ts @@ -2,6 +2,7 @@ import stylelint from 'stylelint'; import type { Rule } from 'stylelint'; const ruleName = '@n8n/css-var-naming'; +const DESIGN_SYSTEM_CSS_PATH_SEGMENT = '/frontend/@n8n/design-system/src/css/'; const messages = stylelint.utils.ruleMessages(ruleName, { rejected: (variable: string, reason: string) => `Invalid CSS variable "${variable}": ${reason}`, @@ -19,6 +20,8 @@ const PROPERTY_VOCABULARY = new Set([ 'color--text', 'color--background', 'color--foreground', + 'background', + 'text-color', 'border-color', 'border-width', 'border-top-color', @@ -33,6 +36,7 @@ const PROPERTY_VOCABULARY = new Set([ 'size', 'stroke-width', 'shadow', + 'shadow-color', 'spacing', 'padding', 'font-size', @@ -59,6 +63,7 @@ const PROPERTY_VOCABULARY = new Set([ 'bottom', 'left', 'right', + 'letter-spacing', ]); // Properties that can be used as standalone single-group variables (without a value) @@ -70,6 +75,11 @@ const STANDALONE_PROPERTIES = new Set([ 'border-width', 'border', 'font-family', + 'background', + 'icon-color', + 'text-color', + 'shadow-color', + 'letter-spacing', ]); const STATES = new Set([ @@ -93,6 +103,8 @@ const MODES = new Set(['light', 'dark', 'hc', 'rtl', 'print']); const MEDIA = new Set(['sm', 'md', 'lg', 'xl', '2xl']); +const N8N_BYPASS_PREFIX = '--n8n--'; + // Ignore issues related to these namespaces const DISABLE_CHECK_FOR_NAMESPACES = new Set(['reka', 'ag', 'chat']); @@ -141,7 +153,24 @@ interface ValidationResult { reason?: string; } +function shouldValidateFile(filePath: string | undefined) { + if (!filePath) { + return false; + } + + const normalizedPath = filePath.replace(/\\/g, '/'); + + return normalizedPath.includes(DESIGN_SYSTEM_CSS_PATH_SEGMENT); +} + function shouldSkip(variable: string) { + if (variable.startsWith(N8N_BYPASS_PREFIX)) { + const groups = variable.slice(2).split('--').slice(1); + const hasKnownProperty = groups.some((group) => PROPERTY_VOCABULARY.has(group)); + + return !hasKnownProperty; + } + // Split into groups first (drop first empty element from leading --) const parts = variable.slice(2).split('-'); if (DISABLE_CHECK_FOR_NAMESPACES.has(parts[0])) { @@ -350,6 +379,10 @@ function validateCssVariable(variable: string): ValidationResult { const ruleFunction: Rule = (primary, secondaryOptions, context) => { return (root, result) => { + if (root.source?.input.file && !shouldValidateFile(root.source.input.file)) { + return; + } + const validOptions = stylelint.utils.validateOptions(result, ruleName, { actual: primary, }); diff --git a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue index 11a13ad86f5..5d8b3c6ac82 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue @@ -147,8 +147,8 @@ const handleClick = (event: MouseEvent) => { font-size: var(--button--font-size); --button--color--background: transparent; - --button--color--background-hover: transparent; - --button--color--background-active: transparent; + --button--color--background-hover: var(--background--hover); + --button--color--background-active: var(--background--active); --button--color: light-dark(var(--color--neutral-900), var(--color--neutral-100)); --button--shadow: 0 0 0 0 transparent; --button--shadow--hover: 0 0 0 0 transparent; @@ -191,6 +191,7 @@ const handleClick = (event: MouseEvent) => { &:focus-visible { @include focus.focus-ring; + --button--border-color: var(--focus--border-color) !important; } &.xsmall { @@ -229,50 +230,30 @@ const handleClick = (event: MouseEvent) => { } &.solid { - --button--color--background: var(--color--orange-400); - --button--color--background-hover: var(--color--orange-500); - --button--color--background-active: var(--color--orange-600); + --button--color--background: var(--background--brand); + --button--color--background-hover: var(--background--brand--hover); + --button--color--background-active: var(--background--brand--active); --button--color: var(--color--neutral-white); - --button--shadow: 0 1px 3px 0 - light-dark(var(--color--black-alpha-100), var(--color--black-alpha-200)); - --button--shadow--hover: 0 1px 3px 0 - light-dark(var(--color--black-alpha-100), var(--color--black-alpha-200)); - --button--shadow--active: 0 1px 3px 0 - light-dark(var(--color--black-alpha-100), var(--color--black-alpha-200)); - --button--border-color: var(--color--orange-400); - --button--border-color--hover: var(--color--orange-500); - --button--border-color--active: var(--color--orange-600); + --button--shadow: var(--shadow--xs); + --button--shadow--hover: var(--shadow--xs); + --button--shadow--active: var(--shadow--xs); + --button--border-color: var(--background--brand); + --button--border-color--hover: var(--background--brand--hover); + --button--border-color--active: var(--background--brand--active); --button--border--shadow: 0 0 0 1px var(--button--border-color); --button--border--shadow--hover: 0 0 0 1px var(--button--border-color--hover); --button--border--shadow--active: 0 0 0 1px var(--button--border-color--active); } &.subtle { - --button--color--background: light-dark(var(--color--neutral-white), var(--color--neutral-800)); - --button--color--background-hover: light-dark( - var(--color--neutral-150), - var(--color--neutral-700) - ); - --button--color--background-active: light-dark( - var(--color--neutral-200), - var(--color--neutral-600) - ); - --button--shadow: - 0 1px 3px light-dark(var(--color--black-alpha-100), var(--color--black-alpha-300)), - 0 0 0 1.5px light-dark(transparent, var(--color--black-alpha-100)); - --button--shadow--hover: - 0 1px 3px 0 light-dark(var(--color--black-alpha-200), var(--color--black-alpha-300)), - 0 0 0 1px light-dark(transparent, var(--color--black-alpha-100)); - --button--shadow--active: - 0 1px 3px 0 light-dark(var(--color--black-alpha-200), var(--color--black-alpha-300)), - 0 0 0 1px light-dark(transparent, var(--color--black-alpha-100)); - --button--border-color: light-dark( - var(--color--black-alpha-200), - var(--color--white-alpha-100) - ); + --button--color--background: var(--background--surface); + --button--shadow: var(--shadow--xs); + --button--shadow--hover: var(--shadow--xs); + --button--shadow--active: var(--shadow--xs); + --button--border-color: var(--border-color); --button--border-color--hover: light-dark( var(--color--black-alpha-200), - var(--color--white-alpha-300) + var(--color--white-alpha-200) ); --button--border-color--active: light-dark( var(--color--black-alpha-300), @@ -285,18 +266,7 @@ const handleClick = (event: MouseEvent) => { &.outline { --button--color--background: transparent; - --button--color--background-hover: light-dark( - var(--color--neutral-150), - var(--color--white-alpha-100) - ); - --button--color--background-active: light-dark( - var(--color--black-alpha-200), - var(--color--white-alpha-200) - ); - --button--border-color: light-dark( - var(--color--black-alpha-200), - var(--color--white-alpha-100) - ); + --button--border-color: var(--border-color); --button--border-color--hover: light-dark( var(--color--black-alpha-200), var(--color--white-alpha-200) @@ -312,14 +282,6 @@ const handleClick = (event: MouseEvent) => { &.ghost { --button--color--background: transparent; - --button--color--background-hover: light-dark( - var(--color--black-alpha-100), - var(--color--white-alpha-100) - ); - --button--color--background-active: light-dark( - var(--color--black-alpha-200), - var(--color--white-alpha-200) - ); --button--border-color: transparent; --button--border--shadow: 0 0 0 1px var(--button--border-color); --button--border--shadow--hover: 0 0 0 1px var(--button--border-color); diff --git a/packages/frontend/@n8n/design-system/src/components/N8nCard/Card.vue b/packages/frontend/@n8n/design-system/src/components/N8nCard/Card.vue index 453c57d41d1..1832d56e46d 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nCard/Card.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nCard/Card.vue @@ -47,7 +47,7 @@ const classes = computed(() => ({ diff --git a/packages/frontend/@n8n/design-system/src/styleguide/Sizes.test.ts b/packages/frontend/@n8n/design-system/src/styleguide/Sizes.test.ts deleted file mode 100644 index 3fa70e17af3..00000000000 --- a/packages/frontend/@n8n/design-system/src/styleguide/Sizes.test.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { render } from '@testing-library/vue'; -import { mock, mockClear } from 'vitest-mock-extended'; - -import Sizes from './Sizes.vue'; - -describe('Sizes', () => { - const mockCssDeclaration = mock(); - window.getComputedStyle = () => mockCssDeclaration; - - beforeEach(() => { - mockClear(mockCssDeclaration); - }); - - it('should render a section with a variable', () => { - mockCssDeclaration.getPropertyValue.mockReturnValue('400'); - - const wrapper = render(Sizes, { - props: { - variables: ['--font-weight--regular'], - }, - }); - expect(wrapper.html()).toMatchSnapshot(); - }); -}); diff --git a/packages/frontend/@n8n/design-system/src/styleguide/Sizes.vue b/packages/frontend/@n8n/design-system/src/styleguide/Sizes.vue deleted file mode 100644 index 6992eee8010..00000000000 --- a/packages/frontend/@n8n/design-system/src/styleguide/Sizes.vue +++ /dev/null @@ -1,87 +0,0 @@ - - - - - diff --git a/packages/frontend/@n8n/design-system/src/styleguide/border.stories.ts b/packages/frontend/@n8n/design-system/src/styleguide/border.stories.ts deleted file mode 100644 index a8c8fcd31d0..00000000000 --- a/packages/frontend/@n8n/design-system/src/styleguide/border.stories.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { type StoryFn } from '@storybook/vue3-vite'; - -import VariableTable from './VariableTable.vue'; - -export default { - title: 'Styleguide/Border', - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898', - }, - }, -}; - -const Template = - (template: string): StoryFn => - () => ({ - components: { - VariableTable, - }, - template, - }); - -export const BorderRadius = Template( - "", -); - -export const BorderWidth = Template(''); - -export const BorderStyle = Template(''); diff --git a/packages/frontend/@n8n/design-system/src/styleguide/colors.stories.ts b/packages/frontend/@n8n/design-system/src/styleguide/colors.stories.ts deleted file mode 100644 index 4db0bb08199..00000000000 --- a/packages/frontend/@n8n/design-system/src/styleguide/colors.stories.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { type StoryFn } from '@storybook/vue3-vite'; - -import ColorCircles from './ColorCircles.vue'; - -export default { - title: 'Styleguide/Colors Tokens', - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23', - }, - }, -}; - -const Template = - (template: string): StoryFn => - () => ({ - components: { - ColorCircles, - }, - template, - }); - -export const Primary = Template( - "", -); - -export const Secondary = Template( - "", -); - -export const Success = Template( - "", -); - -export const Warning = Template( - "", -); - -export const Danger = Template( - "", -); - -export const Text = Template( - "", -); - -export const Foreground = Template( - "", -); - -export const Background = Template( - "", -); diff --git a/packages/frontend/@n8n/design-system/src/styleguide/colorsprimitives.stories.ts b/packages/frontend/@n8n/design-system/src/styleguide/colorsprimitives.stories.ts deleted file mode 100644 index 21f65e15879..00000000000 --- a/packages/frontend/@n8n/design-system/src/styleguide/colorsprimitives.stories.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { type StoryFn } from '@storybook/vue3-vite'; - -import ColorCircles from './ColorCircles.vue'; - -export default { - title: 'Styleguide/Colors Primitives', - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23', - }, - }, -}; - -const Template = - (template: string): StoryFn => - () => ({ - components: { - ColorCircles, - }, - template, - }); - -export const Gray = Template( - "", -); - -export const Primary = Template( - "", -); - -export const Secondary = Template( - "", -); - -export const AlternateA = Template( - "", -); - -export const AlternateB = Template( - "", -); - -export const AlternateC = Template( - "", -); - -export const AlternateD = Template( - "", -); - -export const AlternateE = Template( - "", -); - -export const AlternateF = Template(''); - -export const AlternateG = Template(''); - -export const AlternateH = Template(''); diff --git a/packages/frontend/@n8n/design-system/src/styleguide/colour.mdx b/packages/frontend/@n8n/design-system/src/styleguide/colour.mdx new file mode 100644 index 00000000000..82bb9caabd9 --- /dev/null +++ b/packages/frontend/@n8n/design-system/src/styleguide/colour.mdx @@ -0,0 +1,52 @@ +import { Meta } from '@storybook/addon-docs/blocks'; + +import PrimitivesColorTable from './components/PrimitivesColorTable.vue'; + + + +# Colour + +We have a vast, beautiful color palette out of the box. Prefer using these rather than custom colours (e.g #ff0000). These are similar to Tailwind CSS. + +Each colour has 13 steps ranging from lightest (50) to darkest (950). + +
+ +
+ +## Tokens + +Instead of using the raw primitive colours, it's often better to use a token. These are aliases for common use cases (e.g text color) to make it easier to keep UI consistent and flexible. + +### Text + +| Token | Description | +| ----------------------- | ----------------------------------------------- | +| `--text-color` | Default body text and primary labels. | +| `--text-color--subtle` | Secondary text such as helper copy or metadata. | +| `--text-color--subtler` | Tertiary or low-emphasis text. | +| `--text-color--inverse` | Text shown on dark or inverse surfaces. | + +### Background + +| Token | Description | +| ----------------------- | ------------------------------------------------------ | +| `--background--surface` | Base surface for cards, panels, and page sections. | +| `--background--hover` | Hover state for neutral interactive surfaces. | +| `--background--active` | Pressed/active state for neutral interactive surfaces. | +| `--background--success` | Success banners, badges, or confirmation surfaces. | +| `--background--warning` | Warning callouts and cautionary surfaces. | +| `--background--danger` | Danger/error surfaces behind destructive messaging. | +| `--background--info` | Informational surfaces and neutral notices. | + +### Border + +| Token | Description | +| ------------------------- | ------------------------------------------------- | +| `--border-color` | Default border for inputs, cards, and separators. | +| `--border-color--subtle` | Low-contrast dividers and lightweight outlines. | +| `--border-color--strong` | More prominent outlines for elevated contrast. | +| `--border-color--success` | Borders for success states and confirmations. | +| `--border-color--warning` | Borders for warning states and cautions. | +| `--border-color--danger` | Borders for error states and destructive actions. | +| `--border-color--info` | Borders for informational states. | diff --git a/packages/frontend/@n8n/design-system/src/styleguide/components/PrimitivesColorTable.vue b/packages/frontend/@n8n/design-system/src/styleguide/components/PrimitivesColorTable.vue new file mode 100644 index 00000000000..ba0e2c4d9c7 --- /dev/null +++ b/packages/frontend/@n8n/design-system/src/styleguide/components/PrimitivesColorTable.vue @@ -0,0 +1,239 @@ + + + + + diff --git a/packages/frontend/@n8n/design-system/src/styleguide/components/SpacingPreview.vue b/packages/frontend/@n8n/design-system/src/styleguide/components/SpacingPreview.vue deleted file mode 100644 index f4c66827664..00000000000 --- a/packages/frontend/@n8n/design-system/src/styleguide/components/SpacingPreview.vue +++ /dev/null @@ -1,79 +0,0 @@ - - - - - diff --git a/packages/frontend/@n8n/design-system/src/styleguide/css-tokens.mdx b/packages/frontend/@n8n/design-system/src/styleguide/css-tokens.mdx new file mode 100644 index 00000000000..3215f6c3beb --- /dev/null +++ b/packages/frontend/@n8n/design-system/src/styleguide/css-tokens.mdx @@ -0,0 +1,97 @@ +import { Meta } from '@storybook/addon-docs/blocks'; + + + +# CSS Tokens + +Our CSS variables are layered so we can keep the design system consistent and themeable. + +## Token layers + +There are two main token layers + +1. Primitives (`@n8n/design-system/src/css/_primitives.scss`) +2. Semantic Tokens (`@n8n/design-system/src/css/_tokens.scss`) + +### Primitives + +Raw design decisions: color scales, spacing, typography, radius, heights, durations, easing, and shadows. + +```scss +--color--orange-500: oklch(...); +--spacing--sm: 1rem; +--font-size--md: 1rem; +--shadow--md: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color); +``` + +### Semantic theme tokens + +Contextual tokens used by components (`--text-color`, `--background--surface`, `--border-color--success`, etc.). +These map to primitives (directly or through compatibility aliases), and have light/dark definitions via `@mixin theme` and `@mixin theme-dark`. + +## How to choose tokens + +- Use semantic tokens first in component styles (for example `--text-color`, `--background--surface`, `--icon-color`). +- Use primitives when you need a low-level scale value (for example spacing, radius, or a specific color step). +- Add new semantic tokens in `src/css/_tokens.scss` when the value is reused by multiple components or represents a shared UI meaning. +- Add new primitive tokens in `src/css/_primitives.scss` only for new base scales. + +## Naming rules + +Naming is validated by `@n8n/css-var-naming` in `packages/@n8n/stylelint-config/src/rules/css-var-naming.ts` for files in `@n8n/design-system/src/css`. + +### Required format + +- Use groups separated by double dashes: `--group--group`. +- Use lowercase alphanumerics; single dashes are allowed only within a group. +- Keep values after properties (for example `--color--primary`, not `--primary--color`). + +```scss +/* valid */ +--background--surface +--button--color--background--primary--hover +--font-weight--regular + +/* invalid */ +--background-surface +--Primary--color +--primary--color +``` + +### Property vocabulary + +Variable names must include a recognized property group such as `color`, `background`, `text-color`, `border-color`, `spacing`, `radius`, `shadow`, `font-size`, `font-weight`, `duration`, or `easing`. + +### Allowed exceptions + +- `--n8n--*` prefix bypasses validation for local/internal helper variables. +- Namespaces `--reka--*`, `--ag--*`, and `--chat--*` are ignored for third-party interoperability. +- Single-group variables are only allowed for specific standalone properties (for example `--border`, `--radius`, `--shadow`, `--font-family`). + +## Migration pattern (single-dash to double-dash) + +When replacing older tokens, preserve compatibility by chaining fallbacks: + +```scss +--color--secondary: var(--color-secondary, var(--color--purple-600)); +``` + +This gives us: + +- New naming for design system code. +- Existing overrides for embed/custom CSS users. +- Safe, incremental migration without breaking consumers. + +## Practical guidance for contributors + +- Prefer updating existing semantic tokens before introducing new one-off variables. +- If you must add a temporary exception, scope it tightly with `/* stylelint-disable @n8n/css-var-naming */` and re-enable immediately. +- Avoid hardcoded color hex values in component styles when an existing token can express the same intent. + +--- + + + Compatibility note: `src/css/_tokens.legacy.scss` contains non-semantic compatibility aliases used + during migration to the double-dash naming format. Keep new work on primitives + semantic tokens + in `src/css/_primitives.scss` and `src/css/_tokens.scss`. + diff --git a/packages/frontend/@n8n/design-system/src/styleguide/fonts.stories.ts b/packages/frontend/@n8n/design-system/src/styleguide/fonts.stories.ts deleted file mode 100644 index c051ed5f3e2..00000000000 --- a/packages/frontend/@n8n/design-system/src/styleguide/fonts.stories.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { type StoryFn } from '@storybook/vue3-vite'; - -import Sizes from './Sizes.vue'; -import VariableTable from './VariableTable.vue'; - -export default { - title: 'Styleguide/Font', -}; - -export const FontSize: StoryFn = () => ({ - components: { - Sizes, - }, - template: - "", -}); - -const Template = - (template: string): StoryFn => - () => ({ - components: { - VariableTable, - }, - template, - }); - -export const LineHeight = Template( - "", -); - -export const FontWeight = Template( - '', -); - -export const FontFamily = Template( - '', -); diff --git a/packages/frontend/@n8n/design-system/src/styleguide/shadow.mdx b/packages/frontend/@n8n/design-system/src/styleguide/shadow.mdx new file mode 100644 index 00000000000..61ac04f0787 --- /dev/null +++ b/packages/frontend/@n8n/design-system/src/styleguide/shadow.mdx @@ -0,0 +1,96 @@ +import { Meta, Source } from '@storybook/addon-docs/blocks'; + + + +# Shadows + +Create depth and elevation for UI elements + +Shadows can be applied using the `shadow-*` primitive. Variants range from `xs` to `xl` and can be used to create depth and elevation for UI elements. + +Below is a table showcasing the different shadow variants available in the design system. + +| Step | Value | Description | +| ------- | ------------------------ | -------------------------------------------------------------- | +| outline | `var(--shadow--outline)` | Used for focus outlines and similar effects. | +| 2xs | `var(--shadow--2xs)` | Used for very subtle shadows, such as small elements. | +| xs | `var(--shadow--xs)` | Used for slightly subtle shadows, such as on buttons or cards. | +| sm | `var(--shadow--sm)` | Used for standard shadows, such as on popovers or selects. | +| md | `var(--shadow--md)` | Used for more prominent shadows, such as floating elements. | +| lg | `var(--shadow--lg)` | Used for larger shadows. | +| xl | `var(--shadow--xl)` | Used for elevated elements, such as dialogs. | + +## Example + +Shadows can be applied using the `shadow-*` primitive. It's recommended to create a local variable and apply the `_primitives.scss` token for flexibility. + +
+
+
.box1
+
+
+
+
.box2
+
+
+
+
.box3
+
+
+
+ +```css +.box { + width: 160px; + height: 160px; + border-radius: var(--radius--lg); + background: var(--background--surface); + box-shadow: var(--n8n--shadow--box); +} + +.box1 { + --n8n--shadow--box: var(--shadow--xs); +} + +.box2 { + --n8n--shadow--box: var(--shadow--md); +} + +.box3 { + --n8n--shadow--box: var(--shadow--xl); +} +``` + + diff --git a/packages/frontend/@n8n/design-system/src/styleguide/spacing-size.mdx b/packages/frontend/@n8n/design-system/src/styleguide/spacing-size.mdx new file mode 100644 index 00000000000..7b10f141b92 --- /dev/null +++ b/packages/frontend/@n8n/design-system/src/styleguide/spacing-size.mdx @@ -0,0 +1,78 @@ +import { Meta } from '@storybook/addon-docs/blocks'; + + + +# Spacing & Size + +Our spacing scale is built to keep visual rhythm consistent across components, with step names (`5xs` to `5xl`) that map to fixed pixel values. + +Use adjacent steps when adjusting layouts so spacing feels intentional instead of drifting into one-off values. +The height scale complements spacing and gives controls a shared size language, so buttons, inputs, and panels align naturally. + +## Spacing + +| Name | Size (px) | Visualization | +| ---- | --------- | ------------------------------------------------------------------------------ | +| 5xs | 2px | | +| 4xs | 4px | | +| 3xs | 6px | | +| 2xs | 8px | | +| xs | 12px | | +| sm | 16px | | +| md | 20px | | +| lg | 24px | | +| xl | 32px | | +| 2xl | 48px | | +| 3xl | 64px | | +| 4xl | 128px | | +| 5xl | 256px | | + +## Height + +| Name | Size (px) | Visualization | +| ---- | --------- | ----------------------------------------------------------------------------- | +| 5xs | 8px | | +| 4xs | 12px | | +| 3xs | 16px | | +| 2xs | 20px | | +| xs | 24px | | +| sm | 28px | | +| md | 32px | | +| lg | 36px | | +| xl | 40px | | +| 2xl | 48px | | +| 3xl | 56px | | +| 4xl | 64px | | +| 5xl | 96px | | + +### Negative Values + +To get negative values, use the `calc()` function like so: + +```css +.box { + margin-inline: calc(var(--spacing--xs) * -1); /* -12px */ +} +``` + + diff --git a/packages/frontend/@n8n/design-system/src/styleguide/spacing.stories.ts b/packages/frontend/@n8n/design-system/src/styleguide/spacing.stories.ts deleted file mode 100644 index 3a0ae0b40f9..00000000000 --- a/packages/frontend/@n8n/design-system/src/styleguide/spacing.stories.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { type StoryFn } from '@storybook/vue3-vite'; - -import Sizes from './Sizes.vue'; - -export default { - title: 'Styleguide/Spacing', - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898', - }, - }, -}; - -export const Spacing: StoryFn = () => ({ - components: { - Sizes, - }, - template: - "", -}); diff --git a/packages/frontend/@n8n/design-system/src/styleguide/type.mdx b/packages/frontend/@n8n/design-system/src/styleguide/type.mdx new file mode 100644 index 00000000000..0c94cc7c410 --- /dev/null +++ b/packages/frontend/@n8n/design-system/src/styleguide/type.mdx @@ -0,0 +1,91 @@ +import { Meta, Typeset } from '@storybook/addon-docs/blocks'; + + + +export const typography = { + type: { + primary: 'InterVariable, sans-serif', + monospace: "CommitMono, ui-monospace, Menlo, Consolas, 'DejaVu Sans Mono', monospace", + }, + weight: { + regular: '400', + medium: '500', + bold: '600', + }, + size: { + s1: 8, + s2: 10, + s3: 12, + s4: 13, + s5: 14, + m1: 16, + m2: 18, + m3: 20, + l1: 28, + }, +}; + +export const SampleText = 'The quick brown fox jumps over the lazy dog.'; + +# Type + +**Font:** InterVariable + +**Weights:** 400 (regular), 500 (medium), 600 (bold) + + + +--- + +**Font:** CommitMono + +**Weights:** 400 (regular), 600 (bold) + + + +## Usage + +When rendering text inside the app, use `` or `` and stick to the style and size set. +Both of them share the same size and weight options. + +| Step | Size | Letter spacing | Line height | +| ---- | ----------------------- | --------------------------------- | ------------------------ | +| 4xs | `var(--font-size--4xs)` | `var(--letter-spacing--wide)` | `var(--line-height--xs)` | +| 3xs | `var(--font-size--3xs)` | `var(--letter-spacing--normal)` | `var(--line-height--sm)` | +| 2xs | `var(--font-size--2xs)` | `var(--letter-spacing--normal)` | `var(--line-height--md)` | +| xs | `var(--font-size--xs)` | `var(--letter-spacing--normal)` | `var(--line-height--md)` | +| sm | `var(--font-size--sm)` | `var(--letter-spacing--normal)` | `var(--line-height--lg)` | +| md | `var(--font-size--md)` | `var(--letter-spacing--normal)` | `var(--line-height--lg)` | +| lg | `var(--font-size--lg)` | `var(--letter-spacing--tight)` | `var(--line-height--xl)` | +| xl | `var(--font-size--xl)` | `var(--letter-spacing--tighter)` | `var(--line-height--xl)` | +| 2xl | `var(--font-size--2xl)` | `var(--letter-spacing--tightest)` | `var(--line-height--xl)` | diff --git a/packages/frontend/@n8n/design-system/src/styleguide/utilities/spacing.stories.ts b/packages/frontend/@n8n/design-system/src/styleguide/utilities/spacing.stories.ts deleted file mode 100644 index abdbfcd08e4..00000000000 --- a/packages/frontend/@n8n/design-system/src/styleguide/utilities/spacing.stories.ts +++ /dev/null @@ -1,46 +0,0 @@ -import type { StoryFn } from '@storybook/vue3-vite'; - -import SpacingPreview from '../components/SpacingPreview.vue'; - -export default { - title: 'Utilities/Spacing', -}; - -const Template: StoryFn = (args, { argTypes }) => ({ - setup: () => ({ args }), - props: Object.keys(argTypes), - components: { - SpacingPreview, - }, - template: '', -}); - -export const Padding = Template.bind({}); -Padding.args = { property: 'padding' }; - -export const PaddingTop = Template.bind({}); -PaddingTop.args = { property: 'padding', side: 'top' }; - -export const PaddingRight = Template.bind({}); -PaddingRight.args = { property: 'padding', side: 'right' }; - -export const PaddingBottom = Template.bind({}); -PaddingBottom.args = { property: 'padding', side: 'bottom' }; - -export const PaddingLeft = Template.bind({}); -PaddingLeft.args = { property: 'padding', side: 'left' }; - -export const Margin = Template.bind({}); -Margin.args = { property: 'margin' }; - -export const MarginTop = Template.bind({}); -MarginTop.args = { property: 'margin', side: 'top' }; - -export const MarginRight = Template.bind({}); -MarginRight.args = { property: 'margin', side: 'right' }; - -export const MarginBottom = Template.bind({}); -MarginBottom.args = { property: 'margin', side: 'bottom' }; - -export const MarginLeft = Template.bind({}); -MarginLeft.args = { property: 'margin', side: 'left' }; diff --git a/packages/frontend/@n8n/design-system/src/types/text.ts b/packages/frontend/@n8n/design-system/src/types/text.ts index 0b284a04ef3..37c6d2e6af6 100644 --- a/packages/frontend/@n8n/design-system/src/types/text.ts +++ b/packages/frontend/@n8n/design-system/src/types/text.ts @@ -1,6 +1,9 @@ const TEXT_SIZE = ['xsmall', 'small', 'mini', 'medium', 'large', 'xlarge'] as const; export type TextSize = (typeof TEXT_SIZE)[number]; +const TEXT_STEP = ['4xs', '3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const; +export type TextStep = (typeof TEXT_STEP)[number]; + const TEXT_COLOR = [ 'primary', 'secondary', diff --git a/packages/frontend/@n8n/storybook/.storybook/main.ts b/packages/frontend/@n8n/storybook/.storybook/main.ts index c7b945cdb91..52b8aed25e3 100644 --- a/packages/frontend/@n8n/storybook/.storybook/main.ts +++ b/packages/frontend/@n8n/storybook/.storybook/main.ts @@ -1,6 +1,7 @@ import type { StorybookConfig } from '@storybook/vue3-vite'; import { dirname } from 'path'; +import remarkGfm from 'remark-gfm'; import { fileURLToPath } from 'url'; @@ -16,13 +17,24 @@ const config: StorybookConfig = { '../../design-system/src/**/*.stories.@(js|jsx|mjs|ts|tsx)', '../../chat/src/**/*.stories.@(js|jsx|mjs|ts|tsx)', '../../../editor-ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)', + '../../design-system/src/**/*.mdx', ], addons: [ getAbsolutePath('@chromatic-com/storybook'), getAbsolutePath('@storybook/addon-vitest'), getAbsolutePath('@storybook/addon-a11y'), - getAbsolutePath('@storybook/addon-docs'), + { + name: getAbsolutePath('@storybook/addon-docs'), + options: { + mdxPluginOptions: { + mdxCompileOptions: { + remarkPlugins: [remarkGfm], + }, + }, + }, + }, getAbsolutePath('@storybook/addon-themes'), + getAbsolutePath('storybook-addon-vue-mdx'), ], framework: getAbsolutePath('@storybook/vue3-vite'), staticDirs: ['../../design-system/assets'], diff --git a/packages/frontend/@n8n/storybook/.storybook/preview.ts b/packages/frontend/@n8n/storybook/.storybook/preview.ts index 49beec75d4a..a83682662c9 100644 --- a/packages/frontend/@n8n/storybook/.storybook/preview.ts +++ b/packages/frontend/@n8n/storybook/.storybook/preview.ts @@ -79,7 +79,6 @@ export const parameters = { order: [ 'Docs', 'Styleguide', - ['Colors Primitives', 'Colors Tokens', 'Font', 'Spacing', 'Border'], 'Core', 'Assistant', 'Chat', diff --git a/packages/frontend/@n8n/storybook/.storybook/storybook.scss b/packages/frontend/@n8n/storybook/.storybook/storybook.scss index ffdcda2bf24..e0310f91a36 100644 --- a/packages/frontend/@n8n/storybook/.storybook/storybook.scss +++ b/packages/frontend/@n8n/storybook/.storybook/storybook.scss @@ -20,3 +20,21 @@ body { display: flex; gap: 1rem; } + +.sbdocs .sbdocs-content table { + width: 100%; + border-collapse: collapse; + font-size: var(--font-size--2xs); + margin-block: var(--spacing--2xl); +} + +.sbdocs .sbdocs-content th, +.sbdocs .sbdocs-content td { + padding: var(--spacing--2xs) var(--spacing--xs); + text-align: left; + border-bottom: 1px solid var(--color--neutral-300); +} + +.sbdocs .sbdocs-content th { + font-weight: var(--font-weight--bold); +} diff --git a/packages/frontend/@n8n/storybook/package.json b/packages/frontend/@n8n/storybook/package.json index a744decbd0e..aa30396a8f5 100644 --- a/packages/frontend/@n8n/storybook/package.json +++ b/packages/frontend/@n8n/storybook/package.json @@ -28,6 +28,7 @@ "@storybook/addon-themes": "catalog:storybook", "@storybook/addon-vitest": "catalog:storybook", "@storybook/vue3-vite": "catalog:storybook", + "storybook-addon-vue-mdx": "3.0.0", "@types/node": "^24.10.1", "@vitejs/plugin-vue": "catalog:frontend", "@vitest/browser-playwright": "^4.0.16", @@ -40,6 +41,7 @@ "unplugin-icons": "catalog:frontend", "vite": "catalog:", "vite-svg-loader": "catalog:frontend", + "remark-gfm": "^4.0.1", "vitest": "catalog:", "vue-tsc": "catalog:frontend" }, diff --git a/packages/frontend/AGENTS.md b/packages/frontend/AGENTS.md index d514a3f8678..480f511f4ca 100644 --- a/packages/frontend/AGENTS.md +++ b/packages/frontend/AGENTS.md @@ -1,133 +1,15 @@ # AGENTS.md -Extra information, specific to the frontend codebase. +Extra information, specific to the frontend codebase. Use this when doing any frontend work. -### Style Review Rules - -For CSS/SCSS/Vue style changes and updates touching `@n8n/design-system`, -follow `.agents/design-system-style-rules.md`. - -### CSS Variables Reference - -Use the following CSS variables to maintain consistency across the -application. These variables cover colors, spacing, typography, and borders. - -#### Colors -```css -/* Primary Colors */ ---color--primary--shade-1 ---color--primary ---color--primary--tint-1 ---color--primary--tint-2 ---color--primary--tint-3 - -/* Secondary Colors */ ---color--secondary--shade-1 ---color--secondary ---color--secondary--tint-1 ---color--secondary--tint-2 - -/* Success Colors */ ---color--success--shade-1 ---color--success ---color--success--tint-1 ---color--success--tint-2 ---color--success--tint-3 ---color--success--tint-4 - -/* Warning Colors */ ---color--warning--shade-1 ---color--warning ---color--warning--tint-1 ---color--warning--tint-2 - -/* Danger Colors */ ---color--danger--shade-1 ---color--danger ---color--danger--tint-3 ---color--danger--tint-4 - -/* Text Colors */ ---color--text--shade-1 ---color--text ---color--text--tint-1 ---color--text--tint-2 ---color--text--tint-3 ---color--text--danger - -/* Foreground Colors */ ---color--foreground--shade-2 ---color--foreground--shade-1 ---color--foreground ---color--foreground--tint-1 ---color--foreground--tint-2 - -/* Background Colors */ ---color--background--shade-2 ---color--background--shade-1 ---color--background ---color--background--light-2 ---color--background--light-3 -``` - -#### Spacing -```css ---spacing--5xs: 2px ---spacing--4xs: 4px ---spacing--3xs: 6px ---spacing--2xs: 8px ---spacing--xs: 12px ---spacing--sm: 16px ---spacing--md: 20px ---spacing--lg: 24px ---spacing--xl: 32px ---spacing--2xl: 48px ---spacing--3xl: 64px ---spacing--4xl: 128px ---spacing--5xl: 256px -``` - -#### Typography -```css ---font-size--3xs: 10px ---font-size--2xs: 12px ---font-size--xs: 13px ---font-size--sm: 14px ---font-size--md: 16px ---font-size--lg: 18px ---font-size--xl: 20px ---font-size--2xl: 28px - ---line-height--sm: 1.25 ---line-height--md: 1.3 ---line-height--lg: 1.35 ---line-height--xl: 1.5 - ---font-weight--regular: 400 ---font-weight--bold: 600 ---font-family: InterVariable, sans-serif -``` - -#### Borders -```css ---radius--sm: 2px ---radius: 4px ---radius--lg: 8px ---radius--xl: 12px - ---border-width: 1px ---border-style: solid ---border: var(--border-width) var(--border-style) var(--color--foreground) -``` - -### Icons (N8nIcon) - -Available icon names are in `packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts`. -Use keys from `updatedIconSet` only — `deprecatedIconSet` entries must not be used in new code. - -### Debounce Timing - -Use centralized constants from `@/app/constants/durations` instead of hardcoding: +- When reviewing CSS/SCSS/Vue changes in `@n8n/design-system` or `editor-ui`, always use `design-system-rules` skill. +- ALWAYS follow the guides in `@n8n/design-system/src/styleguide/*.mdx` +- PREFER using **semantic tokens** for styling from `@n8n/design-system/src/css/_tokens.scss` or `@n8n/design-system/src/css/_primitives.scss`. +- AVOID using legacy tokens from `@n8n/design-system/src/css/_tokens.legacy.scss` +- PREFER using existing components from `@n8n/design-system` over creating new ones +- Available icon names are in `packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts`. + Use keys from `updatedIconSet` only — `deprecatedIconSet` entries must not be used in new code. +- Use centralized constants from `@/app/constants/durations` instead of hardcoding: ```typescript import { DEBOUNCE_TIME, getDebounceTime } from '@/app/constants'; diff --git a/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsSummary.vue b/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsSummary.vue index 64585c5cfba..ddce6cb6d88 100644 --- a/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsSummary.vue +++ b/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsSummary.vue @@ -186,7 +186,7 @@ const trackTabClick = (insightType: keyof InsightsSummary) => { height: 101px; align-items: stretch; justify-content: space-evenly; - border: var(--border-width) var(--border-style) var(--color--foreground); + border: var(--border); border-radius: 6px; list-style: none; overflow-x: auto; @@ -196,7 +196,7 @@ const trackTabClick = (insightType: keyof InsightsSummary) => { justify-content: stretch; align-items: stretch; flex: 1 0; - border-left: var(--border-width) var(--border-style) var(--color--foreground); + border-left: var(--border); &:first-child { border-left: 0; @@ -216,11 +216,11 @@ const trackTabClick = (insightType: keyof InsightsSummary) => { width: 100%; height: 100%; padding: var(--spacing--3xs) var(--spacing--lg) 0; + background-color: var(--background--surface); border-bottom: 3px solid transparent; &:hover { - background-color: var(--color--background--light-3); - transition: background-color 0.3s; + background-color: var(--background-hover); } &.activeTab { diff --git a/packages/frontend/editor-ui/src/features/ndv/shared/views/NodeDetailsViewV2.vue b/packages/frontend/editor-ui/src/features/ndv/shared/views/NodeDetailsViewV2.vue index cbfb585d105..bbe34dafed1 100644 --- a/packages/frontend/editor-ui/src/features/ndv/shared/views/NodeDetailsViewV2.vue +++ b/packages/frontend/editor-ui/src/features/ndv/shared/views/NodeDetailsViewV2.vue @@ -906,6 +906,7 @@ onBeforeUnmount(() => { .column { min-width: 0; + background-color: var(--ndv--background--color); + .column { border-left: var(--border); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 51fe2273786..33fdefe2f38 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3556,9 +3556,15 @@ importers: playwright: specifier: catalog:e2e version: 1.58.0 + remark-gfm: + specifier: ^4.0.1 + version: 4.0.1 storybook: specifier: catalog:storybook version: 10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10) + storybook-addon-vue-mdx: + specifier: 3.0.0 + version: 3.0.0(@storybook/addon-docs@10.1.11(@types/react@18.0.27)(esbuild@0.25.10)(rollup@4.52.4)(storybook@10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10))(vite@8.0.2(@types/node@20.19.21)(esbuild@0.25.10)(jiti@2.6.1)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.16.1)(tsx@4.19.3)(yaml@2.8.3)))(@storybook/builder-vite@10.1.11(esbuild@0.25.10)(rollup@4.52.4)(storybook@10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10))(vite@8.0.2(@types/node@20.19.21)(esbuild@0.25.10)(jiti@2.6.1)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.16.1)(tsx@4.19.3)(yaml@2.8.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10))(vue@3.5.26(typescript@6.0.2)) typescript: specifier: 6.0.2 version: 6.0.2 @@ -11387,6 +11393,9 @@ packages: '@types/md5@2.3.5': resolution: {integrity: sha512-/i42wjYNgE6wf0j2bcTX6kuowmdL/6PE4IVitMpm2eYKBUuYCprdcWVK+xEF0gcV6ufMCRhtxmReGfc6hIK7Jw==} + '@types/mdast@4.0.4': + resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==} + '@types/mdurl@1.0.5': resolution: {integrity: sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==} @@ -11585,6 +11594,9 @@ packages: '@types/turndown@5.0.6': resolution: {integrity: sha512-ru00MoyeeouE5BX4gRL+6m/BsDfbRayOskWqUvh7CLGW+UXxHQItqALa38kKnOiZPqJrtzJUgAC2+F0rL1S4Pg==} + '@types/unist@3.0.3': + resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==} + '@types/utf8@3.0.3': resolution: {integrity: sha512-+lqLGxWZsEe4Z6OrzBI7Ym4SMUTaMS5yOrHZ0/IL0bpIye1Qbs4PpobJL2mLDbftUXlPFZR7fu6d1yM+bHLX1w==} @@ -12690,6 +12702,9 @@ packages: resolution: {integrity: sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==} engines: {node: '>= 10.0.0'} + bail@2.0.2: + resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==} + balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} @@ -13051,6 +13066,9 @@ packages: capital-case@1.0.4: resolution: {integrity: sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==} + ccount@2.0.1: + resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} + chai@5.2.0: resolution: {integrity: sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==} engines: {node: '>=12'} @@ -13084,6 +13102,9 @@ packages: char-spinner@1.0.1: resolution: {integrity: sha512-acv43vqJ0+N0rD+Uw3pDHSxP30FHrywu2NO6/wBaHChJIizpDeBUd6NjqhNhy9LGaEAhZAXn46QzmlAvIWd16g==} + character-entities@2.0.2: + resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==} + character-parser@2.2.0: resolution: {integrity: sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==} @@ -13907,6 +13928,9 @@ packages: decko@1.2.0: resolution: {integrity: sha512-m8FnyHXV1QX+S1cl+KPFDIl6NMkxtKsy6+U/aYyjrOqWMuwAwYWu7ePqrsUHtDR5Y8Yk2pi/KIDSgF+vT4cPOQ==} + decode-named-character-reference@1.3.0: + resolution: {integrity: sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==} + decompress-response@6.0.0: resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==} engines: {node: '>=10'} @@ -14087,6 +14111,9 @@ packages: peerDependencies: typescript: 6.0.2 + devlop@1.1.0: + resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==} + devtools-protocol@0.0.1595872: resolution: {integrity: sha512-kRfgp8vWVjBu/fbYCiVFiOqsCk3CrMKEo3WbgGT2NXK2dG7vawWPBljixajVgGK9II8rDO9G0oD0zLt3I1daRg==} @@ -17134,6 +17161,9 @@ packages: long@5.3.2: resolution: {integrity: sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==} + longest-streak@3.1.0: + resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==} + loose-envify@1.4.0: resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} hasBin: true @@ -17316,6 +17346,39 @@ packages: md5@2.3.0: resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==} + mdast-util-find-and-replace@3.0.2: + resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==} + + mdast-util-from-markdown@2.0.3: + resolution: {integrity: sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==} + + mdast-util-gfm-autolink-literal@2.0.1: + resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==} + + mdast-util-gfm-footnote@2.1.0: + resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==} + + mdast-util-gfm-strikethrough@2.0.0: + resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==} + + mdast-util-gfm-table@2.0.0: + resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==} + + mdast-util-gfm-task-list-item@2.0.0: + resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==} + + mdast-util-gfm@3.1.0: + resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==} + + mdast-util-phrasing@4.1.0: + resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==} + + mdast-util-to-markdown@2.1.2: + resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==} + + mdast-util-to-string@4.0.0: + resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==} + mdn-data@2.0.28: resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==} @@ -17374,6 +17437,90 @@ packages: resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==} engines: {node: '>= 0.6'} + micromark-core-commonmark@2.0.3: + resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==} + + micromark-extension-gfm-autolink-literal@2.1.0: + resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==} + + micromark-extension-gfm-footnote@2.1.0: + resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==} + + micromark-extension-gfm-strikethrough@2.1.0: + resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==} + + micromark-extension-gfm-table@2.1.1: + resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==} + + micromark-extension-gfm-tagfilter@2.0.0: + resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==} + + micromark-extension-gfm-task-list-item@2.1.0: + resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==} + + micromark-extension-gfm@3.0.0: + resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==} + + micromark-factory-destination@2.0.1: + resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==} + + micromark-factory-label@2.0.1: + resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==} + + micromark-factory-space@2.0.1: + resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==} + + micromark-factory-title@2.0.1: + resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==} + + micromark-factory-whitespace@2.0.1: + resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==} + + micromark-util-character@2.1.1: + resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==} + + micromark-util-chunked@2.0.1: + resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==} + + micromark-util-classify-character@2.0.1: + resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==} + + micromark-util-combine-extensions@2.0.1: + resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==} + + micromark-util-decode-numeric-character-reference@2.0.2: + resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==} + + micromark-util-decode-string@2.0.1: + resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==} + + micromark-util-encode@2.0.1: + resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==} + + micromark-util-html-tag-name@2.0.1: + resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==} + + micromark-util-normalize-identifier@2.0.1: + resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==} + + micromark-util-resolve-all@2.0.1: + resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==} + + micromark-util-sanitize-uri@2.0.1: + resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==} + + micromark-util-subtokenize@2.1.0: + resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==} + + micromark-util-symbol@2.0.1: + resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==} + + micromark-util-types@2.0.2: + resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==} + + micromark@4.0.2: + resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==} + micromatch@4.0.8: resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==} engines: {node: '>=8.6'} @@ -19485,6 +19632,15 @@ packages: resolution: {integrity: sha512-gUAyHVHPPC5wdqX/LG4LWtRYtgjxyX78oanFNTMMyFEfOqdC54s3eE82imuWKbOeqYht2CrNf64Qb8vgmmtZGA==} engines: {node: '>=4'} + remark-gfm@4.0.1: + resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==} + + remark-parse@11.0.0: + resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==} + + remark-stringify@11.0.0: + resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==} + remove-trailing-slash@0.1.1: resolution: {integrity: sha512-o4S4Qh6L2jpnCy83ysZDau+VORNvnFw07CKSAymkd6ICNVEPisMyzlc00KlvvicsxKck94SEwhDnMNdICzO+tA==} @@ -20316,6 +20472,17 @@ packages: resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==} engines: {node: '>= 0.4'} + storybook-addon-vue-mdx@3.0.0: + resolution: {integrity: sha512-iP+IPhaYpkGgL97a8G/Cs/+rSsN4XQhBWe/yQduyzW0vDNTrXyxYFhXjzrviMVYtCm9HtGbLlLV79Ka8wQ7yRw==} + engines: {node: '>=20.19'} + peerDependencies: + '@storybook/addon-docs': ^10.0.0 + '@storybook/builder-vite': ^10.0.0 + react: '>= 16.4.0' + react-dom: '>= 16.4.0' + storybook: ^10.0.0 + vue: ^3.4.31 + storybook@10.1.11: resolution: {integrity: sha512-pKP5jXJYM4OjvNklGuHKO53wOCAwfx79KvZyOWHoi9zXUH5WVMFUe/ZfWyxXG/GTcj0maRgHGUjq/0I43r0dDQ==} hasBin: true @@ -20833,6 +21000,9 @@ packages: triple-beam@1.3.0: resolution: {integrity: sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw==} + trough@2.2.0: + resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==} + truncate-utf8-bytes@1.0.2: resolution: {integrity: sha512-95Pu1QXQvruGEhv62XCMO3Mm90GscOCClvrIUwCM0PYOXK3kaF3l3sIHxx71ThJfcbM2O5Au6SO3AWCSEfW4mQ==} @@ -21177,12 +21347,34 @@ packages: resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==} engines: {node: '>=18'} + unified@11.0.5: + resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==} + unique-filename@1.1.1: resolution: {integrity: sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==} unique-slug@2.0.2: resolution: {integrity: sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==} + unique-slug@3.0.0: + resolution: {integrity: sha512-8EyMynh679x/0gqE9fT9oilG+qEt+ibFyqjuVTsZn1+CMxH+XLlpvr2UZx4nVcCwTpx81nICr2JQFkM+HPLq4w==} + engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0} + + unique-slug@5.0.0: + resolution: {integrity: sha512-9OdaqO5kwqR+1kVgHAhsp5vPNU0hnxRa26rBFNfNgM7M6pNtgzeBn3s/xbyCQL3dcjzOatcef6UUHpB/6MaETg==} + engines: {node: ^18.17.0 || >=20.5.0} + + unist-util-is@6.0.1: + resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==} + + unist-util-stringify-position@4.0.0: + resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==} + + unist-util-visit-parents@6.0.2: + resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==} + + unist-util-visit@5.1.0: + resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==} universal-user-agent@6.0.1: resolution: {integrity: sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ==} @@ -21423,10 +21615,22 @@ packages: resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==} engines: {node: '>= 0.8'} + veaury@2.6.3: + resolution: {integrity: sha512-hb4R1iAjaN0wlNdPJefF2E7z4JCXKzipaFIuWUarFism6OSnHdk74fMsj7uRe38/iSNGPiHPy0+x6H25uLUR4g==} + peerDependencies: + react: '>= 16.4.0' + react-dom: '>= 16.4.0' + verror@1.10.1: resolution: {integrity: sha512-veufcmxri4e3XSrT0xwfUR7kguIkaxBeosDg00yDWhk49wdwkSUrvvsm7nc75e1PUyvIeZj6nS8VQRYz2/S4Xg==} engines: {node: '>=0.6.0'} + vfile-message@4.0.3: + resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==} + + vfile@6.0.3: + resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==} + vite-plugin-dts@4.5.3: resolution: {integrity: sha512-P64VnD00dR+e8S26ESoFELqc17+w7pKkwlBpgXteOljFyT0zDwD8hH4zXp49M/kciy//7ZbVXIwQCekBJjfWzA==} peerDependencies: @@ -22145,6 +22349,9 @@ packages: zod@3.25.67: resolution: {integrity: sha512-idA2YXwpCdqUSKRCACDE6ItZD9TZzy3OZMtpfLoh6oPR47lipysRrJfjzMqFxQ3uJuUPyUeWe1r9vLH33xO/Qw==} + zwitch@2.0.4: + resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} + zx@8.8.5: resolution: {integrity: sha512-SNgDF5L0gfN7FwVOdEFguY3orU5AkfFZm9B5YSHog/UDHv+lvmd82ZAsOenOkQixigwH2+yyH198AwNdKhj+RA==} engines: {node: '>= 12.17.0'} @@ -31691,6 +31898,10 @@ snapshots: '@types/md5@2.3.5': {} + '@types/mdast@4.0.4': + dependencies: + '@types/unist': 3.0.3 + '@types/mdurl@1.0.5': {} '@types/mdx@2.0.3': {} @@ -31927,6 +32138,8 @@ snapshots: '@types/turndown@5.0.6': {} + '@types/unist@3.0.3': {} + '@types/utf8@3.0.3': {} '@types/uuencode@0.0.3(patch_hash=083a73709a54db57b092d986b43d27ddda3cb8008f9510e98bc9e6da0e1cbb62)': @@ -33365,6 +33578,8 @@ snapshots: dependencies: '@babel/types': 7.29.0 + bail@2.0.2: {} + balanced-match@1.0.2: {} balanced-match@2.0.0: {} @@ -33808,6 +34023,8 @@ snapshots: tslib: 2.8.1 upper-case-first: 2.0.2 + ccount@2.0.1: {} + chai@5.2.0: dependencies: assertion-error: 2.0.1 @@ -33855,6 +34072,8 @@ snapshots: char-spinner@1.0.1: {} + character-entities@2.0.2: {} + character-parser@2.2.0: dependencies: is-regex: 1.2.1 @@ -34695,6 +34914,10 @@ snapshots: decko@1.2.0: {} + decode-named-character-reference@1.3.0: + dependencies: + character-entities: 2.0.2 + decompress-response@6.0.0: dependencies: mimic-response: 3.1.0 @@ -34871,6 +35094,10 @@ snapshots: transitivePeerDependencies: - supports-color + devlop@1.1.0: + dependencies: + dequal: 2.0.3 + devtools-protocol@0.0.1595872: {} dezalgo@1.0.4: @@ -39020,6 +39247,8 @@ snapshots: long@5.3.2: {} + longest-streak@3.1.0: {} + loose-envify@1.4.0: dependencies: js-tokens: 4.0.0 @@ -39237,6 +39466,108 @@ snapshots: crypt: 0.0.2 is-buffer: 1.1.6 + mdast-util-find-and-replace@3.0.2: + dependencies: + '@types/mdast': 4.0.4 + escape-string-regexp: 5.0.0 + unist-util-is: 6.0.1 + unist-util-visit-parents: 6.0.2 + + mdast-util-from-markdown@2.0.3: + dependencies: + '@types/mdast': 4.0.4 + '@types/unist': 3.0.3 + decode-named-character-reference: 1.3.0 + devlop: 1.1.0 + mdast-util-to-string: 4.0.0 + micromark: 4.0.2 + micromark-util-decode-numeric-character-reference: 2.0.2 + micromark-util-decode-string: 2.0.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + unist-util-stringify-position: 4.0.0 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-autolink-literal@2.0.1: + dependencies: + '@types/mdast': 4.0.4 + ccount: 2.0.1 + devlop: 1.1.0 + mdast-util-find-and-replace: 3.0.2 + micromark-util-character: 2.1.1 + + mdast-util-gfm-footnote@2.1.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.3 + mdast-util-to-markdown: 2.1.2 + micromark-util-normalize-identifier: 2.0.1 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-strikethrough@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-from-markdown: 2.0.3 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-table@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + markdown-table: 3.0.4 + mdast-util-from-markdown: 2.0.3 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-task-list-item@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.3 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm@3.1.0: + dependencies: + mdast-util-from-markdown: 2.0.3 + mdast-util-gfm-autolink-literal: 2.0.1 + mdast-util-gfm-footnote: 2.1.0 + mdast-util-gfm-strikethrough: 2.0.0 + mdast-util-gfm-table: 2.0.0 + mdast-util-gfm-task-list-item: 2.0.0 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-phrasing@4.1.0: + dependencies: + '@types/mdast': 4.0.4 + unist-util-is: 6.0.1 + + mdast-util-to-markdown@2.1.2: + dependencies: + '@types/mdast': 4.0.4 + '@types/unist': 3.0.3 + longest-streak: 3.1.0 + mdast-util-phrasing: 4.1.0 + mdast-util-to-string: 4.0.0 + micromark-util-classify-character: 2.0.1 + micromark-util-decode-string: 2.0.1 + unist-util-visit: 5.1.0 + zwitch: 2.0.4 + + mdast-util-to-string@4.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdn-data@2.0.28: {} mdn-data@2.0.30: {} @@ -39271,6 +39602,197 @@ snapshots: methods@1.1.2: {} + micromark-core-commonmark@2.0.3: + dependencies: + decode-named-character-reference: 1.3.0 + devlop: 1.1.0 + micromark-factory-destination: 2.0.1 + micromark-factory-label: 2.0.1 + micromark-factory-space: 2.0.1 + micromark-factory-title: 2.0.1 + micromark-factory-whitespace: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-chunked: 2.0.1 + micromark-util-classify-character: 2.0.1 + micromark-util-html-tag-name: 2.0.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-resolve-all: 2.0.1 + micromark-util-subtokenize: 2.1.0 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-autolink-literal@2.1.0: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-sanitize-uri: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-footnote@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-core-commonmark: 2.0.3 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-sanitize-uri: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-strikethrough@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-util-chunked: 2.0.1 + micromark-util-classify-character: 2.0.1 + micromark-util-resolve-all: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-table@2.1.1: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-tagfilter@2.0.0: + dependencies: + micromark-util-types: 2.0.2 + + micromark-extension-gfm-task-list-item@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm@3.0.0: + dependencies: + micromark-extension-gfm-autolink-literal: 2.1.0 + micromark-extension-gfm-footnote: 2.1.0 + micromark-extension-gfm-strikethrough: 2.1.0 + micromark-extension-gfm-table: 2.1.1 + micromark-extension-gfm-tagfilter: 2.0.0 + micromark-extension-gfm-task-list-item: 2.1.0 + micromark-util-combine-extensions: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-factory-destination@2.0.1: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-factory-label@2.0.1: + dependencies: + devlop: 1.1.0 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-factory-space@2.0.1: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-types: 2.0.2 + + micromark-factory-title@2.0.1: + dependencies: + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-factory-whitespace@2.0.1: + dependencies: + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-util-character@2.1.1: + dependencies: + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-util-chunked@2.0.1: + dependencies: + micromark-util-symbol: 2.0.1 + + micromark-util-classify-character@2.0.1: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-util-combine-extensions@2.0.1: + dependencies: + micromark-util-chunked: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-util-decode-numeric-character-reference@2.0.2: + dependencies: + micromark-util-symbol: 2.0.1 + + micromark-util-decode-string@2.0.1: + dependencies: + decode-named-character-reference: 1.3.0 + micromark-util-character: 2.1.1 + micromark-util-decode-numeric-character-reference: 2.0.2 + micromark-util-symbol: 2.0.1 + + micromark-util-encode@2.0.1: {} + + micromark-util-html-tag-name@2.0.1: {} + + micromark-util-normalize-identifier@2.0.1: + dependencies: + micromark-util-symbol: 2.0.1 + + micromark-util-resolve-all@2.0.1: + dependencies: + micromark-util-types: 2.0.2 + + micromark-util-sanitize-uri@2.0.1: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-encode: 2.0.1 + micromark-util-symbol: 2.0.1 + + micromark-util-subtokenize@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-util-chunked: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-util-symbol@2.0.1: {} + + micromark-util-types@2.0.2: {} + + micromark@4.0.2: + dependencies: + '@types/debug': 4.1.12 + debug: 4.4.3(supports-color@8.1.1) + decode-named-character-reference: 1.3.0 + devlop: 1.1.0 + micromark-core-commonmark: 2.0.3 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-chunked: 2.0.1 + micromark-util-combine-extensions: 2.0.1 + micromark-util-decode-numeric-character-reference: 2.0.2 + micromark-util-encode: 2.0.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-resolve-all: 2.0.1 + micromark-util-sanitize-uri: 2.0.1 + micromark-util-subtokenize: 2.1.0 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + transitivePeerDependencies: + - supports-color + micromatch@4.0.8: dependencies: braces: 3.0.3 @@ -41825,6 +42347,32 @@ snapshots: dependencies: es6-error: 4.1.1 + remark-gfm@4.0.1: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-gfm: 3.1.0 + micromark-extension-gfm: 3.0.0 + remark-parse: 11.0.0 + remark-stringify: 11.0.0 + unified: 11.0.5 + transitivePeerDependencies: + - supports-color + + remark-parse@11.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-from-markdown: 2.0.3 + micromark-util-types: 2.0.2 + unified: 11.0.5 + transitivePeerDependencies: + - supports-color + + remark-stringify@11.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-to-markdown: 2.1.2 + unified: 11.0.5 + remove-trailing-slash@0.1.1: {} replace-in-file@6.3.5: @@ -42840,6 +43388,16 @@ snapshots: es-errors: 1.3.0 internal-slot: 1.1.0 + storybook-addon-vue-mdx@3.0.0(@storybook/addon-docs@10.1.11(@types/react@18.0.27)(esbuild@0.25.10)(rollup@4.52.4)(storybook@10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10))(vite@8.0.2(@types/node@20.19.21)(esbuild@0.25.10)(jiti@2.6.1)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.16.1)(tsx@4.19.3)(yaml@2.8.3)))(@storybook/builder-vite@10.1.11(esbuild@0.25.10)(rollup@4.52.4)(storybook@10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10))(vite@8.0.2(@types/node@20.19.21)(esbuild@0.25.10)(jiti@2.6.1)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.16.1)(tsx@4.19.3)(yaml@2.8.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10))(vue@3.5.26(typescript@6.0.2)): + dependencies: + '@storybook/addon-docs': 10.1.11(@types/react@18.0.27)(esbuild@0.25.10)(rollup@4.52.4)(storybook@10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10))(vite@8.0.2(@types/node@20.19.21)(esbuild@0.25.10)(jiti@2.6.1)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.16.1)(tsx@4.19.3)(yaml@2.8.3)) + '@storybook/builder-vite': 10.1.11(esbuild@0.25.10)(rollup@4.52.4)(storybook@10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10))(vite@8.0.2(@types/node@20.19.21)(esbuild@0.25.10)(jiti@2.6.1)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.16.1)(tsx@4.19.3)(yaml@2.8.3)) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + storybook: 10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10) + veaury: 2.6.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + vue: 3.5.26(typescript@6.0.2) + storybook@10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10): dependencies: '@storybook/global': 5.0.0 @@ -43535,6 +44093,8 @@ snapshots: triple-beam@1.3.0: {} + trough@2.2.0: {} + truncate-utf8-bytes@1.0.2: dependencies: utf8-byte-length: 1.0.5 @@ -43887,6 +44447,16 @@ snapshots: unicorn-magic@0.3.0: {} + unified@11.0.5: + dependencies: + '@types/unist': 3.0.3 + bail: 2.0.2 + devlop: 1.1.0 + extend: 3.0.2 + is-plain-obj: 4.1.0 + trough: 2.2.0 + vfile: 6.0.3 + unique-filename@1.1.1: dependencies: unique-slug: 2.0.2 @@ -43897,6 +44467,32 @@ snapshots: imurmurhash: 0.1.4 optional: true + unique-slug@3.0.0: + dependencies: + imurmurhash: 0.1.4 + + unique-slug@5.0.0: + dependencies: + imurmurhash: 0.1.4 + + unist-util-is@6.0.1: + dependencies: + '@types/unist': 3.0.3 + + unist-util-stringify-position@4.0.0: + dependencies: + '@types/unist': 3.0.3 + + unist-util-visit-parents@6.0.2: + dependencies: + '@types/unist': 3.0.3 + unist-util-is: 6.0.1 + + unist-util-visit@5.1.0: + dependencies: + '@types/unist': 3.0.3 + unist-util-is: 6.0.1 + unist-util-visit-parents: 6.0.2 universal-user-agent@6.0.1: {} universalify@0.1.2: {} @@ -44145,6 +44741,11 @@ snapshots: vary@1.1.2: {} + veaury@2.6.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0): + dependencies: + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + verror@1.10.1: dependencies: assert-plus: 1.0.0 @@ -44152,6 +44753,16 @@ snapshots: extsprintf: 1.4.1 optional: true + vfile-message@4.0.3: + dependencies: + '@types/unist': 3.0.3 + unist-util-stringify-position: 4.0.0 + + vfile@6.0.3: + dependencies: + '@types/unist': 3.0.3 + vfile-message: 4.0.3 + vite-plugin-dts@4.5.3(@types/node@20.19.21)(rollup@4.52.4)(typescript@6.0.2)(vite@8.0.2(@types/node@20.19.21)(esbuild@0.25.10)(jiti@2.6.1)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.16.1)(tsx@4.19.3)(yaml@2.8.3)): dependencies: '@microsoft/api-extractor': 7.52.1(@types/node@20.19.21) @@ -44962,4 +45573,6 @@ snapshots: zod@3.25.67: {} + zwitch@2.0.4: {} + zx@8.8.5: {}