@kind-ui/charts 0.1.1 → 0.3.0

package/dist/stylesheet-warning.js

@@ -0,0 +1,86 @@
+"use client";
+import { useEffect } from "react";
+const warned = new WeakSet();
+const message = 'Kind UI chart styles are missing. Import "@kind-ui/charts/styles.css" once at your application entry (in Next.js, your root layout). If you intentionally supply all chart styles, define --kind-ui-styles-loaded: 1 on your chart roots.';
+/** Runs only for development mounts; never changes chart styles or server markup. */
+export function StylesheetWarning() {
+    useEffect(() => {
+        const doc = document;
+        const view = doc.defaultView;
+        if (!view || warned.has(doc))
+            return;
+        let disposed = false;
+        let frame = 0;
+        const settled = new WeakSet();
+        const removers = [];
+        const initialLinks = Array.from(doc.querySelectorAll('link[rel~="stylesheet"]'));
+        // Observe failures immediately rather than waiting for the frame check.
+        const completed = (event) => {
+            const link = event.target;
+            if (link instanceof HTMLLinkElement && link.relList.contains("stylesheet")) {
+                settled.add(link);
+                if (doc.readyState === "complete")
+                    schedule();
+            }
+        };
+        doc.addEventListener("load", completed, true);
+        doc.addEventListener("error", completed, true);
+        removers.push(() => {
+            doc.removeEventListener("load", completed, true);
+            doc.removeEventListener("error", completed, true);
+        });
+        const check = () => {
+            if (disposed)
+                return;
+            if (warned.has(doc)) {
+                for (const remove of removers)
+                    remove();
+                disposed = true;
+                return;
+            }
+            const pending = Array.from(doc.querySelectorAll('link[rel~="stylesheet"]')).filter((link) => !link.disabled &&
+                !link.sheet &&
+                !settled.has(link) &&
+                (!link.media || view.matchMedia(link.media).matches));
+            if (pending.length)
+                return;
+            const missing = Array.from(doc.querySelectorAll('[data-kind-ui="chart"]')).some((root) => view.getComputedStyle(root).getPropertyValue("--kind-ui-styles-loaded").trim() !== "1");
+            for (const remove of removers)
+                remove();
+            disposed = true;
+            if (missing) {
+                warned.add(doc);
+                console.warn(message);
+            }
+        };
+        // Give effects which add a stylesheet time to run and the browser time to apply it.
+        const schedule = () => {
+            if (disposed)
+                return;
+            view.cancelAnimationFrame(frame);
+            frame = view.requestAnimationFrame(() => {
+                frame = view.requestAnimationFrame(check);
+            });
+        };
+        if (doc.readyState === "complete")
+            schedule();
+        else {
+            const loaded = () => {
+                // Window load settles every stylesheet which existed at mount, even if
+                // its error occurred before this effect could observe it.
+                for (const link of initialLinks)
+                    settled.add(link);
+                schedule();
+            };
+            view.addEventListener("load", loaded, { once: true });
+            removers.push(() => view.removeEventListener("load", loaded));
+        }
+        return () => {
+            disposed = true;
+            view.cancelAnimationFrame(frame);
+            for (const remove of removers)
+                remove();
+        };
+    }, []);
+    return null;
+}

package/dist/surface-material.js

