+
+/** Loading placeholder shown while a file's contents are being fetched. */
+export const Default: Story = {}
diff --git a/app/components/Code/Viewer.stories.ts b/app/components/Code/Viewer.stories.ts
new file mode 100644
index 0000000000..702937ce51
--- /dev/null
+++ b/app/components/Code/Viewer.stories.ts
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import Viewer from './Viewer.vue'
+
+// Mimics the markup Shiki emits server-side: a with one
+// `.line` span per line. Inline color styles keep the sample self-contained.
+const lines = [
+ `export function greet ( name : string ) { `,
+ ` return \`Hello, \${name}!\` `,
+ `} `,
+]
+
+const html = `${lines
+ .map(line => `${line} `)
+ .join('\n')}
',
+ }),
+ ],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+/** Syntax-highlighted file with line numbers. */
+export const Default: Story = {}
+
+/** A range of lines highlighted, as when linking to a permalink. */
+export const WithSelectedLines: Story = {
+ args: {
+ selectedLines: { start: 2, end: 2 },
+ },
+}
diff --git a/app/components/CollapsibleSection.stories.ts b/app/components/CollapsibleSection.stories.ts
new file mode 100644
index 0000000000..dd2b613ee9
--- /dev/null
+++ b/app/components/CollapsibleSection.stories.ts
@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import CollapsibleSection from './CollapsibleSection.vue'
+
+const meta = {
+ component: CollapsibleSection,
+ tags: ['autodocs'],
+ args: {
+ id: 'demo-section',
+ title: 'Dependencies',
+ },
+ render: args => ({
+ components: { CollapsibleSection },
+ setup() {
+ return { args }
+ },
+ template: `
+
+
+ vue@3.4.0
+ vue-router@4.2.0
+ pinia@2.1.0
+
+
+ `,
+ }),
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+/** Expanded section with a heading, anchor link and collapse toggle. */
+export const Default: Story = {}
+
+/** A secondary line of context beneath the title. */
+export const WithSubtitle: Story = {
+ args: {
+ id: 'demo-section-subtitle',
+ subtitle: '3 direct dependencies',
+ },
+}
+
+/** Spinner in place of the chevron while content is being fetched. */
+export const Loading: Story = {
+ args: {
+ id: 'demo-section-loading',
+ isLoading: true,
+ },
+}
+
+/** The `actions` slot renders controls on the right of the header. */
+export const WithActions: Story = {
+ render: args => ({
+ components: { CollapsibleSection },
+ setup() {
+ return { args }
+ },
+ template: `
+
+
+ Expand all
+
+ Section body content.
+
+ `,
+ }),
+ args: {
+ id: 'demo-section-actions',
+ },
+}
diff --git a/app/components/Compare/FacetBarChart.vue b/app/components/Compare/FacetBarChart.vue
index 181786f1f0..276770dc46 100644
--- a/app/components/Compare/FacetBarChart.vue
+++ b/app/components/Compare/FacetBarChart.vue
@@ -11,6 +11,7 @@ import { createPatternDef } from 'vue-data-ui/utils'
import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
import { useColors } from '~/composables/useColors'
import { downloadFileLink } from '~/utils/download'
+import { useCopyChartPng } from '~/composables/useCopyChartPng'
import {
insertLineBreaks,
@@ -35,6 +36,8 @@ const resolvedMode = shallowRef<'light' | 'dark'>('light')
const rootEl = shallowRef(null)
const { width } = useElementSize(rootEl)
const { copy, copied } = useClipboard()
+const chartRef = useTemplateRef('chartRef')
+const { copiedPng, isCopyingPng, copyChartPng } = useCopyChartPng(chartRef)
const mobileBreakpointWidth = 640
const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
@@ -271,7 +274,7 @@ const config = computed(() => {
-
+
{{ $t('compare.packages.bar_chart_nav_hint') }}
@@ -293,7 +296,7 @@ const config = computed(() => {
CSV
+
+
+
PNG
diff --git a/app/components/Compare/FacetRow.vue b/app/components/Compare/FacetRow.vue
index 3a9d303207..521feea617 100644
--- a/app/components/Compare/FacetRow.vue
+++ b/app/components/Compare/FacetRow.vue
@@ -91,7 +91,9 @@ function isCellLoading(index: number): boolean {
-
{{ label }}
+
{{
+ label
+ }}
diff --git a/app/components/Compare/FacetScatterChart.vue b/app/components/Compare/FacetScatterChart.vue
index 69744bc41b..9c67a5b760 100644
--- a/app/components/Compare/FacetScatterChart.vue
+++ b/app/components/Compare/FacetScatterChart.vue
@@ -11,6 +11,7 @@ import { buildCompareScatterChartDataset } from '~/utils/compare-scatter-chart'
import { copyAltTextForCompareScatterChart } from '~/utils/charts'
import { useColors } from '~/composables/useColors'
import { downloadFileLink } from '~/utils/download'
+import { useCopyChartPng } from '~/composables/useCopyChartPng'
import('vue-data-ui/style.css')
@@ -24,6 +25,8 @@ const resolvedMode = shallowRef<'light' | 'dark'>('light')
const rootEl = shallowRef
(null)
const { width } = useElementSize(rootEl)
const { copy, copied } = useClipboard()
+const chartRef = useTemplateRef('chartRef')
+const { copiedPng, isCopyingPng, copyChartPng } = useCopyChartPng(chartRef)
const mobileBreakpointWidth = 640
const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
@@ -350,7 +353,7 @@ onMounted(async () => {
-
+
{
+
+
PNG
diff --git a/app/components/CopyToClipboardButton.stories.ts b/app/components/CopyToClipboardButton.stories.ts
new file mode 100644
index 0000000000..982481315e
--- /dev/null
+++ b/app/components/CopyToClipboardButton.stories.ts
@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import { fn } from 'storybook/test'
+import CopyToClipboardButton from './CopyToClipboardButton.vue'
+
+const meta = {
+ component: CopyToClipboardButton,
+ tags: ['autodocs'],
+ args: {
+ copied: false,
+ onClick: fn(),
+ },
+ render: args => ({
+ components: { CopyToClipboardButton },
+ setup() {
+ return { args }
+ },
+ template: `
+
+ npm install example-package
+
+ `,
+ }),
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+/**
+ * The copy button is visually hidden until you hover (or focus) the wrapped
+ * content, then slides in beneath it. Hover the code below to reveal it.
+ */
+export const Default: Story = {}
+
+/** The "copied" confirmation state, shown after a successful copy. */
+export const Copied: Story = {
+ args: {
+ copied: true,
+ },
+}
+
+/** Custom labels for both the idle and copied states. */
+export const CustomLabels: Story = {
+ args: {
+ copyText: 'Copy command',
+ copiedText: 'Copied!',
+ },
+}
diff --git a/app/components/Header/AuthModal.client.vue b/app/components/Header/AuthModal.client.vue
index 1b96d04947..dc395b1574 100644
--- a/app/components/Header/AuthModal.client.vue
+++ b/app/components/Header/AuthModal.client.vue
@@ -42,6 +42,12 @@ async function handleLogin() {
}
}
+/** Reset the login form so a stale handle/error isn't shown when reopening. */
+function handleModalClose() {
+ handleInput.value = ''
+ errorMessage.value = ''
+}
+
watch(handleInput, newHandleInput => {
errorMessage.value = ''
if (!newHandleInput) return
@@ -64,7 +70,12 @@ watch(user, async newUser => {
-
+
diff --git a/app/components/Header/ConnectorModal.vue b/app/components/Header/ConnectorModal.vue
index d157ea31cc..d15e3dbd24 100644
--- a/app/components/Header/ConnectorModal.vue
+++ b/app/components/Header/ConnectorModal.vue
@@ -1,6 +1,14 @@
+
+
+
+
+ {{ text }}
+
+
+
diff --git a/app/components/Noodle/GifDay/Logo.vue b/app/components/Noodle/GifDay/Logo.vue
new file mode 100644
index 0000000000..24e2082ee9
--- /dev/null
+++ b/app/components/Noodle/GifDay/Logo.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
+
diff --git a/app/components/Noodle/index.ts b/app/components/Noodle/index.ts
index 9e611daf54..a73644a0a4 100644
--- a/app/components/Noodle/index.ts
+++ b/app/components/Noodle/index.ts
@@ -9,6 +9,7 @@ import NoodlePride2Logo from './Pride2/Logo.vue'
import NoodlePride3Logo from './Pride3/Logo.vue'
import NoodleTetrisLogo from './Tetris/Logo.vue'
import NoodleEmojiDayLogo from './EmojiDay/Logo.vue'
+import NoodleGifDayLogo from './GifDay/Logo.vue'
export type Noodle = {
// Unique identifier for the noodle
@@ -72,6 +73,13 @@ export const ACTIVE_NOODLES: Noodle[] = [
dateTo: '2026-07-19',
timezone: 'auto',
},
+ {
+ key: 'gif-day',
+ logo: NoodleGifDayLogo,
+ date: '2026-09-05',
+ dateTo: '2026-09-08',
+ timezone: 'auto',
+ },
]
// Logo registry for the /noodles archive, keyed by the entry's `key` in
@@ -86,6 +94,7 @@ const NOODLE_LOGOS: Record
= {
'pride-1': NoodlePride1Logo,
'tetris': NoodleTetrisLogo,
'emoji-day': NoodleEmojiDayLogo,
+ 'gif-day': NoodleGifDayLogo,
}
export function resolveNoodleLogo(key: string): Component | undefined {
diff --git a/app/components/OgBrand.vue b/app/components/OgBrand.vue
index 4b98b976a6..5714c898c6 100644
--- a/app/components/OgBrand.vue
+++ b/app/components/OgBrand.vue
@@ -1,4 +1,6 @@
+
+
+
+
+
+
+
+
+ {{ `~${username}` }}
+
+
+
+
+ {{ description }}
+
+
+
diff --git a/app/components/Org/OperationsQueue.vue b/app/components/Org/OperationsQueue.vue
index 3d656d5576..55be428eb4 100644
--- a/app/components/Org/OperationsQueue.vue
+++ b/app/components/Org/OperationsQueue.vue
@@ -422,8 +422,7 @@ watch(isExecuting, executing => {
{{ op.result.stderr }}
+ >{{ op.result.stderr }}
-
props.pkg?.requestedVersion ?? null)
const { repositoryUrl } = useRepositoryUrl(displayVersion)
-const { meta: repoMeta, repoRef, stars, starsLink, forks, forksLink } = useRepoMeta(repositoryUrl)
+const { meta: repoMeta, repoRef, stars, forks, forksLink, repoLink } = useRepoMeta(repositoryUrl)
const compactNumberFormatter = useCompactNumberFormatter()
const homepageUrl = computed(() => {
@@ -55,14 +55,14 @@ useCommandPaletteContextCommands(
})
}
- if (repositoryUrl.value && starsLink.value) {
+ if (repositoryUrl.value && repoLink.value) {
commands.push({
id: 'package-link-stars',
group: 'links',
label: $t('command_palette.package_links.stars'),
keywords: [...packageKeywords, $t('command_palette.package_links.stars')],
iconClass: 'i-lucide:star',
- href: starsLink.value,
+ href: repoLink.value,
})
}
@@ -143,8 +143,8 @@ useCommandPaletteContextCommands(
{{ $t('package.links.repo') }}
-
-
+
+
{{ compactNumberFormatter.format(stars) }}
diff --git a/app/components/Package/Header.vue b/app/components/Package/Header.vue
index d0306d3706..e01e0dc03b 100644
--- a/app/components/Package/Header.vue
+++ b/app/components/Package/Header.vue
@@ -75,6 +75,11 @@ const { copied: copiedPkgName, copy: copyPkgName } = useClipboard({
copiedDuring: 2000,
})
+const { copied: copiedPkgVersion, copy: copyPkgVersion } = useClipboard({
+ source: () => props.resolvedVersion ?? '',
+ copiedDuring: 2000,
+})
+
function hasProvenance(version: PackumentVersion | null): boolean {
if (!version?.dist) return false
return !!(version.dist as { attestations?: unknown }).attestations
@@ -98,6 +103,17 @@ useCommandPaletteContextCommands(
announce($t('command_palette.announcements.copied_to_clipboard'))
},
},
+ {
+ id: 'package-copy-version',
+ group: 'package',
+ label: $t('package.copy_version'),
+ keywords: [packageName.value],
+ iconClass: 'i-lucide:copy',
+ action: () => {
+ copyPkgVersion()
+ announce($t('command_palette.announcements.copied_to_clipboard'))
+ },
+ },
]
if (fundingUrl.value) {
@@ -116,15 +132,10 @@ useCommandPaletteContextCommands(
)
// Docs URL: use our generated API docs
-const docsLink = computed(() => {
- if (!props.resolvedVersion) return null
+const docsLink = computed((): RouteLocationRaw | null => {
+ if (!props.pkg?.name || !props.resolvedVersion) return null
- return {
- name: 'docs' as const,
- params: {
- path: [props.pkg?.name ?? '', 'v', props.resolvedVersion] satisfies [string, string, string],
- },
- }
+ return docsRoute(props.pkg.name, props.resolvedVersion)
})
const codeLink = computed((): RouteLocationRaw | null => {
@@ -206,26 +217,37 @@ useShortcuts({
-
-
@{{ orgName }}
/
-
+
{{ orgName ? pkg?.name.replace(`@${orgName}/`, '') : pkg?.name }}
-
-
+
+
+ @
+
+ {{ resolvedVersion }}
+
+
+
= {
'stackblitz': 'i-simple-icons:stackblitz',
'codesandbox': 'i-simple-icons:codesandbox',
+ 'effect-ts-playground': 'i-simple-icons:effect',
'codepen': 'i-simple-icons:codepen',
'replit': 'i-simple-icons:replit',
'gitpod': 'i-simple-icons:gitpod',
@@ -28,6 +29,7 @@ const providerIcons: Record = {
const providerColors: Record = {
'stackblitz': 'text-provider-stackblitz',
'codesandbox': 'text-provider-codesandbox',
+ 'effect-ts-playground': 'text-provider-effect',
'codepen': 'text-provider-codepen',
'replit': 'text-provider-replit',
'gitpod': 'text-provider-gitpod',
diff --git a/app/components/Package/SizeDecrease.vue b/app/components/Package/SizeDecrease.vue
index fa730b6cd5..43e032b8f9 100644
--- a/app/components/Package/SizeDecrease.vue
+++ b/app/components/Package/SizeDecrease.vue
@@ -41,9 +41,14 @@ const depDecreaseAbs = computed(() => Math.abs(props.diff.depDiff))
>
ยท
-
+
โ{{ numberFormatter.format(depDecreaseAbs) }} {{ numberFormatter.format(depDecreaseAbs) }}
diff --git a/app/components/Package/SizeIncrease.vue b/app/components/Package/SizeIncrease.vue
index b35e4b48d7..6d7d441840 100644
--- a/app/components/Package/SizeIncrease.vue
+++ b/app/components/Package/SizeIncrease.vue
@@ -36,9 +36,14 @@ const sizePercent = computed(() => percentFormatter.value.format(Math.abs(props.
>
ยท
-
+
+{{ numberFormatter.format(diff.depDiff) }} {{ numberFormatter.format(diff.depDiff) }}
diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index 34892bb8d9..76aca38163 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -35,7 +35,12 @@ const installCommand = computed(() => {
})
const { copied, copy } = useClipboard({ copiedDuring: 2000 })
-const copyCommand = () => installCommand.value && copy(installCommand.value)
+const { polite } = useAnnouncer()
+const copyCommand = () => {
+ if (!installCommand.value) return
+ copy(installCommand.value)
+ polite($t('package.command.copied_skills'))
+}
function getWarningTooltip(skill: SkillListItem): string | undefined {
if (!skill.warnings?.length) return undefined
@@ -123,20 +128,19 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
-
-
+
+
$
npx
skills add {{ baseUrl }}/{{ packageName }}
-
- {{ copied ? $t('common.copied') : $t('common.copy') }}
-
+ />
diff --git a/app/components/Package/TimelineChart.vue b/app/components/Package/TimelineChart.vue
index 575c3d3894..d18377771d 100644
--- a/app/components/Package/TimelineChart.vue
+++ b/app/components/Package/TimelineChart.vue
@@ -35,6 +35,7 @@ import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWate
import { useColors } from '~/composables/useColors'
import { parseStableVersion } from '~/utils/versions'
import { downloadFileLink } from '~/utils/download'
+import { useCopyChartPng } from '~/composables/useCopyChartPng'
import { useElementSize, useTimeoutFn } from '@vueuse/core'
import TimelineChartDepSizeTooltip from './TimelineChartDepSizeTooltip.vue'
import TimelineChartXyTooltip from './TimelineChartXyTooltip.vue'
@@ -70,8 +71,9 @@ function addEvaluationFlags(
return {
...entry,
events,
- hasPositive: events.some(event => event.positive),
- hasNegative: events.some(event => !event.positive),
+ hasPositive: events.some(event => event.state === 'success'),
+ hasNegative: events.some(event => event.state === 'warn'),
+ hasError: events.some(event => event.state === 'error'),
}
})
}
@@ -102,6 +104,7 @@ const convertedData = computed(() => {
events: [],
hasPositive: false,
hasNegative: false,
+ hasError: false,
}
})
@@ -186,7 +189,25 @@ const seriesDependencies = computed(() => {
}
})
-const activeTab = shallowRef
('totalSize')
+const timelineChartMetrics = new Set([
+ 'totalSize',
+ 'dependencyCount',
+ 'dependencySize',
+])
+
+const activeTab = usePermalink('metric', 'totalSize', {
+ permanent: true,
+})
+
+watch(
+ activeTab,
+ value => {
+ if (!timelineChartMetrics.has(value)) {
+ activeTab.value = 'totalSize'
+ }
+ },
+ { immediate: true },
+)
const shouldPauseChartAnimations = shallowRef(true)
@@ -194,8 +215,8 @@ const { start: startChartAnimationPauseTimer } = useTimeoutFn(
() => {
shouldPauseChartAnimations.value = false
},
- 1000,
- { immediate: false },
+ 300,
+ { immediate: true },
)
function pauseChartAnimations() {
@@ -337,6 +358,7 @@ const datasets = computed<{
})
const { copy, copied } = useClipboard()
+const { copiedPng, isCopyingPng, copyChartPng } = useCopyChartPng(chartRef)
const colorMode = useColorMode()
const resolvedMode = shallowRef<'light' | 'dark'>('light')
@@ -460,6 +482,9 @@ const commonConfig = computed(() => ({
const config = computed(() => {
return {
theme: isDarkMode.value ? 'dark' : '',
+ transitions: {
+ pauseOnDatasetChange: true, // prevents transitions on axis labels when switching from install size to dependencies
+ },
downsample: {
threshold: 5000,
},
@@ -519,6 +544,7 @@ const config = computed(() => {
legend: { show: false },
padding: {
top: 32,
+ right: 56,
},
title: {
text: applyEllipsis(packageName.value, 32),
@@ -565,7 +591,7 @@ const config = computed(() => {
},
zoom: {
show: settings.value.timelineChart.showZoom,
- maxWidth: isMobile.value ? 350 : 500,
+ autoFit: true,
highlightColor: colors.value.bgElevated,
useResetSlot: true,
keepState: true,
@@ -597,6 +623,7 @@ type TimelineSourceItem = {
events?: SubEvent[]
hasPositive?: boolean
hasNegative?: boolean
+ hasError?: boolean
}
type TimelineSvgDataItem = VueUiXyDatasetLineItem & {
@@ -632,6 +659,7 @@ function getDatapointPlots(
const hasPositive = datapoint.hasPositive === true
const hasNegative = datapoint.hasNegative === true
+ const hasError = datapoint.hasError === true
return [
{
@@ -639,7 +667,7 @@ function getDatapointPlots(
index,
x: plot.x,
y: plot.y,
- offsetY: markerKey === 'negative' && hasPositive && hasNegative ? 20 : 0,
+ offsetY: hasError ? 0 : markerKey === 'negative' && hasPositive && hasNegative ? 20 : 0,
},
]
})
@@ -683,30 +711,40 @@ function getActiveVersionDatapointBar(
)
}
+// If a data point also has an error, the positive icon will not be shown
function getPositiveDatapointPlots(
item: TimelineDatasetItem,
zoomOffset: number,
): TimelineMarkerItem[] {
return getDatapointPlots(
item,
- datapoint => datapoint.hasPositive === true,
+ datapoint => datapoint.hasPositive === true && datapoint.hasError !== true,
'positive',
zoomOffset,
)
}
+// If a data point also has an error, the negative icon will not be shown
function getNegativeDatapointPlots(
item: TimelineDatasetItem,
zoomOffset: number,
): TimelineMarkerItem[] {
return getDatapointPlots(
item,
- datapoint => datapoint.hasNegative === true,
+ datapoint => datapoint.hasNegative === true && datapoint.hasError !== true,
'negative',
zoomOffset,
)
}
+// If a data point has an error, only this icon will be shown
+function getErrorDatapointPlots(
+ item: TimelineDatasetItem,
+ zoomOffset: number,
+): TimelineMarkerItem[] {
+ return getDatapointPlots(item, datapoint => datapoint.hasError === true, 'error', zoomOffset)
+}
+
const indexSelection = computed(() => {
if (props.selectedVersion == null) return null
return orderedConvertedData.value.findIndex(v => v.version === props.selectedVersion)
@@ -859,7 +897,7 @@ const timelineMetricTabs = computed(() => [
@@ -965,9 +1003,11 @@ const timelineMetricTabs = computed(() => [
"
:markersPositive="getPositiveDatapointPlots(svg.data[0], svg.slicer.start)"
:markersNegative="getNegativeDatapointPlots(svg.data[0], svg.slicer.start)"
+ :markersError="getErrorDatapointPlots(svg.data[0], svg.slicer.start)"
:colors
:gradientColors="E18E_GRADIENT_COLORS"
- :pauseAnimations="shouldPauseChartAnimations"
+ :pauseAnimations="shouldPauseChartAnimations || loading"
+ :isCopyingPng
/>
@@ -978,6 +1018,9 @@ const timelineMetricTabs = computed(() => [
CSV
+
+
PNG
@@ -1026,7 +1069,7 @@ const timelineMetricTabs = computed(() => [
@@ -1040,6 +1083,10 @@ const timelineMetricTabs = computed(() => [
:dataset="datasets.dependencySize"
:config="stackbarConfig"
:selected-x-index="indexSelection"
+ :style="{
+ opacity: shouldPauseChartAnimations || loading ? 0 : 1,
+ transition: 'opacity 0.15s',
+ }"
ref="chartRef"
>
@@ -1058,7 +1105,8 @@ const timelineMetricTabs = computed(() => [
"
:activeVersionPlot="getActiveVersionDatapointBar(svg.data, svg.barWidth)"
:colors
- :pauseAnimations="shouldPauseChartAnimations"
+ :pauseAnimations="shouldPauseChartAnimations || loading"
+ :isCopyingPng
/>
@@ -1079,6 +1127,9 @@ const timelineMetricTabs = computed(() => [
CSV
+
+
PNG
@@ -1112,7 +1163,10 @@ const timelineMetricTabs = computed(() => [
-
+
@@ -1198,9 +1252,9 @@ const timelineMetricTabs = computed(() => [
animation: indeterminate 1.5s ease-in-out infinite;
}
-.loaded :deep(.vue-data-ui-component .serie_line_0 path),
-.loaded :deep(.vdui-shape-circle),
-.loaded :deep(.vue-ui-stackbar rect) {
+.loading :deep(.vue-data-ui-component .serie_line_0 path),
+.loading :deep(.vdui-shape-circle),
+.loading :deep(.vue-ui-stackbar rect) {
transition: none !important;
animation: none !important;
}
diff --git a/app/components/Package/TimelineChartDepSizeSvgSlot.vue b/app/components/Package/TimelineChartDepSizeSvgSlot.vue
index 5a65f953a1..f1ff962682 100644
--- a/app/components/Package/TimelineChartDepSizeSvgSlot.vue
+++ b/app/components/Package/TimelineChartDepSizeSvgSlot.vue
@@ -1,18 +1,19 @@
-
diff --git a/app/components/Package/TimelineChartXySvgSlot.vue b/app/components/Package/TimelineChartXySvgSlot.vue
index 8db1638a1b..e9e2886930 100644
--- a/app/components/Package/TimelineChartXySvgSlot.vue
+++ b/app/components/Package/TimelineChartXySvgSlot.vue
@@ -8,9 +8,11 @@ const props = defineProps<{
watermark?: string
markersPositive: TimelineMarkerItem[]
markersNegative: TimelineMarkerItem[]
+ markersError: TimelineMarkerItem[]
colors: Record
gradientColors: string[]
pauseAnimations: boolean
+ isCopyingPng?: boolean
}>()
const svgElementTransitionClass = computed(() => [
@@ -23,7 +25,7 @@ const svgElementTransitionClass = computed(() => [
-
@@ -81,5 +83,27 @@ const svgElementTransitionClass = computed(() => [
:class="svgElementTransitionClass"
/>
+
+
+
+
diff --git a/app/components/Package/TimelineChartXyTooltip.vue b/app/components/Package/TimelineChartXyTooltip.vue
index b6824429f0..3ad2cdaf48 100644
--- a/app/components/Package/TimelineChartXyTooltip.vue
+++ b/app/components/Package/TimelineChartXyTooltip.vue
@@ -61,7 +61,11 @@ const props = defineProps<{
{{ event.text }}
diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index bf5518d9ed..35ee116b3d 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -25,6 +25,7 @@ import {
getTrendsDatetimeFormatterOptions,
} from '#shared/utils/trends-chart'
import { downloadFileLink } from '~/utils/download'
+import { useCopyChartPng } from '~/composables/useCopyChartPng'
import { createLastDatapointLabelsSvg } from '#shared/utils/download-chart-last-label'
import('vue-data-ui/style.css')
@@ -71,6 +72,7 @@ const rootEl = shallowRef(null)
const isZoomed = shallowRef(false)
const chartRef = useTemplateRef('chartRef')
+const { copiedPng, isCopyingPng, copyChartPng } = useCopyChartPng(chartRef)
function setIsZoom({ isZoom }: { isZoom: boolean }) {
isZoomed.value = isZoom
@@ -1237,7 +1239,7 @@ const chartConfig = computed(() => {
},
},
zoom: {
- maxWidth: isMobile.value ? 350 : 500,
+ autoFit: true,
highlightColor: colors.value.bgElevated,
useResetSlot: true,
keepState: keepZoomState.value,
@@ -1724,7 +1726,7 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
@@ -1837,6 +1839,13 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
CSV
+
+
PNG
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index badad67b4c..7602331cc8 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -10,6 +10,7 @@ import {
import TooltipApp from '~/components/Tooltip/App.vue'
import { copyAltTextForVersionsBarChart, sanitise, applyEllipsis } from '~/utils/charts'
import { downloadFileLink } from '~/utils/download'
+import { useCopyChartPng } from '~/composables/useCopyChartPng'
import('vue-data-ui/style.css')
@@ -20,6 +21,8 @@ const props = defineProps<{
const { accentColors, selectedAccentColor } = useAccentColor()
const { copy, copied } = useClipboard()
+const chartRef = useTemplateRef('chartRef')
+const { copiedPng, isCopyingPng, copyChartPng } = useCopyChartPng(chartRef)
const colorMode = useColorMode()
const resolvedMode = shallowRef<'light' | 'dark'>('light')
@@ -308,9 +311,8 @@ const chartConfig = computed(() => {
},
},
zoom: {
- maxWidth: isMobile.value ? 350 : 500,
+ autoFit: true,
highlightColor: colors.value.bgElevated,
- useResetSlot: true,
minimap: {
show: true,
lineColor: '#FAFAFA',
@@ -449,7 +451,12 @@ const chartConfig = computed(() => {
-
+
@@ -464,7 +471,7 @@ const chartConfig = computed(() => {
@@ -536,6 +543,13 @@ const chartConfig = computed(() => {
CSV
+
+
PNG
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index 8e6c4a4c5a..cd31b75e87 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -1,5 +1,5 @@
+
+
+
+ {{ $t('settings.foreground_themes.label') }}
+
+
+
+
+
+
diff --git a/app/components/SkeletonBlock.stories.ts b/app/components/SkeletonBlock.stories.ts
new file mode 100644
index 0000000000..875394431f
--- /dev/null
+++ b/app/components/SkeletonBlock.stories.ts
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import SkeletonBlock from './SkeletonBlock.vue'
+
+const meta = {
+ component: SkeletonBlock,
+ tags: ['autodocs'],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+/**
+ * Block-level loading placeholder. Size it with the surrounding layout โ
+ * here a fixed width and height stand in for a card.
+ */
+export const Default: Story = {
+ render: () => ({
+ components: { SkeletonBlock },
+ template: '
+
+ `,
+ }),
+}
diff --git a/app/components/SkeletonInline.stories.ts b/app/components/SkeletonInline.stories.ts
new file mode 100644
index 0000000000..4e1be90d79
--- /dev/null
+++ b/app/components/SkeletonInline.stories.ts
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import SkeletonInline from './SkeletonInline.vue'
+
+const meta = {
+ component: SkeletonInline,
+ tags: ['autodocs'],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+/**
+ * Inline loading placeholder for a single value. Width and height come from
+ * the surrounding text context.
+ */
+export const Default: Story = {
+ render: () => ({
+ components: { SkeletonInline },
+ template: '
+ Downloaded
+ `,
+ }),
+}
diff --git a/app/components/Terminal/Execute.vue b/app/components/Terminal/Execute.vue
index c2ee26ac64..5dc5260a06 100644
--- a/app/components/Terminal/Execute.vue
+++ b/app/components/Terminal/Execute.vue
@@ -1,10 +1,11 @@
@@ -52,56 +58,28 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
-
- $
+ $
{{ i > 0 ? ' ' : '' }}{{ part }}
- {{ executeCopied ? $t('common.copied') : $t('common.copy') }}
-
+ />
-
-
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index acf9ddda5c..adfaf61ef1 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -3,6 +3,7 @@ import type { JsrPackageInfo } from '#shared/types/jsr'
import type { DevDependencySuggestion } from '#shared/utils/dev-dependency'
import type { PackageManagerId } from '~/utils/install-command'
import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
+import { getPackageManagerConfig } from '~/utils/install-command'
const props = defineProps<{
packageName: string
@@ -23,6 +24,14 @@ const { selectedPM, showTypesInInstall, copied, copyInstallCommand } = useInstal
() => props.installVersionOverride ?? null,
)
+const { announce } = useCommandPalette()
+const { polite } = useAnnouncer()
+
+async function copyInstallCommandWithAnnounce() {
+ const success = await copyInstallCommand()
+ if (success) polite($t('package.command.copied_install'))
+}
+
// Generate install command parts for a specific package manager
function getInstallPartsForPM(pmId: PackageManagerId) {
return getInstallCommandParts({
@@ -105,13 +114,20 @@ function getFullCreateCommand() {
// Copy handlers
const { copied: runCopied, copy: copyRun } = useClipboard({ copiedDuring: 2000 })
-const copyRunCommand = (command?: string) => copyRun(getFullRunCommand(command))
+const copyRunCommand = (command?: string) => {
+ copyRun(getFullRunCommand(command))
+ polite($t('package.command.copied_run'))
+}
const { copied: createCopied, copy: copyCreate } = useClipboard({ copiedDuring: 2000 })
-const copyCreateCommand = () => copyCreate(getFullCreateCommand())
+const copyCreateCommand = () => {
+ copyCreate(getFullCreateCommand())
+ polite($t('package.command.copied_create'))
+}
const { copied: devInstallCopied, copy: copyDevInstall } = useClipboard({ copiedDuring: 2000 })
-const copyDevInstallCommand = () =>
+const selectedPackageManagerConfig = computed(() => getPackageManagerConfig(selectedPM.value))
+const copyDevInstallCommand = () => {
copyDevInstall(
getInstallCommand({
packageName: props.packageName,
@@ -121,8 +137,8 @@ const copyDevInstallCommand = () =>
dev: true,
}),
)
-
-const { announce } = useCommandPalette()
+ polite($t('package.command.copied_dev_install'))
+}
useCommandPaletteContextCommands(
computed((): CommandPaletteContextCommandInput[] => {
@@ -219,30 +235,26 @@ useCommandPaletteContextCommands(
-
- $
+ $
{{ i > 0 ? ' ' : '' }}{{ part }}
- {{ copied ? $t('common.copied') : $t('common.copy') }}
-
+ :classicon="copied ? 'i-lucide:check' : 'i-lucide:copy'"
+ @click.stop="copyInstallCommandWithAnnounce"
+ />
@@ -253,15 +265,13 @@ useCommandPaletteContextCommands(
>
$
{{ i > 0 ? ' ' : '' }}{{ part }}
- {{
- devInstallCopied ? $t('common.copied') : $t('common.copy')
- }}
-
+ />
-
$
+
$
{{ i > 0 ? ' ' : '' }}{{ part }}
- $
+ $
{{ i > 0 ? ' ' : '' }}{{ part }}
- {{ runCopied ? $t('common.copied') : $t('common.copy') }}
-
+ />
@@ -364,62 +369,28 @@ useCommandPaletteContextCommands(
- $
+ $
{{ i > 0 ? ' ' : '' }}{{ part }}
- {{
- createCopied ? $t('common.copied') : $t('common.copy')
- }}
-
+ />
-
-
diff --git a/app/components/VersionSelector.vue b/app/components/VersionSelector.vue
index 6cf5c9c071..cf00f60199 100644
--- a/app/components/VersionSelector.vue
+++ b/app/components/VersionSelector.vue
@@ -1,6 +1,6 @@