@@ -151,11 +224,12 @@ export function OpenGraphMetaGeneratorPage() {
allowBackgroundToggle={false}
allowFullscreen={true}
>
- {previewImage ? (
+ {approvedPreviewImage ? (
// eslint-disable-next-line @next/next/no-img-element
) : (
diff --git a/src/features/tools/open-graph-meta-generator/utils.ts b/src/features/tools/open-graph-meta-generator/utils.ts
index 340dc5a7..7454163c 100644
--- a/src/features/tools/open-graph-meta-generator/utils.ts
+++ b/src/features/tools/open-graph-meta-generator/utils.ts
@@ -9,6 +9,8 @@ export type OpenGraphInput = {
twitterSite: string
}
+const SUPPORTED_PREVIEW_HOSTS = new Set(["i.ytimg.com", "vumbnail.com"])
+
function collapseWhitespace(value: string): string {
return value.replace(/\s+/g, " ").trim()
}
@@ -34,14 +36,27 @@ export function normalizeAbsoluteHttpUrl(raw: string): string | null {
}
}
+export function normalizeSupportedOpenGraphPreviewUrl(raw: string): string | null {
+ const normalized = normalizeAbsoluteHttpUrl(raw)
+ if (!normalized) return null
+
+ const url = new URL(normalized)
+ if (url.protocol !== "https:" || url.username || url.password || url.port) return null
+
+ const hostname = url.hostname.toLowerCase()
+ const isInstagramHost = hostname === "instagram.com" || hostname.endsWith(".instagram.com")
+ return isInstagramHost || SUPPORTED_PREVIEW_HOSTS.has(hostname) ? url.toString() : null
+}
+
export function buildOpenGraphMetaTags(input: OpenGraphInput): string {
const title = escapeHtml(collapseWhitespace(input.title))
const description = escapeHtml(collapseWhitespace(input.description))
const siteName = escapeHtml(collapseWhitespace(input.siteName))
const url = normalizeAbsoluteHttpUrl(input.url) || ""
const image = normalizeAbsoluteHttpUrl(input.image) || ""
- const type = collapseWhitespace(input.type || "website")
+ const type = escapeHtml(collapseWhitespace(input.type || "website"))
const twitterSite = collapseWhitespace(input.twitterSite)
+ const twitterCard = input.twitterCard === "summary_large_image" ? "summary_large_image" : "summary"
const lines = [
`
`,
@@ -50,7 +65,7 @@ export function buildOpenGraphMetaTags(input: OpenGraphInput): string {
url ? `
` : "",
image ? `
` : "",
siteName ? `
` : "",
- `
`,
+ `
`,
`
`,
`
`,
image ? `
` : "",
diff --git a/src/features/tools/pipeline-builder/page.tsx b/src/features/tools/pipeline-builder/page.tsx
index 9b75eb84..832007cd 100644
--- a/src/features/tools/pipeline-builder/page.tsx
+++ b/src/features/tools/pipeline-builder/page.tsx
@@ -67,7 +67,7 @@ export function PipelineBuilderPage() {
const [importError, setImportError] = React.useState
(null)
const [actionAnnouncement, setActionAnnouncement] = React.useState("")
const [onboardingDismissed, setOnboardingDismissed] = React.useState(false)
-
+ const runRequestRef = React.useRef(0)
const selectedStep = recipe.steps.find((step) => step.id === selectedStepId) ?? recipe.steps[0] ?? null
const validation = React.useMemo(() => validateRecipe(recipe), [recipe])
const compatibilityHints = React.useMemo(() => getStepCompatibilityHints(recipe.steps), [recipe.steps])
@@ -105,11 +105,16 @@ export function PipelineBuilderPage() {
void refreshSavedRecipes()
}, [refreshSavedRecipes, storageAvailable])
+ const invalidateExecution = React.useCallback(() => {
+ runRequestRef.current += 1
+ setResult(null)
+ setIsRunning(false)
+ }, [])
const updateRecipe = React.useCallback((updater: (current: RecipeDocument) => RecipeDocument) => {
setRecipe((current) => updateRecipeTimestamp(updater(current)))
- setResult(null)
+ invalidateExecution()
setImportError(null)
- }, [])
+ }, [invalidateExecution])
const addStep = React.useCallback(() => {
const step = createStep(pendingToolKey)
@@ -186,10 +191,10 @@ export function PipelineBuilderPage() {
setRecipe(generated.recipe)
setInitialInput(generated.initialInput)
setSelectedStepId(generated.recipe.steps[0]?.id ?? null)
- setResult(null)
+ invalidateExecution()
setImportError(null)
toast.success(text("template_loaded"))
- }, [lang, text])
+ }, [invalidateExecution, lang, text])
React.useEffect(() => {
const params = new URLSearchParams(window.location.search)
@@ -229,9 +234,11 @@ export function PipelineBuilderPage() {
}, [recipe.steps, selectedStepId])
const runCurrentRecipe = React.useCallback(async () => {
+ const requestId = ++runRequestRef.current
setIsRunning(true)
try {
const execution = await runRecipe(recipe, initialInput)
+ if (requestId !== runRequestRef.current) return
setResult(execution)
if (execution.ok) {
toast.success(text("run_complete"))
@@ -239,7 +246,7 @@ export function PipelineBuilderPage() {
toast.error(text("run_failed"))
}
} finally {
- setIsRunning(false)
+ if (requestId === runRequestRef.current) setIsRunning(false)
}
}, [initialInput, recipe, text])
@@ -273,9 +280,9 @@ export function PipelineBuilderPage() {
}
setRecipe(loadResult.value.recipe)
setSelectedStepId(loadResult.value.recipe.steps[0]?.id ?? null)
- setResult(null)
+ invalidateExecution()
toast.success(text("recipe_loaded"))
- }, [selectedSavedId, storageAvailable, text])
+ }, [invalidateExecution, selectedSavedId, storageAvailable, text])
const deleteRecipe = React.useCallback(async () => {
if (!storageAvailable || !selectedSavedId) return
@@ -302,10 +309,10 @@ export function PipelineBuilderPage() {
}
setRecipe(imported.recipe)
setSelectedStepId(imported.recipe.steps[0]?.id ?? null)
- setResult(null)
+ invalidateExecution()
setImportError(null)
setActionAnnouncement(imported.announcement)
- }, [text])
+ }, [invalidateExecution, text])
const performShareRecipe = React.useCallback(async () => {
return sharePipelineRecipe(recipe, lang, t, text, setActionAnnouncement)
@@ -488,7 +495,7 @@ export function PipelineBuilderPage() {
value={initialInput}
onChange={(event) => {
setInitialInput(event.target.value)
- setResult(null)
+ invalidateExecution()
}}
placeholder={text("initial_input_placeholder")}
className="font-mono text-sm"
diff --git a/src/features/tools/qr-code-generator/browser-actions.ts b/src/features/tools/qr-code-generator/browser-actions.ts
index 13696552..31cacb8a 100644
--- a/src/features/tools/qr-code-generator/browser-actions.ts
+++ b/src/features/tools/qr-code-generator/browser-actions.ts
@@ -17,6 +17,16 @@ export async function loadToast() {
return toastPromise
}
+export function createQrRenderCanvas(): HTMLCanvasElement {
+ return document.createElement("canvas")
+}
+
+export function commitQrRenderCanvas(source: HTMLCanvasElement, target: HTMLCanvasElement): void {
+ target.width = source.width
+ target.height = source.height
+ target.getContext("2d")?.drawImage(source, 0, 0)
+}
+
export function drawRoundedRect(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number) {
ctx.beginPath()
ctx.moveTo(x + radius, y)
diff --git a/src/features/tools/qr-code-generator/page.tsx b/src/features/tools/qr-code-generator/page.tsx
index d92d23df..e4b8c976 100644
--- a/src/features/tools/qr-code-generator/page.tsx
+++ b/src/features/tools/qr-code-generator/page.tsx
@@ -11,6 +11,8 @@ import { FILE_INPUT_POLICIES, validateFileAgainstPolicy } from "@/core/files/fil
import { parseSafeExternalUrl } from "@/core/security/external-url"
import {
buildQrSvg,
+ commitQrRenderCanvas,
+ createQrRenderCanvas,
decodeQrImageFile,
downloadCanvasPng,
downloadSvg as downloadSvgFile,
@@ -74,24 +76,27 @@ export function QrCodeGeneratorPage() {
const logoInputRef = React.useRef(null)
const decodeInputRef = React.useRef(null)
const decodeRequestRef = React.useRef(0)
+ const renderRequestRef = React.useRef(0)
const decodedUrl = React.useMemo(() => {
const parsed = parseSafeExternalUrl(decodedPayload, { requireHttps: false })
return parsed.ok ? parsed.url : null
}, [decodedPayload])
- const renderToCanvas = React.useCallback(async () => {
+ const renderToCanvas = React.useCallback(async (requestId: number) => {
if (!text.trim()) {
- setDataUrl("")
+ if (requestId === renderRequestRef.current) setDataUrl("")
return
}
- const canvas = canvasRef.current
- if (!canvas) return
+ const visibleCanvas = canvasRef.current
+ if (!visibleCanvas) return
+ const renderCanvas = createQrRenderCanvas()
const qrCode = await loadQRCode()
+ if (requestId !== renderRequestRef.current) return
- await qrCode.toCanvas(canvas, text, {
+ await qrCode.toCanvas(renderCanvas, text, {
width: size,
margin,
errorCorrectionLevel,
@@ -100,11 +105,13 @@ export function QrCodeGeneratorPage() {
light: bgColor,
},
})
+ if (requestId !== renderRequestRef.current) return
if (logoEnabled && logoDataUrl) {
- const ctx = canvas.getContext("2d")
+ const ctx = renderCanvas.getContext("2d")
if (ctx) {
const img = await loadImage(logoDataUrl)
+ if (requestId !== renderRequestRef.current) return
const logoSize = Math.floor((size * logoScale) / 100)
const x = (size - logoSize) / 2
const y = (size - logoSize) / 2
@@ -120,22 +127,24 @@ export function QrCodeGeneratorPage() {
}
}
- setDataUrl(canvas.toDataURL("image/png"))
+ if (requestId !== renderRequestRef.current) return
+ commitQrRenderCanvas(renderCanvas, visibleCanvas)
+ setDataUrl(renderCanvas.toDataURL("image/png"))
}, [bgColor, errorCorrectionLevel, fgColor, logoDataUrl, logoEnabled, logoScale, margin, size, text])
React.useEffect(() => {
- let cancelled = false
+ const requestId = ++renderRequestRef.current
void (async () => {
try {
- await renderToCanvas()
+ await renderToCanvas(requestId)
} catch {
- if (!cancelled) {
+ if (requestId === renderRequestRef.current) {
setDataUrl("")
}
}
})()
return () => {
- cancelled = true
+ if (requestId === renderRequestRef.current) renderRequestRef.current += 1
}
}, [renderToCanvas])
diff --git a/src/features/tools/svg-blob-generator/utils.ts b/src/features/tools/svg-blob-generator/utils.ts
index c472494d..454275b8 100644
--- a/src/features/tools/svg-blob-generator/utils.ts
+++ b/src/features/tools/svg-blob-generator/utils.ts
@@ -5,6 +5,18 @@ export type BlobConfig = {
seed: number
}
+const HEX_COLOR_PATTERN = /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i
+const DEFAULT_FILL = "#22d3ee"
+const DEFAULT_STROKE = "#0f172a"
+
+export function normalizeSvgColor(value: string, fallback: string): string {
+ const normalized = value.trim()
+ if (HEX_COLOR_PATTERN.test(normalized)) return normalized
+
+ const normalizedFallback = fallback.trim()
+ return HEX_COLOR_PATTERN.test(normalizedFallback) ? normalizedFallback : "#000000"
+}
+
function clamp(value: number, min: number, max: number): number {
if (!Number.isFinite(value)) return min
return Math.max(min, Math.min(max, value))
@@ -54,9 +66,11 @@ export function buildBlobPath(config: BlobConfig): string {
export function buildBlobSvg(path: string, size: number, fill: string, stroke: string): string {
const safeSize = Math.round(clamp(size, 64, 1024))
+ const safeFill = normalizeSvgColor(fill, DEFAULT_FILL)
+ const safeStroke = normalizeSvgColor(stroke, DEFAULT_STROKE)
return [
`",
].join("\n")
}
diff --git a/src/features/tools/svg-pattern-generator/utils.ts b/src/features/tools/svg-pattern-generator/utils.ts
index 79be6104..9aa00f21 100644
--- a/src/features/tools/svg-pattern-generator/utils.ts
+++ b/src/features/tools/svg-pattern-generator/utils.ts
@@ -11,6 +11,18 @@ export type PatternConfig = {
height: number
}
+const HEX_COLOR_PATTERN = /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i
+const DEFAULT_FOREGROUND = "#22d3ee"
+const DEFAULT_BACKGROUND = "#020617"
+
+export function normalizeSvgColor(value: string, fallback: string): string {
+ const normalized = value.trim()
+ if (HEX_COLOR_PATTERN.test(normalized)) return normalized
+
+ const normalizedFallback = fallback.trim()
+ return HEX_COLOR_PATTERN.test(normalizedFallback) ? normalizedFallback : "#000000"
+}
+
function clamp(value: number, min: number, max: number): number {
if (!Number.isFinite(value)) return min
return Math.max(min, Math.min(max, value))
@@ -22,20 +34,21 @@ export function buildPatternShape(config: PatternConfig): string {
const strokeWidth = clamp(config.strokeWidth, 0.5, 24)
const halfGap = gap / 2
const inner = Math.max(1, size - gap)
+ const foreground = normalizeSvgColor(config.foreground, DEFAULT_FOREGROUND)
if (config.kind === "grid") {
return [
- ``,
- ``,
+ ``,
+ ``,
].join("\n")
}
if (config.kind === "diagonal") {
- return ``
+ return ``
}
const radius = clamp(inner * 0.2, 1, size * 0.45)
- return ``
+ return ``
}
export function buildPatternSvg(config: PatternConfig): string {
@@ -43,12 +56,13 @@ export function buildPatternSvg(config: PatternConfig): string {
const height = clamp(Math.round(config.height), 64, 2048)
const size = clamp(Math.round(config.tileSize), 8, 256)
const shape = buildPatternShape(config)
+ const background = normalizeSvgColor(config.background, DEFAULT_BACKGROUND)
return [
`