@@ -3,5 +3,5 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { AreaClayRelief } from "./area-clay.js";
 /** Internal filled-surface finish only. Callers own native shapes, IDs and bounds. */
 export function SurfaceMaterialFilter({ material, id, bounds, family, }) {
-    return (_jsx("filter", { id: id, filterUnits: "userSpaceOnUse", x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height, colorInterpolationFilters: "sRGB", children: material === "paper" ? (_jsxs(_Fragment, { children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65 0.3", numOctaves: 1, seed: 7, result: "fiber" }), _jsx("feFlood", { floodColor: `var(--kind-ui-${family}-paper-fiber, #fff)`, floodOpacity: `var(--kind-ui-${family}-paper-grain, 0.32)` }), _jsx("feComposite", { in2: "fiber", operator: "in", result: "texture" }), _jsx("feComposite", { in: "texture", in2: "SourceAlpha", operator: "in", result: "grain" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "SourceGraphic" }), _jsx("feMergeNode", { in: "grain" })] })] })) : material === "clay" && family === "area" ? (_jsx(AreaClayRelief, {})) : material === "clay" ? (_jsxs(_Fragment, { children: [_jsx("feOffset", { in: "SourceAlpha", dx: 0, dy: 1.5, result: "lower" }), _jsx("feComposite", { in: "SourceAlpha", in2: "lower", operator: "out", result: "topEdge" }), _jsx("feFlood", { floodColor: `var(--kind-ui-${family}-clay-light, #fff)`, floodOpacity: 0.65 }), _jsx("feComposite", { in2: "topEdge", operator: "in", result: "light" }), _jsx("feOffset", { in: "SourceAlpha", dx: 0, dy: -2, result: "upper" }), _jsx("feComposite", { in: "SourceAlpha", in2: "upper", operator: "out", result: "bottomEdge" }), _jsx("feFlood", { floodColor: `var(--kind-ui-${family}-clay-shade, #17212b)`, floodOpacity: 0.38 }), _jsx("feComposite", { in2: "bottomEdge", operator: "in", result: "shade" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "SourceGraphic" }), _jsx("feMergeNode", { in: "shade" }), _jsx("feMergeNode", { in: "light" })] })] })) : (_jsxs(_Fragment, { children: [_jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: 2.5, result: "halo" }), _jsx("feFlood", { floodOpacity: `var(--kind-ui-${family}-glow-opacity, 0.6)`, result: "strength" }), _jsx("feComposite", { in: "halo", in2: "strength", operator: "in", result: "softHalo" }), _jsx("feMorphology", { in: "SourceAlpha", operator: "erode", radius: 0.8, result: "inside" }), _jsx("feComposite", { in: "SourceAlpha", in2: "inside", operator: "out", result: "edge" }), _jsx("feFlood", { floodColor: `var(--kind-ui-${family}-glow-light, #fff)`, floodOpacity: 0.45 }), _jsx("feComposite", { in2: "edge", operator: "in", result: "light" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "softHalo" }), _jsx("feMergeNode", { in: "SourceGraphic" }), _jsx("feMergeNode", { in: "light" })] })] })) }));
+    return (_jsx("filter", { id: id, filterUnits: "userSpaceOnUse", x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height, colorInterpolationFilters: "sRGB", children: material === "clay" && family === "area" ? (_jsx(AreaClayRelief, {})) : material === "clay" ? (_jsxs(_Fragment, { children: [_jsx("feOffset", { in: "SourceAlpha", dx: 0, dy: 1.5, result: "lower" }), _jsx("feComposite", { in: "SourceAlpha", in2: "lower", operator: "out", result: "topEdge" }), _jsx("feFlood", { floodColor: `var(--kind-ui-${family}-clay-light, #fff)`, floodOpacity: 0.65 }), _jsx("feComposite", { in2: "topEdge", operator: "in", result: "light" }), _jsx("feOffset", { in: "SourceAlpha", dx: 0, dy: -2, result: "upper" }), _jsx("feComposite", { in: "SourceAlpha", in2: "upper", operator: "out", result: "bottomEdge" }), _jsx("feFlood", { floodColor: `var(--kind-ui-${family}-clay-shade, #17212b)`, floodOpacity: 0.38 }), _jsx("feComposite", { in2: "bottomEdge", operator: "in", result: "shade" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "SourceGraphic" }), _jsx("feMergeNode", { in: "shade" }), _jsx("feMergeNode", { in: "light" })] })] })) : (_jsxs(_Fragment, { children: [_jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: 2.5, result: "halo" }), _jsx("feFlood", { floodOpacity: `var(--kind-ui-${family}-glow-opacity, 0.6)`, result: "strength" }), _jsx("feComposite", { in: "halo", in2: "strength", operator: "in", result: "softHalo" }), _jsx("feMorphology", { in: "SourceAlpha", operator: "erode", radius: 0.8, result: "inside" }), _jsx("feComposite", { in: "SourceAlpha", in2: "inside", operator: "out", result: "edge" }), _jsx("feFlood", { floodColor: `var(--kind-ui-${family}-glow-light, #fff)`, floodOpacity: 0.45 }), _jsx("feComposite", { in2: "edge", operator: "in", result: "light" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "softHalo" }), _jsx("feMergeNode", { in: "SourceGraphic" }), _jsx("feMergeNode", { in: "light" })] })] })) }));
 }

package/dist/tooltip-content.d.ts

@@ -1,9 +1,16 @@
 import { type ComponentPropsWithRef, type ReactNode } from "react";
 import type { TooltipContentProps as UpstreamTooltipContentProps } from "recharts";
+import { type NormalizedValue } from "./percent-stack.js";
 export type TooltipContentProps = Omit<ComponentPropsWithRef<"div">, "children"> & {
     /** Pass the upstream content callback's props here so engine-only props never reach the DOM. */
     tooltip: UpstreamTooltipContentProps;
     missingValue?: ReactNode;
+    /** Formatting-only fraction resolver. Default content retains the raw value alongside it. */
+    normalizedValue?: NormalizedValue;
+    /** Caller-owned projection status; use the same datum identity selection as BarSeries. */
+    isProjected?: (entry: UpstreamTooltipContentProps["payload"][number]) => boolean;
+    /** Accessible status text appended to projected items. */
+    projectedLabel?: ReactNode;
     /** Opt in to decorative rolling digits for finite numeric text values. Default: off. */
     valueAnimation?: "shuffle";
     /** Omit the heading; series labels and values remain accessible. */
@@ -16,4 +23,4 @@ export type TooltipContentProps = Omit<ComponentPropsWithRef<"div">, "children">
     itemKey?: (entry: UpstreamTooltipContentProps["payload"][number]) => string;
 };
 /** Default tooltip UI using the containing chart's labels, formats, colors and visibility. */
-export declare function TooltipContent({ tooltip, missingValue, valueAnimation, itemKey, hideLabel, hideIndicator, indicator, ...props }: TooltipContentProps): import("react").JSX.Element | null;
+export declare function TooltipContent({ tooltip, missingValue, normalizedValue, isProjected, projectedLabel, valueAnimation, itemKey, hideLabel, hideIndicator, indicator, ...props }: TooltipContentProps): import("react").JSX.Element | null;

package/dist/tooltip-content.js

@@ -1,11 +1,13 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { use } from "react";
 import { useChart } from "./chart-context.js";
 import { LineInteraction } from "./line-chart.js";
+import { formatPercent } from "./percent-stack.js";
+import { colorStopToken } from "./series-color.js";
 import { TooltipNumber } from "./tooltip-number.js";
 /** Default tooltip UI using the containing chart's labels, formats, colors and visibility. */
-export function TooltipContent({ tooltip, missingValue = "No data", valueAnimation, itemKey, hideLabel = false, hideIndicator = false, indicator = "line", ...props }) {
+export function TooltipContent({ tooltip, missingValue = "No data", normalizedValue, isProjected, projectedLabel = "Projected", valueAnimation, itemKey, hideLabel = false, hideIndicator = false, indicator = "line", ...props }) {
     const { config, visibleSeries } = useChart();
     const line = use(LineInteraction);
     const identity = (entry) => itemKey?.(entry) ??
@@ -23,6 +25,7 @@ export function TooltipContent({ tooltip, missingValue = "No data", valueAnimati
     const items = entries.map((entry, index) => {
         const key = identity(entry);
         const item = Object.hasOwn(config, key) ? config[key] : undefined;
+        const projected = entry.payload != null && isProjected?.(entry) === true;
         let name = item?.label ?? entry.name ?? key;
         let value = missingValue;
         if (entry.value != null) {
@@ -42,14 +45,22 @@ export function TooltipContent({ tooltip, missingValue = "No data", valueAnimati
                     : Array.isArray(entry.value)
                         ? entry.value.join(" – ")
                         : entry.value;
+            if (!format) {
+                const fraction = normalizedValue?.(entry);
+                if (fraction !== undefined && Number.isFinite(fraction * 100))
+                    value = (_jsxs(_Fragment, { children: [formatPercent(fraction), " (", value, ")"] }));
+            }
             hasVisibleValue = true;
         }
-        return (_jsxs("li", { "data-kind-ui": "chart-tooltip-item", "data-series": key, children: [!hideIndicator &&
+        return (_jsxs("li", { "data-kind-ui": "chart-tooltip-item", "data-series": key, "data-projected": projected || undefined, children: [!hideIndicator &&
                     (item?.icon ? (_jsx("span", { "aria-hidden": "true", "data-kind-ui": "chart-icon", children: _jsx(item.icon, {}) })) : (_jsx("span", { "aria-hidden": "true", "data-kind-ui": "chart-indicator", "data-indicator": indicator, style: {
+                            "--kind-ui-chart-indicator-background": item
+                                ? `var(${colorStopToken(key, "gradient")})`
+                                : (entry.color ?? "currentColor"),
                             "--kind-ui-chart-indicator-color": item
                                 ? `var(--color-${key})`
                                 : (entry.color ?? "currentColor"),
-                        } }))), _jsx("span", { children: name }), _jsx("strong", { "data-kind-ui": "chart-tooltip-value", children: valueAnimation === "shuffle" &&
+                        } }))), _jsx("span", { children: name }), projected && _jsx("span", { "data-kind-ui": "projection-status", children: projectedLabel }), _jsx("strong", { "data-kind-ui": "chart-tooltip-value", children: valueAnimation === "shuffle" &&
                         typeof entry.value === "number" &&
                         Number.isFinite(entry.value) &&
                         (typeof value === "string" || (typeof value === "number" && Number.isFinite(value))) ? (_jsx(TooltipNumber, { value: value })) : (value) })] }, entry.graphicalItemId ?? `${key}-${index}`));

package/dist/tooltip.d.ts

@@ -8,6 +8,8 @@ export type TooltipProps = Omit<EngineTooltipProps, "position" | "isAnimationAct
     maxWidth?: number;
     /** Resolves category identity before the existing series-key fallback. */
     itemKey?: TooltipContentProps["itemKey"];
+    /** Default content only; custom content and explicit formatters retain ownership. */
+    normalizedValue?: TooltipContentProps["normalizedValue"];
     /** Opt in on Kind's default content; custom content owns its own animation. */
     valueAnimation?: TooltipContentProps["valueAnimation"];
 };
@@ -22,7 +24,7 @@ export type TooltipFrameProps = {
     frameProps: TooltipProps["frameProps"];
 };
 export declare function StaticTooltipFrame({ x, y, ref, style, frameProps, children }: TooltipFrameProps): import("react").JSX.Element;
-export declare function TooltipBase({ ref, content, frameProps, maxWidth, itemKey, valueAnimation, Frame, ...props }: TooltipProps & {
+export declare function TooltipBase({ ref, content, frameProps, maxWidth, itemKey, valueAnimation, normalizedValue, Frame, defaultIndex: nativeDefaultIndex, ...props }: TooltipProps & {
     Frame?: (props: TooltipFrameProps) => ReactNode;
 }): import("react").JSX.Element;
 /** Measured and bounded content; the engine owns payload, selection and Escape dismissal. */

package/dist/tooltip.js

@@ -1,14 +1,15 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cloneElement, createElement, isValidElement, useCallback, useLayoutEffect, useState, } from "react";
+import { cloneElement, createElement, isValidElement, use, useCallback, useLayoutEffect, useState, } from "react";
 import { Tooltip as EngineTooltip, useChartHeight, useChartWidth, } from "recharts";
 import { useChart } from "./chart-context.js";
 import { useLineInteraction } from "./line-chart.js";
+import { PieTooltipPin } from "./pie-tooltip-pin.js";
 import { TooltipContent } from "./tooltip-content.js";
 export function StaticTooltipFrame({ x, y, ref, style, frameProps, children }) {
     return (_jsx("div", { ...frameProps, "data-kind-ui": "tooltip-frame", ref: ref, style: { ...style, ...frameProps?.style, transform: `translate(${x}px, ${y}px)` }, children: children }));
 }
-function PositionedContent({ consumerContent, itemKey, valueAnimation, maxWidth, frameProps, frameRef, Frame, ...tooltip }) {
+function PositionedContent({ consumerContent, itemKey, valueAnimation, normalizedValue, maxWidth, frameProps, frameRef, Frame, ...tooltip }) {
     const { pointer, seriesKeys } = useLineInteraction();
     const { visibleSeries } = useChart();
     // Exiting strokes can remain painted briefly; hidden series leave all tooltip content immediately.
@@ -54,7 +55,7 @@ function PositionedContent({ consumerContent, itemKey, valueAnimation, maxWidth,
     const offsetY = typeof offset === "number" ? offset : offset.y;
     const maxX = Math.max(0, width - size.width);
     const maxY = Math.max(0, height - size.height);
-    const children = isValidElement(consumerContent) ? (cloneElement(consumerContent, contentProps)) : typeof consumerContent === "function" ? (createElement(consumerContent, contentProps)) : (_jsx(TooltipContent, { tooltip: contentProps, ...(itemKey ? { itemKey } : {}), ...(valueAnimation ? { valueAnimation } : {}) }));
+    const children = isValidElement(consumerContent) ? (cloneElement(consumerContent, contentProps)) : typeof consumerContent === "function" ? (createElement(consumerContent, contentProps)) : (_jsx(TooltipContent, { tooltip: contentProps, ...(normalizedValue ? { normalizedValue } : {}), ...(itemKey ? { itemKey } : {}), ...(valueAnimation ? { valueAnimation } : {}) }));
     return (_jsx(Frame, { x: Math.max(0, Math.min(anchor.x + offsetX, maxX)), y: Math.max(0, Math.min(anchor.y + offsetY, maxY)), maxX: maxX, maxY: maxY, ref: attachRef, style: {
             width: "max-content",
             maxWidth: Math.min(Math.max(0, maxWidth), width),
@@ -63,9 +64,11 @@ function PositionedContent({ consumerContent, itemKey, valueAnimation, maxWidth,
             boxSizing: "border-box",
         }, frameProps: frameProps, children: children }));
 }
-export function TooltipBase({ ref, content, frameProps, maxWidth = 180, itemKey, valueAnimation, Frame = StaticTooltipFrame, ...props }) {
+export function TooltipBase({ ref, content, frameProps, maxWidth = 180, itemKey, valueAnimation, normalizedValue, Frame = StaticTooltipFrame, defaultIndex: nativeDefaultIndex, ...props }) {
     useLineInteraction();
-    return (_jsx(EngineTooltip, { cursor: false, offset: 12, filterNull: false, ...props, position: { x: 0, y: 0 }, isAnimationActive: false, content: _jsx(PositionedContent, { active: false, payload: [], coordinate: undefined, activeIndex: undefined, accessibilityLayer: false, consumerContent: content, itemKey: itemKey, valueAnimation: valueAnimation, maxWidth: maxWidth, frameProps: frameProps, frameRef: ref, Frame: Frame }) }));
+    const pinIndex = use(PieTooltipPin);
+    const defaultIndex = props.active === undefined ? (nativeDefaultIndex ?? pinIndex) : nativeDefaultIndex;
+    return (_jsx(EngineTooltip, { cursor: false, offset: 12, filterNull: false, ...props, ...(defaultIndex === undefined ? {} : { defaultIndex }), position: { x: 0, y: 0 }, isAnimationActive: false, content: _jsx(PositionedContent, { active: false, payload: [], coordinate: undefined, activeIndex: undefined, accessibilityLayer: false, consumerContent: content, itemKey: itemKey, valueAnimation: valueAnimation, normalizedValue: normalizedValue, maxWidth: maxWidth, frameProps: frameProps, frameRef: ref, Frame: Frame }) }));
 }
 /** Measured and bounded content; the engine owns payload, selection and Escape dismissal. */
 export function Tooltip(props) {

package/dist/types.d.ts

@@ -1,8 +1,17 @@
 import type { ComponentProps, ComponentType, ReactNode } from "react";
 import type { Symbols, TooltipValueType } from "recharts";
+import type { FillPattern } from "./fill-pattern.js";
+/** Arrays are evenly distributed gradient stops, not category palettes. */
+export type SeriesColor = string | readonly string[] | {
+    readonly light: string | readonly string[];
+    readonly dark: string | readonly string[];
+};
 export type SeriesConfig = Readonly<Record<string, {
-    label: string;
-    color: string;
+    /** Inferred from the matching key when omitted; explicit text takes precedence. */
+    label?: string;
+    color: SeriesColor;
+    /** Optional implicit bar paint and built-in legend encoding. */
+    pattern?: FillPattern;
     /** Decorative glyph shared by built-in legend and tooltip content. */
     icon?: ComponentType;
     /** Explicit legend-only native symbol; reuse this value for ScatterSeries.shape. */

package/dist/waterfall-chart.d.ts

@@ -0,0 +1,4 @@
+import { type BarChartProps } from "./bar-chart.js";
+export type WaterfallChartProps = BarChartProps;
+/** Native bar composition, with a fixed waterfall silhouette while loading. */
+export declare function WaterfallChart(props: WaterfallChartProps): import("react").JSX.Element;

package/dist/waterfall-chart.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BarChartImplementation } from "./bar-chart.js";
+/** Native bar composition, with a fixed waterfall silhouette while loading. */
+export function WaterfallChart(props) {
+    return _jsx(BarChartImplementation, { chartProps: props, family: "waterfall" });
+}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@kind-ui/charts",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Composable React chart components built on Recharts and Motion.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bhaveshchow20/kind-ui.git",
     "directory": "packages/charts"
   },
-  "homepage": "https://github.com/bhaveshchow20/kind-ui/tree/main/packages/charts#readme",
+  "homepage": "https://kindui.dev/charts",
   "bugs": {
     "url": "https://github.com/bhaveshchow20/kind-ui/issues"
   },

package/dist/bar-paper.d.ts

@@ -1,2 +0,0 @@
-/** Uneven inset pencil contours, never displacement or an expanded quantitative mark. */
-export declare function BarPaper(): import("react").JSX.Element;

package/dist/bar-paper.js

@@ -1,6 +0,0 @@
-"use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/** Uneven inset pencil contours, never displacement or an expanded quantitative mark. */
-export function BarPaper() {
-    return (_jsxs(_Fragment, { children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65 0.3", numOctaves: 1, seed: 7, result: "fiber" }), _jsx("feFlood", { floodColor: "var(--kind-ui-bar-paper-fiber, #fff)", floodOpacity: "var(--kind-ui-bar-paper-grain, 0.14)" }), _jsx("feComposite", { in2: "fiber", operator: "in", result: "texture" }), _jsx("feComposite", { in: "texture", in2: "SourceGraphic", operator: "atop", result: "paper" }), _jsx("feMorphology", { in: "SourceAlpha", operator: "erode", radius: 1.2, result: "inside" }), _jsx("feComposite", { in: "SourceAlpha", in2: "inside", operator: "arithmetic", k2: 1, k3: -1, result: "edge" }), _jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.08 0.2", numOctaves: 1, seed: 11, result: "pencil" }), _jsx("feColorMatrix", { in: "pencil", type: "luminanceToAlpha", result: "pencilMask" }), _jsx("feComponentTransfer", { in: "pencilMask", result: "sketch", children: _jsx("feFuncA", { type: "linear", slope: 1.6, intercept: -0.15 }) }), _jsx("feComposite", { in: "edge", in2: "sketch", operator: "in", result: "sketchEdge" }), _jsx("feColorMatrix", { in: "SourceGraphic", type: "matrix", values: "0.35 0 0 0 0 0 0.35 0 0 0 0 0 0.35 0 0 0 0 0 1 0", result: "ink" }), _jsx("feComposite", { in: "ink", in2: "sketchEdge", operator: "in", result: "contour" }), _jsx("feComposite", { in: "contour", in2: "paper", operator: "atop" })] }));
-}