@patternmode/swatch 0.10.2 → 0.10.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/DistributionBar/distribution-bar-math.d.ts +6 -6
- package/dist/DistributionBar/distribution-bar-math.d.ts.map +1 -1
- package/dist/Swatch/swatch-atmosphere.d.ts.map +1 -1
- package/dist/Swatch/swatch-colors.d.ts.map +1 -1
- package/dist/Swatch/swatch-root.d.ts.map +1 -1
- package/dist/index.mjs +11 -20
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -2
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import type { WeightedColorSegment } from "@patternmode/system";
|
|
2
|
+
/**
|
|
3
|
+
* Weighted segment used by DistributionBar and DistributionDisplay. Extends the
|
|
4
|
+
* shared {@link WeightedColorSegment} with a required stable `id` for editing.
|
|
5
|
+
*/
|
|
6
|
+
export interface DistributionBarSegment extends WeightedColorSegment {
|
|
4
7
|
id: string;
|
|
5
|
-
label?: string;
|
|
6
|
-
/** Relative weight, not a persisted percentage. Invalid or negative values render as 0. */
|
|
7
|
-
value: number;
|
|
8
8
|
}
|
|
9
9
|
/** Segment metadata update; weight changes happen through boundary movement. */
|
|
10
10
|
export type DistributionBarSegmentUpdate = Partial<Omit<DistributionBarSegment, "value">> & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"distribution-bar-math.d.ts","sourceRoot":"","sources":["../../src/DistributionBar/distribution-bar-math.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"distribution-bar-math.d.ts","sourceRoot":"","sources":["../../src/DistributionBar/distribution-bar-math.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE;;;GAGG;AACH,MAAM,WAAW,sBAAuB,SAAQ,oBAAoB;IAClE,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,gFAAgF;AAChF,MAAM,MAAM,4BAA4B,GAAG,OAAO,CAAC,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC,GAAG;IAC1F,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AASF,gFAAgF;AAChF,eAAO,MAAM,oBAAoB,GAAI,UAAU,sBAAsB,EAAE,KAAG,MACA,CAAC;AAE3E,6EAA6E;AAC7E,eAAO,MAAM,8BAA8B,GACzC,UAAU,sBAAsB,EAAE,EAClC,eAAe,MAAM,KACpB,MAUF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,sBAAsB,EAAE,EAClC,eAAe,MAAM,EACrB,YAAY,MAAM,EAClB,UAAU,MAAM,KACf,sBAAsB,EAyBxB,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,yBAAyB,GACpC,UAAU,sBAAsB,EAAE,EAClC,WAAW,MAAM,KAChB,sBAAsB,EAkCxB,CAAC;AAEF,kEAAkE;AAClE,eAAO,MAAM,yBAAyB,GACpC,UAAU,sBAAsB,EAAE,EAClC,WAAW,MAAM,EACjB,QAAQ,4BAA4B,KACnC,sBAAsB,EACoE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"swatch-atmosphere.d.ts","sourceRoot":"","sources":["../../src/Swatch/swatch-atmosphere.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"swatch-atmosphere.d.ts","sourceRoot":"","sources":["../../src/Swatch/swatch-atmosphere.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,MAAM,WAAW,uBAAuB;IACtC,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAyCD,eAAO,MAAM,6BAA6B,GACxC,QAAQ,eAAe,EAAE,GAAG,SAAS,EACrC,UAAS,uBAA4B,KACpC,MAAM,GAAG,SA6BX,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"swatch-colors.d.ts","sourceRoot":"","sources":["../../src/Swatch/swatch-colors.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"swatch-colors.d.ts","sourceRoot":"","sources":["../../src/Swatch/swatch-colors.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAmBtD,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,KAAG,OAG5C,CAAC;AAEF,eAAO,MAAM,yBAAyB,GACpC,QAAQ,eAAe,EAAE,GAAG,SAAS,EACrC,QAAO,QAAQ,GAAG,MAAe,KAChC,MAAM,GAAG,SAoCX,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"swatch-root.d.ts","sourceRoot":"","sources":["../../src/Swatch/swatch-root.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"swatch-root.d.ts","sourceRoot":"","sources":["../../src/Swatch/swatch-root.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAuKlD,eAAO,MAAM,MAAM,GAAI,yRA4BpB,WAAW,gCA6Fb,CAAC"}
|
package/dist/index.mjs
CHANGED
|
@@ -2,6 +2,8 @@ import { PATTERNMODE_SIZES, PATTERNMODE_SIZE_VALUES, getObjectSizingStyle, joinC
|
|
|
2
2
|
import { LazyMotion, domMax, m } from "motion/react";
|
|
3
3
|
import { useRef } from "react";
|
|
4
4
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { hexToRgb, rgbToHex } from "@instruments/colorscope/convert";
|
|
6
|
+
import { hexLightness } from "@instruments/colorscope/math";
|
|
5
7
|
import { Slot, Slottable } from "@radix-ui/react-slot";
|
|
6
8
|
//#region src/DistributionBar/distribution-bar-math.ts
|
|
7
9
|
const sanitizeValue = (value) => Number.isFinite(value) ? Math.max(0, value) : 0;
|
|
@@ -356,15 +358,12 @@ const POOLS = [
|
|
|
356
358
|
* vertically. Returns `undefined` when there are no colors.
|
|
357
359
|
*/
|
|
358
360
|
const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
|
|
359
|
-
const normalizeHex$1 = (color) => {
|
|
360
|
-
const value = color.trim().replace(/^#/u, "");
|
|
361
|
-
if (/^[\da-f]{3}$/iu.test(value)) return `${value[0]}${value[0]}${value[1]}${value[1]}${value[2]}${value[2]}`;
|
|
362
|
-
if (/^[\da-f]{6}$/iu.test(value)) return value;
|
|
363
|
-
return null;
|
|
364
|
-
};
|
|
365
361
|
const withAlpha = (color, alpha) => {
|
|
366
|
-
const
|
|
367
|
-
if (
|
|
362
|
+
const rgb = hexToRgb(color);
|
|
363
|
+
if (rgb !== null) {
|
|
364
|
+
const suffix = Math.round(clamp(alpha, 0, 255)).toString(16).padStart(2, "0");
|
|
365
|
+
return `${rgbToHex(rgb.r, rgb.g, rgb.b)}${suffix}`;
|
|
366
|
+
}
|
|
368
367
|
return `color-mix(in srgb, ${color} ${Math.round(clamp(alpha, 0, 255) / 255 * 100)}%, transparent)`;
|
|
369
368
|
};
|
|
370
369
|
const getSwatchAtmosphereBackground = (colors, options = {}) => {
|
|
@@ -387,12 +386,8 @@ const getSwatchAtmosphereBackground = (colors, options = {}) => {
|
|
|
387
386
|
};
|
|
388
387
|
//#endregion
|
|
389
388
|
//#region src/Swatch/swatch-colors.ts
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
if (/^[\da-f]{3}$/iu.test(value)) return `${value[0]}${value[0]}${value[1]}${value[1]}${value[2]}${value[2]}`;
|
|
393
|
-
if (/^[\da-f]{6}$/iu.test(value)) return value;
|
|
394
|
-
return null;
|
|
395
|
-
};
|
|
389
|
+
/** Perceptual (OKLab) lightness above which a swatch reads as "light". */
|
|
390
|
+
const LIGHT_LIGHTNESS_THRESHOLD = .62;
|
|
396
391
|
const toColorStop = (stop) => typeof stop === "string" ? { color: stop } : stop;
|
|
397
392
|
const getRatioWeight = (ratio) => {
|
|
398
393
|
if (ratio === void 0) return 1;
|
|
@@ -400,12 +395,8 @@ const getRatioWeight = (ratio) => {
|
|
|
400
395
|
};
|
|
401
396
|
const formatPercent = (value) => `${Number.isInteger(value) ? value : Number(value.toFixed(2))}%`;
|
|
402
397
|
const isLightColor = (color) => {
|
|
403
|
-
const
|
|
404
|
-
|
|
405
|
-
const red = Number.parseInt(normalized.slice(0, 2), 16);
|
|
406
|
-
const green = Number.parseInt(normalized.slice(2, 4), 16);
|
|
407
|
-
const blue = Number.parseInt(normalized.slice(4, 6), 16);
|
|
408
|
-
return (.299 * red + .587 * green + .114 * blue) / 255 > .62;
|
|
398
|
+
const lightness = hexLightness(color);
|
|
399
|
+
return Number.isFinite(lightness) && lightness > LIGHT_LIGHTNESS_THRESHOLD;
|
|
409
400
|
};
|
|
410
401
|
const getSwatchColorsBackground = (colors, blend = "step") => {
|
|
411
402
|
if (colors === void 0 || colors.length === 0) return;
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":["clamp","normalizeHex"],"sources":["../src/DistributionBar/distribution-bar-math.ts","../src/DistributionBar/distribution-bar-root.tsx","../src/Swatch/swatch-atmosphere.ts","../src/Swatch/swatch-colors.ts","../src/Swatch/swatch-types.ts","../src/Swatch/swatch-root.tsx"],"sourcesContent":["/** Weighted segment used by DistributionBar and DistributionDisplay. */\nexport interface DistributionBarSegment {\n color: string;\n id: string;\n label?: string;\n /** Relative weight, not a persisted percentage. Invalid or negative values render as 0. */\n value: number;\n}\n\n/** Segment metadata update; weight changes happen through boundary movement. */\nexport type DistributionBarSegmentUpdate = Partial<Omit<DistributionBarSegment, \"value\">> & {\n value?: never;\n};\n\nconst sanitizeValue = (value: number): number => (Number.isFinite(value) ? Math.max(0, value) : 0);\n\nconst clamp = (value: number, min: number, max: number): number =>\n Math.min(Math.max(value, min), max);\n\nconst roundValue = (value: number): number => Number(value.toFixed(1));\n\n/** Sums sanitized segment weights, treating invalid or negative values as 0. */\nexport const getDistributionTotal = (segments: DistributionBarSegment[]): number =>\n segments.reduce((sum, segment) => sum + sanitizeValue(segment.value), 0);\n\n/** Returns the percentage position of the boundary after `boundaryIndex`. */\nexport const getDistributionBoundaryPercent = (\n segments: DistributionBarSegment[],\n boundaryIndex: number,\n): number => {\n const total = getDistributionTotal(segments);\n if (total <= 0) {\n return 0;\n }\n\n const boundaryValue = segments\n .slice(0, boundaryIndex + 1)\n .reduce((sum, segment) => sum + sanitizeValue(segment.value), 0);\n return roundValue((boundaryValue / total) * 100);\n};\n\n/**\n * Moves the boundary between two adjacent segments while preserving their sum.\n *\n * `deltaValue` is applied to the left segment and subtracted from the right\n * segment. `minValue` prevents either side of the pair from collapsing below a\n * caller-defined minimum.\n */\nexport const moveDistributionBoundary = (\n segments: DistributionBarSegment[],\n boundaryIndex: number,\n deltaValue: number,\n minValue: number,\n): DistributionBarSegment[] => {\n const left = segments[boundaryIndex];\n const right = segments[boundaryIndex + 1];\n if (!(left && right)) {\n return segments;\n }\n\n const pairTotal = sanitizeValue(left.value) + sanitizeValue(right.value);\n const clampedMin = Math.max(0, Math.min(minValue, pairTotal / 2));\n const nextLeft = clamp(\n sanitizeValue(left.value) + deltaValue,\n clampedMin,\n pairTotal - clampedMin,\n );\n const nextRight = pairTotal - nextLeft;\n\n return segments.map((segment, index) => {\n if (index === boundaryIndex) {\n return { ...segment, value: roundValue(nextLeft) };\n }\n if (index === boundaryIndex + 1) {\n return { ...segment, value: roundValue(nextRight) };\n }\n return segment;\n });\n};\n\n/** Removes a segment and redistributes its weight proportionally to the rest. */\nexport const removeDistributionSegment = (\n segments: DistributionBarSegment[],\n segmentId: string,\n): DistributionBarSegment[] => {\n if (segments.length <= 1) {\n return segments;\n }\n\n const removed = segments.find((segment) => segment.id === segmentId);\n if (!removed) {\n return segments;\n }\n\n const remaining = segments.filter((segment) => segment.id !== segmentId);\n const removedValue = sanitizeValue(removed.value);\n const remainingTotal = getDistributionTotal(remaining);\n if (remainingTotal <= 0) {\n const equalValue = removedValue / remaining.length;\n return remaining.map((segment) => ({\n ...segment,\n value: roundValue(equalValue),\n }));\n }\n\n let assignedValue = 0;\n const originalTotal = getDistributionTotal(segments);\n return remaining.map((segment, index) => {\n if (index === remaining.length - 1) {\n return { ...segment, value: roundValue(originalTotal - assignedValue) };\n }\n\n const nextValue = roundValue(\n sanitizeValue(segment.value) + (removedValue * sanitizeValue(segment.value)) / remainingTotal,\n );\n assignedValue += nextValue;\n return { ...segment, value: nextValue };\n });\n};\n\n/** Updates non-weight segment metadata such as label or color. */\nexport const updateDistributionSegment = (\n segments: DistributionBarSegment[],\n segmentId: string,\n update: DistributionBarSegmentUpdate,\n): DistributionBarSegment[] =>\n segments.map((segment) => (segment.id === segmentId ? { ...segment, ...update } : segment));\n","import { joinClassNames } from \"@patternmode/system\";\nimport { domMax, LazyMotion, m } from \"motion/react\";\nimport type { PanInfo } from \"motion/react\";\nimport type { CSSProperties, HTMLAttributes, KeyboardEvent } from \"react\";\nimport { useRef } from \"react\";\nimport {\n getDistributionBoundaryPercent,\n getDistributionTotal,\n moveDistributionBoundary,\n} from \"./distribution-bar-math\";\nimport type { DistributionBarSegment } from \"./distribution-bar-math\";\n\nexport interface DistributionDisplayProps extends Omit<\n HTMLAttributes<HTMLElement>,\n \"role\" | \"onSelect\"\n> {\n /** Label used in summary legends for assigned segment weight. */\n assignedLabel?: string;\n /** Label used when `emptyValue` contributes unassigned weight. */\n emptyLabel?: string;\n /**\n * Extra unassigned weight included in derived percentage calculations.\n *\n * Default `0`.\n */\n emptyValue?: number;\n /**\n * Legend style for the read-only display.\n *\n * Default `\"segments\"`.\n */\n legend?: \"segments\" | \"summary\" | false;\n /**\n * When provided, each segment renders as a button and selecting one\n * invokes this callback. Pair with `selectedSegmentId` to mark a segment\n * as selected (renders a ring). Read-only by default.\n */\n onSegmentSelect?: (segment: DistributionBarSegment) => void;\n segments: DistributionBarSegment[];\n /** Id of the selected segment — renders a ring on that segment. */\n selectedSegmentId?: string;\n}\n\nexport interface DistributionBarProps extends Omit<\n HTMLAttributes<HTMLFieldSetElement>,\n \"onChange\"\n> {\n /**\n * Show the per-segment legend below the bar, or hide it.\n *\n * Default `\"segments\"`.\n */\n legend?: \"segments\" | false;\n /**\n * Minimum weight each side of a dragged boundary must retain.\n *\n * Default `4`.\n */\n minValue?: number;\n /** Receives the full next segment list after drag or keyboard boundary moves. */\n onChange?: (segments: DistributionBarSegment[]) => void;\n /** Weighted segments; displayed percentages are derived from their total. */\n segments: DistributionBarSegment[];\n /**\n * Keyboard adjustment amount for boundary handles.\n *\n * Default `1`.\n */\n step?: number;\n}\n\ninterface DistributionSegmentsProps {\n emptyValue?: number;\n onSegmentSelect?: (segment: DistributionBarSegment) => void;\n segments: DistributionBarSegment[];\n selectedSegmentId?: string;\n total: number;\n}\n\ninterface DistributionSegmentLegendProps {\n emptyLabel?: string;\n emptyValue?: number;\n segments: DistributionBarSegment[];\n total: number;\n}\n\ninterface DistributionSummaryLegendProps {\n assignedLabel: string;\n emptyLabel: string;\n emptyValue: number;\n total: number;\n}\n\ninterface DistributionBarHandleProps {\n \"aria-label\": string;\n boundaryPercent: number;\n onDrag: (info: PanInfo) => void;\n onDragEnd: (info: PanInfo) => void;\n onDragStart: () => void;\n onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;\n}\n\ntype DistributionSegmentStyle = CSSProperties &\n Partial<Record<`--${string}`, number | string | undefined>>;\n\nconst getRenderableDistributionValue = (value: number): number =>\n Number.isFinite(value) ? Math.max(0, value) : 0;\n\nconst getDerivedDistributionPercentage = (value: number, total: number): number => {\n if (!(total > 0 && Number.isFinite(value))) {\n return 0;\n }\n\n return Math.round((Math.max(0, value) / total) * 100);\n};\n\nconst getDistributionDisplayTotal = (\n segments: DistributionBarSegment[],\n emptyValue: number,\n): number => getDistributionTotal(segments) + getRenderableDistributionValue(emptyValue);\n\nconst getDistributionDisplayAccessibleLabel = (\n segments: DistributionBarSegment[],\n emptyValue: number,\n emptyLabel: string,\n total: number,\n): string => {\n const segmentLabels = segments.map(\n (segment) =>\n `${segment.label ?? segment.id} ${getDerivedDistributionPercentage(segment.value, total)}%`,\n );\n if (emptyValue > 0) {\n segmentLabels.push(`${emptyLabel} ${getDerivedDistributionPercentage(emptyValue, total)}%`);\n }\n\n return segmentLabels.join(\", \");\n};\n\nconst DistributionSegments = ({\n emptyValue = 0,\n onSegmentSelect,\n segments,\n selectedSegmentId,\n total,\n}: DistributionSegmentsProps) => (\n <div className=\"patternmode-distribution-bar__segments\">\n {segments.map((segment) => {\n const segmentStyle = {\n \"--patternmode-distribution-segment-color\": segment.color,\n width:\n total > 0 ? `${(getRenderableDistributionValue(segment.value) / total) * 100}%` : \"0%\",\n } satisfies DistributionSegmentStyle;\n const isSelected = selectedSegmentId === segment.id;\n\n if (onSegmentSelect) {\n return (\n <button\n aria-label={`${segment.label ?? segment.id} ${getDerivedDistributionPercentage(segment.value, total)}%`}\n aria-pressed={isSelected}\n className=\"patternmode-distribution-bar__segment\"\n data-selected={isSelected ? \"true\" : undefined}\n key={segment.id}\n onClick={() => {\n onSegmentSelect(segment);\n }}\n style={segmentStyle}\n type=\"button\"\n />\n );\n }\n\n return (\n <div\n aria-hidden=\"true\"\n className=\"patternmode-distribution-bar__segment\"\n data-selected={isSelected ? \"true\" : undefined}\n key={segment.id}\n style={segmentStyle}\n />\n );\n })}\n {emptyValue > 0 ? (\n <div\n aria-hidden=\"true\"\n className=\"patternmode-distribution-bar__segment patternmode-distribution-bar__segment--empty\"\n style={{\n width:\n total > 0 ? `${(getRenderableDistributionValue(emptyValue) / total) * 100}%` : \"0%\",\n }}\n />\n ) : null}\n </div>\n);\n\nconst DistributionSegmentLegend = ({\n emptyLabel,\n emptyValue = 0,\n segments,\n total,\n}: DistributionSegmentLegendProps) => (\n <div className=\"patternmode-distribution-bar__legend\">\n {segments.map((segment) => {\n const segmentStyle = {\n \"--patternmode-distribution-segment-color\": segment.color,\n backgroundColor: undefined,\n } satisfies DistributionSegmentStyle;\n\n return (\n <span key={segment.id}>\n <span\n aria-hidden=\"true\"\n className=\"patternmode-distribution-bar__swatch\"\n style={segmentStyle}\n />\n {segment.label ?? segment.id} {getDerivedDistributionPercentage(segment.value, total)}%\n </span>\n );\n })}\n {emptyValue > 0 && emptyLabel !== undefined && emptyLabel !== \"\" ? (\n <span>\n <span\n aria-hidden=\"true\"\n className=\"patternmode-distribution-bar__swatch patternmode-distribution-bar__swatch--empty\"\n />\n {emptyLabel} {getDerivedDistributionPercentage(emptyValue, total)}%\n </span>\n ) : null}\n </div>\n);\n\nconst DistributionSummaryLegend = ({\n assignedLabel,\n emptyLabel,\n emptyValue,\n total,\n}: DistributionSummaryLegendProps) => {\n const emptyPercentage = getDerivedDistributionPercentage(emptyValue, total);\n\n return (\n <div className=\"patternmode-distribution-bar__legend\">\n <span>\n {Math.max(0, 100 - emptyPercentage)}% {assignedLabel}\n </span>\n {emptyValue > 0 ? (\n <span>\n {emptyPercentage}% {emptyLabel}\n </span>\n ) : null}\n </div>\n );\n};\n\nconst DistributionBarHandle = ({\n \"aria-label\": ariaLabel,\n boundaryPercent,\n onDrag,\n onDragEnd,\n onDragStart,\n onKeyDown,\n}: DistributionBarHandleProps) => (\n <LazyMotion features={domMax}>\n <m.button\n aria-label={ariaLabel}\n className=\"patternmode-distribution-bar__handle\"\n drag=\"x\"\n dragElastic={0}\n dragMomentum={false}\n dragSnapToOrigin\n onDrag={(_event, info) => {\n onDrag(info);\n }}\n onDragEnd={(_event, info) => {\n onDragEnd(info);\n }}\n onDragStart={onDragStart}\n onKeyDown={onKeyDown}\n style={{ left: `calc(${boundaryPercent}% - 1.375rem)` }}\n transformTemplate={() => \"none\"}\n type=\"button\"\n />\n </LazyMotion>\n);\n\nexport const DistributionDisplay = ({\n \"aria-label\": ariaLabel,\n assignedLabel = \"assigned\",\n className,\n emptyLabel = \"unassigned\",\n emptyValue = 0,\n legend = \"segments\",\n onSegmentSelect,\n segments,\n selectedSegmentId,\n ...props\n}: DistributionDisplayProps) => {\n const total = getDistributionDisplayTotal(segments, emptyValue);\n const interactive = Boolean(onSegmentSelect);\n const accessibleLabel =\n ariaLabel ?? getDistributionDisplayAccessibleLabel(segments, emptyValue, emptyLabel, total);\n\n const content = (\n <>\n <div className=\"patternmode-distribution-bar__track\">\n <DistributionSegments\n emptyValue={emptyValue}\n onSegmentSelect={onSegmentSelect}\n segments={segments}\n selectedSegmentId={selectedSegmentId}\n total={total}\n />\n </div>\n {legend === \"segments\" ? (\n <DistributionSegmentLegend\n emptyLabel={emptyLabel}\n emptyValue={emptyValue}\n segments={segments}\n total={total}\n />\n ) : null}\n {legend === \"summary\" ? (\n <DistributionSummaryLegend\n assignedLabel={assignedLabel}\n emptyLabel={emptyLabel}\n emptyValue={emptyValue}\n total={total}\n />\n ) : null}\n </>\n );\n const sharedClassName = joinClassNames(\"patternmode-distribution-display\", className);\n\n return interactive ? (\n <fieldset\n {...props}\n aria-label={accessibleLabel}\n className={sharedClassName}\n data-slot=\"distribution-display\"\n >\n {content}\n </fieldset>\n ) : (\n <figure\n {...props}\n aria-label={accessibleLabel}\n className={sharedClassName}\n data-slot=\"distribution-display\"\n >\n {content}\n </figure>\n );\n};\n\nexport const DistributionBar = ({\n \"aria-label\": ariaLabel,\n className,\n legend = \"segments\",\n minValue = 4,\n onChange,\n segments,\n step = 1,\n ...props\n}: DistributionBarProps) => {\n const trackRef = useRef<HTMLDivElement>(null);\n const dragStartSegmentsRef = useRef<DistributionBarSegment[] | null>(null);\n const total = getDistributionTotal(segments);\n\n const moveBoundary = (boundaryIndex: number, deltaValue: number, sourceSegments = segments) => {\n onChange?.(moveDistributionBoundary(sourceSegments, boundaryIndex, deltaValue, minValue));\n };\n\n const handleDragStart = () => {\n dragStartSegmentsRef.current = segments;\n };\n\n const handleDrag = (boundaryIndex: number, info: PanInfo) => {\n const sourceSegments = dragStartSegmentsRef.current ?? segments;\n const sourceTotal = getDistributionTotal(sourceSegments);\n const trackWidth = trackRef.current?.getBoundingClientRect().width ?? 0;\n if (!(trackWidth > 0 && sourceTotal > 0)) {\n return;\n }\n\n moveBoundary(boundaryIndex, (info.offset.x / trackWidth) * sourceTotal, sourceSegments);\n };\n\n const handleDragEnd = (boundaryIndex: number, info: PanInfo) => {\n handleDrag(boundaryIndex, info);\n dragStartSegmentsRef.current = null;\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>, boundaryIndex: number) => {\n if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n moveBoundary(boundaryIndex, -step);\n }\n if (event.key === \"ArrowRight\") {\n event.preventDefault();\n moveBoundary(boundaryIndex, step);\n }\n };\n\n return (\n <fieldset\n {...props}\n aria-label={ariaLabel}\n className={joinClassNames(\"patternmode-distribution-bar\", className)}\n data-slot=\"distribution-bar\"\n >\n <div className=\"patternmode-distribution-bar__track\" ref={trackRef}>\n <DistributionSegments segments={segments} total={total} />\n {segments.slice(0, -1).map((segment, boundaryIndex) => {\n const nextSegment = segments[boundaryIndex + 1];\n const boundaryPercent = getDistributionBoundaryPercent(segments, boundaryIndex);\n const label = `Adjust ${segment.label ?? segment.id} and ${\n nextSegment?.label ?? nextSegment?.id\n } distribution`;\n return (\n <DistributionBarHandle\n aria-label={label}\n boundaryPercent={boundaryPercent}\n key={`${segment.id}-${nextSegment?.id ?? \"end\"}`}\n onDrag={(info) => {\n handleDrag(boundaryIndex, info);\n }}\n onDragEnd={(info) => {\n handleDragEnd(boundaryIndex, info);\n }}\n onDragStart={handleDragStart}\n onKeyDown={(event) => {\n handleKeyDown(event, boundaryIndex);\n }}\n />\n );\n })}\n </div>\n {legend === \"segments\" ? (\n <DistributionSegmentLegend segments={segments} total={total} />\n ) : null}\n </fieldset>\n );\n};\n","import type { SwatchColorStop } from \"./swatch-types\";\n\nexport interface SwatchAtmosphereOptions {\n /** 0 = diffuse, wide wash · 1 = dense, tight pools. Default 0.5. */\n density?: number;\n /** -1 = grounds (pools sink) · 1 = lifts (pools rise). Default 0. */\n gravity?: number;\n}\n\n/**\n * Per-pool layout for the atmosphere fill:\n * `[focal x%, focal y%, base alpha (0-255), radius delta %, gravity sign]`.\n *\n * The first three entries reproduce the original three-pool blend identity\n * gradient exactly; further entries extend the pattern for palettes with\n * more than three colors.\n */\nconst POOLS: readonly (readonly [number, number, number, number, number])[] = [\n [30, 42, 0xcc, 0, -1],\n [72, 58, 0x99, -5, 1],\n [45, 65, 0x77, 8, -1],\n [62, 32, 0x66, 3, 1],\n [24, 72, 0x55, -3, -1],\n [80, 40, 0x44, 6, 1],\n];\n\n/**\n * Build a soft, layered radial \"atmosphere\" background from color stops — a\n * stack of overlapping elliptical pools rather than a flat or linear fill.\n * Density controls how far each pool reaches; gravity shifts the pools\n * vertically. Returns `undefined` when there are no colors.\n */\n\nconst clamp = (value: number, min: number, max: number): number =>\n Math.min(max, Math.max(min, value));\n\nconst normalizeHex = (color: string): string | null => {\n const value = color.trim().replace(/^#/u, \"\");\n if (/^[\\da-f]{3}$/iu.test(value)) {\n return `${value[0]}${value[0]}${value[1]}${value[1]}${value[2]}${value[2]}`;\n }\n if (/^[\\da-f]{6}$/iu.test(value)) {\n return value;\n }\n return null;\n};\n\nconst withAlpha = (color: string, alpha: number): string => {\n const hex = normalizeHex(color);\n if (hex !== null) {\n const suffix = Math.round(clamp(alpha, 0, 255))\n .toString(16)\n .padStart(2, \"0\");\n return `#${hex}${suffix}`;\n }\n const percent = Math.round((clamp(alpha, 0, 255) / 255) * 100);\n return `color-mix(in srgb, ${color} ${percent}%, transparent)`;\n};\n\nexport const getSwatchAtmosphereBackground = (\n colors: SwatchColorStop[] | undefined,\n options: SwatchAtmosphereOptions = {},\n): string | undefined => {\n if (colors === undefined || colors.length === 0) {\n return undefined;\n }\n\n const density = clamp(options.density ?? 0.5, 0, 1);\n const gravity = clamp(options.gravity ?? 0, -1, 1);\n const gy = Math.round(gravity * 8);\n const reach = Math.round(50 + (1 - density) * 15);\n\n const layers = colors.map((stop, index) => {\n const color = typeof stop === \"string\" ? stop : stop.color;\n const pool = POOLS[index % POOLS.length];\n if (pool === undefined) {\n throw new Error(\"Expected atmosphere pool to exist.\");\n }\n const [x, y, baseAlpha, radiusDelta, gravitySign] = pool;\n // Each wrap past the palette length fades the extra pools further back.\n const cycle = Math.floor(index / POOLS.length);\n const alpha = Math.max(0x22, baseAlpha - cycle * 0x22);\n const focalY = clamp(y + gravitySign * gy, 0, 100);\n const radius = Math.max(8, reach + radiusDelta);\n return `radial-gradient(ellipse at ${x}% ${focalY}%, ${withAlpha(\n color,\n alpha,\n )} 0%, transparent ${radius}%)`;\n });\n\n return layers.join(\", \");\n};\n","import type { SwatchColorStop } from \"./swatch-types\";\n\nconst normalizeHex = (hex: string): string | null => {\n const value = hex.trim().replace(/^#/u, \"\");\n if (/^[\\da-f]{3}$/iu.test(value)) {\n return `${value[0]}${value[0]}${value[1]}${value[1]}${value[2]}${value[2]}`;\n }\n if (/^[\\da-f]{6}$/iu.test(value)) {\n return value;\n }\n return null;\n};\n\nconst toColorStop = (stop: SwatchColorStop): { color: string; ratio?: number } =>\n typeof stop === \"string\" ? { color: stop } : stop;\n\nconst getRatioWeight = (ratio: number | undefined): number => {\n if (ratio === undefined) {\n return 1;\n }\n\n return Number.isFinite(ratio) ? Math.max(0, ratio) : 0;\n};\n\nconst formatPercent = (value: number): string =>\n `${Number.isInteger(value) ? value : Number(value.toFixed(2))}%`;\n\nexport const isLightColor = (color: string): boolean => {\n const normalized = normalizeHex(color);\n if (normalized === null) {\n return false;\n }\n\n const red = Number.parseInt(normalized.slice(0, 2), 16);\n const green = Number.parseInt(normalized.slice(2, 4), 16);\n const blue = Number.parseInt(normalized.slice(4, 6), 16);\n const luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255;\n return luminance > 0.62;\n};\n\nexport const getSwatchColorsBackground = (\n colors: SwatchColorStop[] | undefined,\n blend: \"smooth\" | \"step\" = \"step\",\n): string | undefined => {\n if (colors === undefined || colors.length === 0) {\n return undefined;\n }\n\n const [singleColor] = colors;\n if (colors.length === 1 && singleColor !== undefined) {\n return toColorStop(singleColor).color;\n }\n\n const stops = colors.map(toColorStop);\n\n /* Smooth blend: one position per stop, interpolated in OKLab so ramps\n read as a continuous region of color rather than discrete bands. */\n if (blend === \"smooth\") {\n const parts = stops.map((stop, index) => {\n const position = stops.length === 1 ? 0 : (index / (stops.length - 1)) * 100;\n return `${stop.color} ${formatPercent(position)}`;\n });\n return `linear-gradient(in oklab 90deg, ${parts.join(\", \")})`;\n }\n\n const weights = stops.map((stop) => getRatioWeight(stop.ratio));\n const rawTotal = weights.reduce((sum, ratio) => sum + ratio, 0);\n const useEqualWeights = rawTotal <= 0;\n const total = useEqualWeights ? stops.length : rawTotal;\n let cursor = 0;\n const parts = stops.map((stop, index) => {\n const ratio = useEqualWeights ? 1 : (weights[index] ?? 0);\n const start = cursor;\n const end = index === stops.length - 1 ? 100 : cursor + (ratio / total) * 100;\n cursor = end;\n return `${stop.color} ${formatPercent(start)} ${formatPercent(end)}`;\n });\n\n return `linear-gradient(90deg, ${parts.join(\", \")})`;\n};\n","import { PATTERNMODE_SIZE_VALUES, PATTERNMODE_SIZES } from \"@patternmode/system\";\nimport type { ObjectFit } from \"@patternmode/system\";\nimport type { ComponentType, HTMLAttributes, ReactElement, ReactNode, SVGProps } from \"react\";\n\nexport const SWATCH_SIZES = [...PATTERNMODE_SIZES, \"4xl\", \"5xl\", \"6xl\", \"7xl\"] as const;\n\nexport const SWATCH_SIZE_VALUES = {\n ...PATTERNMODE_SIZE_VALUES,\n \"4xl\": \"4.5rem\",\n \"5xl\": \"5rem\",\n \"6xl\": \"5.5rem\",\n \"7xl\": \"6rem\",\n} as const satisfies Record<SwatchSize, string>;\n\nexport const SWATCH_SHAPES = [\"circle\", \"pill\", \"square\", \"block\"] as const;\n\nexport const SWATCH_TEXTURES = [\"atmosphere\"] as const;\n\nexport type SwatchSize = (typeof SWATCH_SIZES)[number];\nexport type SwatchShape = (typeof SWATCH_SHAPES)[number];\nexport type SwatchTexture = (typeof SWATCH_TEXTURES)[number];\nexport type SwatchColorStop = string | { color: string; ratio?: number };\ntype SwatchIcon = ComponentType<SVGProps<SVGSVGElement>>;\n\nexport const getSwatchSizeVariableStyle = (\n size: SwatchSize,\n variableName = \"--patternmode-swatch-size\",\n): Record<string, string> => ({\n [variableName]: SWATCH_SIZE_VALUES[size],\n});\n\n/**\n * Visual and behavioural props shared by every Swatch rendering mode. These\n * map deterministically to the fill, scrim, shape, and size treatment\n * regardless of whether the swatch renders its own wrapper or an `asChild`\n * element.\n */\nexport interface SwatchSharedProps extends HTMLAttributes<HTMLElement> {\n background?: string;\n color?: string;\n /**\n * How multiple `colors` blend: `\"step\"` renders hard bands, `\"smooth\"`\n * renders a continuous OKLab-interpolated ramp. Ignored by\n * `texture=\"atmosphere\"`.\n *\n * Default `\"step\"`.\n */\n blend?: \"smooth\" | \"step\";\n colors?: SwatchColorStop[];\n /**\n * Atmosphere density (0 = diffuse wash, 1 = dense pools). Only applies when\n * `texture=\"atmosphere\"`.\n *\n * Default `0.5`.\n */\n density?: number;\n /**\n * Render a precise, flat color block: no top-to-bottom scrim gradient and\n * no drop shadow. Use for data visualisation where the fill must read as\n * the exact color value.\n *\n * Default `false`.\n */\n flat?: boolean;\n /**\n * Atmosphere gravity (-1 = pools sink, 1 = pools rise). Only applies when\n * `texture=\"atmosphere\"`.\n *\n * Default `0`.\n */\n gravity?: number;\n icon?: SwatchIcon;\n isLight?: boolean;\n /**\n * Object-fit mode applied to media children through CSS variables.\n *\n * Default `\"cover\"`.\n */\n objectFit?: ObjectFit;\n /**\n * Object-position value applied to media children through CSS variables.\n *\n * Default `\"center\"`.\n */\n objectPosition?: string;\n raised?: boolean;\n /**\n * Shows selected state and optional icon overlay.\n *\n * Default `false`.\n */\n selected?: boolean;\n /**\n * Rendered swatch shape.\n *\n * Default `\"circle\"`.\n */\n shape?: SwatchShape;\n /**\n * Whether selected swatches render their ring treatment.\n *\n * Default `true`.\n */\n showRing?: boolean;\n /**\n * Size token used for the swatch dimensions.\n *\n * Default `\"base\"`.\n */\n size?: SwatchSize;\n /**\n * Render supplied colors as a soft, layered radial atmosphere — overlapping\n * color pools — instead of a ratio-encoded weighted palette. Pair with\n * `density` and `gravity` to shape the pools.\n */\n texture?: SwatchTexture;\n /**\n * Marks the swatch as unavailable.\n *\n * Default `false`.\n */\n unavailable?: boolean;\n}\n\n/**\n * Default Swatch props: the swatch renders its own wrapper element\n * (`<figure>`, or `<fieldset>` when `onRemove` is set).\n */\nexport interface SwatchDefaultProps extends SwatchSharedProps {\n /**\n * Render the swatch styling onto a provided child element instead of an\n * own wrapper. See {@link SwatchAsChildProps}.\n *\n * Default `false`.\n */\n asChild?: false;\n /**\n * Optional media rendered inside the swatch frame.\n *\n * Swatch does not optimize image elements itself. Next.js consumers can pass\n * their own `next/image` `Image` component here and use `objectFit` /\n * `objectPosition` to align it with the swatch shape.\n */\n children?: ReactNode;\n /** Renders a remove affordance and calls this after stopping propagation. */\n onRemove?: () => void;\n /** Accessible label for the remove affordance. Defaults to the swatch label. */\n removeLabel?: string;\n}\n\n/**\n * `asChild` Swatch props: the swatch merges its className, style (size/fill\n * CSS variables), data attributes, and other props onto the single React\n * element passed as `children`, rendering through it (Radix Slot pattern)\n * instead of emitting its own wrapper. Use this when the swatch must *be* an\n * interactive element, such as a `<button>` cell in a color matrix.\n *\n * `onRemove` is unsupported in this mode — its remove affordance cannot be\n * composed into an arbitrary slotted element. Wrap a default Swatch instead\n * when a remove control is required.\n */\nexport interface SwatchAsChildProps extends SwatchSharedProps {\n asChild: true;\n /** The single element the swatch styling is merged onto and rendered through. */\n children: ReactElement;\n onRemove?: never;\n removeLabel?: never;\n}\n\nexport type SwatchProps = SwatchDefaultProps | SwatchAsChildProps;\n","import { getObjectSizingStyle, joinClassNames } from \"@patternmode/system\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport type { CSSProperties, HTMLAttributes, MouseEvent, ReactNode } from \"react\";\n\nimport { getSwatchAtmosphereBackground } from \"./swatch-atmosphere\";\nimport { getSwatchColorsBackground, isLightColor } from \"./swatch-colors\";\nimport { getSwatchSizeVariableStyle } from \"./swatch-types\";\nimport type { SwatchProps } from \"./swatch-types\";\n\ntype SwatchRootStyle = CSSProperties & Record<\"--patternmode-swatch-fill\", string | undefined>;\n\ninterface SwatchContentProps {\n children: SwatchProps[\"children\"];\n flat: boolean;\n Icon: SwatchProps[\"icon\"];\n mediaStyle: CSSProperties;\n selected: boolean;\n unavailable: boolean;\n}\n\ninterface RemovableSwatchProps {\n ariaLabel: string | undefined;\n children: ReactNode;\n className: string | undefined;\n dataProps: ReturnType<typeof getSwatchDataProps>;\n onRemove: () => void;\n removeLabel: string;\n rootStyle: SwatchRootStyle;\n props: HTMLAttributes<HTMLElement>;\n}\n\nconst SwatchContent = ({\n children,\n flat,\n Icon,\n mediaStyle,\n selected,\n unavailable,\n}: SwatchContentProps) => (\n <>\n <span aria-hidden=\"true\" className=\"patternmode-swatch__fill\" />\n {children !== undefined && children !== null ? (\n <span className=\"patternmode-swatch__media\" style={mediaStyle}>\n {children}\n </span>\n ) : null}\n {flat ? null : <span aria-hidden=\"true\" className=\"patternmode-swatch__scrim\" />}\n {selected && Icon ? (\n <span className=\"patternmode-swatch__icon\">\n <Icon aria-hidden=\"true\" focusable=\"false\" />\n </span>\n ) : null}\n {unavailable ? <span aria-hidden=\"true\" className=\"patternmode-swatch__slash\" /> : null}\n </>\n);\n\nconst getSwatchFill = ({\n background,\n blend,\n color,\n colors,\n density,\n gravity,\n texture,\n}: Pick<SwatchProps, \"background\" | \"blend\" | \"color\" | \"colors\" | \"density\" | \"gravity\" | \"texture\">) => {\n const colorsBackground = getSwatchColorsBackground(colors, blend);\n const atmosphereBackground =\n texture === \"atmosphere\"\n ? getSwatchAtmosphereBackground(colors, { density, gravity })\n : undefined;\n\n return {\n colorsBackground,\n fill: background ?? atmosphereBackground ?? colorsBackground ?? color,\n };\n};\n\nconst getSwatchTone = ({\n background,\n color,\n colorsBackground,\n isLight,\n}: {\n background: SwatchProps[\"background\"];\n color: SwatchProps[\"color\"];\n colorsBackground: string | undefined;\n isLight: SwatchProps[\"isLight\"];\n}) => {\n if (isLight !== undefined) {\n return isLight ? \"light\" : \"dark\";\n }\n\n const hasColor = color !== undefined && color !== \"\";\n const hasBackground = background !== undefined && background !== \"\";\n const hasColorsBackground = colorsBackground !== undefined && colorsBackground !== \"\";\n\n if (hasColor && !hasBackground && !hasColorsBackground && isLightColor(color)) {\n return \"light\";\n }\n\n return \"dark\";\n};\n\nconst getSwatchDataProps = ({\n flat,\n lightTone,\n raised,\n selected,\n shape,\n showRing,\n size,\n unavailable,\n}: {\n flat: boolean;\n lightTone: \"dark\" | \"light\";\n raised: boolean;\n selected: boolean;\n shape: SwatchProps[\"shape\"];\n showRing: boolean;\n size: SwatchProps[\"size\"];\n unavailable: boolean;\n}) => ({\n \"data-flat\": flat ? \"true\" : undefined,\n \"data-raised\": raised ? \"true\" : undefined,\n \"data-selected\": selected ? \"true\" : undefined,\n \"data-shape\": shape,\n \"data-show-ring\": showRing ? \"true\" : \"false\",\n \"data-size\": size,\n \"data-slot\": \"swatch\",\n \"data-tone\": lightTone,\n \"data-unavailable\": unavailable ? \"true\" : undefined,\n});\n\nconst RemovableSwatch = ({\n ariaLabel,\n children,\n className,\n dataProps,\n onRemove,\n removeLabel,\n rootStyle,\n props,\n}: RemovableSwatchProps) => {\n const handleRemove = (event: MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n onRemove();\n };\n\n return (\n <fieldset\n {...props}\n {...dataProps}\n aria-label={ariaLabel}\n className={joinClassNames(\"patternmode-swatch\", className)}\n style={rootStyle}\n >\n {children}\n <button\n aria-label={removeLabel}\n className=\"patternmode-swatch__remove\"\n onClick={handleRemove}\n type=\"button\"\n >\n <svg aria-hidden=\"true\" fill=\"none\" viewBox=\"0 0 20 20\">\n <path d=\"M5.5 5.5l9 9M14.5 5.5l-9 9\" />\n </svg>\n </button>\n </fieldset>\n );\n};\n\nexport const Swatch = ({\n \"aria-label\": ariaLabel,\n asChild = false,\n background,\n blend = \"step\",\n children,\n className,\n color,\n colors,\n density,\n flat = false,\n gravity,\n icon: Icon,\n isLight,\n objectFit,\n objectPosition,\n onRemove,\n raised = false,\n removeLabel,\n role: _role,\n selected = false,\n shape = \"circle\",\n showRing = true,\n size = \"base\",\n style,\n texture,\n unavailable = false,\n ...props\n}: SwatchProps) => {\n const { colorsBackground, fill } = getSwatchFill({\n background,\n blend,\n color,\n colors,\n density,\n gravity,\n texture,\n });\n const lightTone = getSwatchTone({\n background,\n color,\n colorsBackground,\n isLight,\n });\n const resolvedRemoveLabel =\n removeLabel ?? (ariaLabel !== undefined && ariaLabel !== \"\" ? `Remove ${ariaLabel}` : \"Remove\");\n\n const rootStyle: SwatchRootStyle = {\n ...getSwatchSizeVariableStyle(size),\n \"--patternmode-swatch-fill\": fill,\n ...style,\n };\n const mediaStyle: CSSProperties = getObjectSizingStyle({\n fit: objectFit,\n position: objectPosition,\n });\n const dataProps = getSwatchDataProps({\n flat,\n lightTone,\n raised,\n selected,\n shape,\n showRing,\n size,\n unavailable,\n });\n\n const swatchContent = (\n <SwatchContent\n flat={flat}\n Icon={Icon}\n mediaStyle={mediaStyle}\n selected={selected}\n unavailable={unavailable}\n >\n {asChild ? undefined : children}\n </SwatchContent>\n );\n\n if (asChild) {\n return (\n <Slot\n {...props}\n {...dataProps}\n aria-label={ariaLabel}\n className={joinClassNames(\"patternmode-swatch\", className)}\n style={rootStyle}\n >\n {swatchContent}\n <Slottable>{children}</Slottable>\n </Slot>\n );\n }\n\n if (onRemove !== undefined) {\n return (\n <RemovableSwatch\n ariaLabel={ariaLabel}\n className={className}\n dataProps={dataProps}\n onRemove={onRemove}\n props={props}\n removeLabel={resolvedRemoveLabel}\n rootStyle={rootStyle}\n >\n {swatchContent}\n </RemovableSwatch>\n );\n }\n\n return (\n <figure\n {...props}\n {...dataProps}\n aria-label={ariaLabel}\n className={joinClassNames(\"patternmode-swatch\", className)}\n style={rootStyle}\n >\n {swatchContent}\n </figure>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":["clamp"],"sources":["../src/DistributionBar/distribution-bar-math.ts","../src/DistributionBar/distribution-bar-root.tsx","../src/Swatch/swatch-atmosphere.ts","../src/Swatch/swatch-colors.ts","../src/Swatch/swatch-types.ts","../src/Swatch/swatch-root.tsx"],"sourcesContent":["import type { WeightedColorSegment } from \"@patternmode/system\";\n\n/**\n * Weighted segment used by DistributionBar and DistributionDisplay. Extends the\n * shared {@link WeightedColorSegment} with a required stable `id` for editing.\n */\nexport interface DistributionBarSegment extends WeightedColorSegment {\n id: string;\n}\n\n/** Segment metadata update; weight changes happen through boundary movement. */\nexport type DistributionBarSegmentUpdate = Partial<Omit<DistributionBarSegment, \"value\">> & {\n value?: never;\n};\n\nconst sanitizeValue = (value: number): number => (Number.isFinite(value) ? Math.max(0, value) : 0);\n\nconst clamp = (value: number, min: number, max: number): number =>\n Math.min(Math.max(value, min), max);\n\nconst roundValue = (value: number): number => Number(value.toFixed(1));\n\n/** Sums sanitized segment weights, treating invalid or negative values as 0. */\nexport const getDistributionTotal = (segments: DistributionBarSegment[]): number =>\n segments.reduce((sum, segment) => sum + sanitizeValue(segment.value), 0);\n\n/** Returns the percentage position of the boundary after `boundaryIndex`. */\nexport const getDistributionBoundaryPercent = (\n segments: DistributionBarSegment[],\n boundaryIndex: number,\n): number => {\n const total = getDistributionTotal(segments);\n if (total <= 0) {\n return 0;\n }\n\n const boundaryValue = segments\n .slice(0, boundaryIndex + 1)\n .reduce((sum, segment) => sum + sanitizeValue(segment.value), 0);\n return roundValue((boundaryValue / total) * 100);\n};\n\n/**\n * Moves the boundary between two adjacent segments while preserving their sum.\n *\n * `deltaValue` is applied to the left segment and subtracted from the right\n * segment. `minValue` prevents either side of the pair from collapsing below a\n * caller-defined minimum.\n */\nexport const moveDistributionBoundary = (\n segments: DistributionBarSegment[],\n boundaryIndex: number,\n deltaValue: number,\n minValue: number,\n): DistributionBarSegment[] => {\n const left = segments[boundaryIndex];\n const right = segments[boundaryIndex + 1];\n if (!(left && right)) {\n return segments;\n }\n\n const pairTotal = sanitizeValue(left.value) + sanitizeValue(right.value);\n const clampedMin = Math.max(0, Math.min(minValue, pairTotal / 2));\n const nextLeft = clamp(\n sanitizeValue(left.value) + deltaValue,\n clampedMin,\n pairTotal - clampedMin,\n );\n const nextRight = pairTotal - nextLeft;\n\n return segments.map((segment, index) => {\n if (index === boundaryIndex) {\n return { ...segment, value: roundValue(nextLeft) };\n }\n if (index === boundaryIndex + 1) {\n return { ...segment, value: roundValue(nextRight) };\n }\n return segment;\n });\n};\n\n/** Removes a segment and redistributes its weight proportionally to the rest. */\nexport const removeDistributionSegment = (\n segments: DistributionBarSegment[],\n segmentId: string,\n): DistributionBarSegment[] => {\n if (segments.length <= 1) {\n return segments;\n }\n\n const removed = segments.find((segment) => segment.id === segmentId);\n if (!removed) {\n return segments;\n }\n\n const remaining = segments.filter((segment) => segment.id !== segmentId);\n const removedValue = sanitizeValue(removed.value);\n const remainingTotal = getDistributionTotal(remaining);\n if (remainingTotal <= 0) {\n const equalValue = removedValue / remaining.length;\n return remaining.map((segment) => ({\n ...segment,\n value: roundValue(equalValue),\n }));\n }\n\n let assignedValue = 0;\n const originalTotal = getDistributionTotal(segments);\n return remaining.map((segment, index) => {\n if (index === remaining.length - 1) {\n return { ...segment, value: roundValue(originalTotal - assignedValue) };\n }\n\n const nextValue = roundValue(\n sanitizeValue(segment.value) + (removedValue * sanitizeValue(segment.value)) / remainingTotal,\n );\n assignedValue += nextValue;\n return { ...segment, value: nextValue };\n });\n};\n\n/** Updates non-weight segment metadata such as label or color. */\nexport const updateDistributionSegment = (\n segments: DistributionBarSegment[],\n segmentId: string,\n update: DistributionBarSegmentUpdate,\n): DistributionBarSegment[] =>\n segments.map((segment) => (segment.id === segmentId ? { ...segment, ...update } : segment));\n","import { joinClassNames } from \"@patternmode/system\";\nimport { domMax, LazyMotion, m } from \"motion/react\";\nimport type { PanInfo } from \"motion/react\";\nimport type { CSSProperties, HTMLAttributes, KeyboardEvent } from \"react\";\nimport { useRef } from \"react\";\nimport {\n getDistributionBoundaryPercent,\n getDistributionTotal,\n moveDistributionBoundary,\n} from \"./distribution-bar-math\";\nimport type { DistributionBarSegment } from \"./distribution-bar-math\";\n\nexport interface DistributionDisplayProps extends Omit<\n HTMLAttributes<HTMLElement>,\n \"role\" | \"onSelect\"\n> {\n /** Label used in summary legends for assigned segment weight. */\n assignedLabel?: string;\n /** Label used when `emptyValue` contributes unassigned weight. */\n emptyLabel?: string;\n /**\n * Extra unassigned weight included in derived percentage calculations.\n *\n * Default `0`.\n */\n emptyValue?: number;\n /**\n * Legend style for the read-only display.\n *\n * Default `\"segments\"`.\n */\n legend?: \"segments\" | \"summary\" | false;\n /**\n * When provided, each segment renders as a button and selecting one\n * invokes this callback. Pair with `selectedSegmentId` to mark a segment\n * as selected (renders a ring). Read-only by default.\n */\n onSegmentSelect?: (segment: DistributionBarSegment) => void;\n segments: DistributionBarSegment[];\n /** Id of the selected segment — renders a ring on that segment. */\n selectedSegmentId?: string;\n}\n\nexport interface DistributionBarProps extends Omit<\n HTMLAttributes<HTMLFieldSetElement>,\n \"onChange\"\n> {\n /**\n * Show the per-segment legend below the bar, or hide it.\n *\n * Default `\"segments\"`.\n */\n legend?: \"segments\" | false;\n /**\n * Minimum weight each side of a dragged boundary must retain.\n *\n * Default `4`.\n */\n minValue?: number;\n /** Receives the full next segment list after drag or keyboard boundary moves. */\n onChange?: (segments: DistributionBarSegment[]) => void;\n /** Weighted segments; displayed percentages are derived from their total. */\n segments: DistributionBarSegment[];\n /**\n * Keyboard adjustment amount for boundary handles.\n *\n * Default `1`.\n */\n step?: number;\n}\n\ninterface DistributionSegmentsProps {\n emptyValue?: number;\n onSegmentSelect?: (segment: DistributionBarSegment) => void;\n segments: DistributionBarSegment[];\n selectedSegmentId?: string;\n total: number;\n}\n\ninterface DistributionSegmentLegendProps {\n emptyLabel?: string;\n emptyValue?: number;\n segments: DistributionBarSegment[];\n total: number;\n}\n\ninterface DistributionSummaryLegendProps {\n assignedLabel: string;\n emptyLabel: string;\n emptyValue: number;\n total: number;\n}\n\ninterface DistributionBarHandleProps {\n \"aria-label\": string;\n boundaryPercent: number;\n onDrag: (info: PanInfo) => void;\n onDragEnd: (info: PanInfo) => void;\n onDragStart: () => void;\n onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;\n}\n\ntype DistributionSegmentStyle = CSSProperties &\n Partial<Record<`--${string}`, number | string | undefined>>;\n\nconst getRenderableDistributionValue = (value: number): number =>\n Number.isFinite(value) ? Math.max(0, value) : 0;\n\nconst getDerivedDistributionPercentage = (value: number, total: number): number => {\n if (!(total > 0 && Number.isFinite(value))) {\n return 0;\n }\n\n return Math.round((Math.max(0, value) / total) * 100);\n};\n\nconst getDistributionDisplayTotal = (\n segments: DistributionBarSegment[],\n emptyValue: number,\n): number => getDistributionTotal(segments) + getRenderableDistributionValue(emptyValue);\n\nconst getDistributionDisplayAccessibleLabel = (\n segments: DistributionBarSegment[],\n emptyValue: number,\n emptyLabel: string,\n total: number,\n): string => {\n const segmentLabels = segments.map(\n (segment) =>\n `${segment.label ?? segment.id} ${getDerivedDistributionPercentage(segment.value, total)}%`,\n );\n if (emptyValue > 0) {\n segmentLabels.push(`${emptyLabel} ${getDerivedDistributionPercentage(emptyValue, total)}%`);\n }\n\n return segmentLabels.join(\", \");\n};\n\nconst DistributionSegments = ({\n emptyValue = 0,\n onSegmentSelect,\n segments,\n selectedSegmentId,\n total,\n}: DistributionSegmentsProps) => (\n <div className=\"patternmode-distribution-bar__segments\">\n {segments.map((segment) => {\n const segmentStyle = {\n \"--patternmode-distribution-segment-color\": segment.color,\n width:\n total > 0 ? `${(getRenderableDistributionValue(segment.value) / total) * 100}%` : \"0%\",\n } satisfies DistributionSegmentStyle;\n const isSelected = selectedSegmentId === segment.id;\n\n if (onSegmentSelect) {\n return (\n <button\n aria-label={`${segment.label ?? segment.id} ${getDerivedDistributionPercentage(segment.value, total)}%`}\n aria-pressed={isSelected}\n className=\"patternmode-distribution-bar__segment\"\n data-selected={isSelected ? \"true\" : undefined}\n key={segment.id}\n onClick={() => {\n onSegmentSelect(segment);\n }}\n style={segmentStyle}\n type=\"button\"\n />\n );\n }\n\n return (\n <div\n aria-hidden=\"true\"\n className=\"patternmode-distribution-bar__segment\"\n data-selected={isSelected ? \"true\" : undefined}\n key={segment.id}\n style={segmentStyle}\n />\n );\n })}\n {emptyValue > 0 ? (\n <div\n aria-hidden=\"true\"\n className=\"patternmode-distribution-bar__segment patternmode-distribution-bar__segment--empty\"\n style={{\n width:\n total > 0 ? `${(getRenderableDistributionValue(emptyValue) / total) * 100}%` : \"0%\",\n }}\n />\n ) : null}\n </div>\n);\n\nconst DistributionSegmentLegend = ({\n emptyLabel,\n emptyValue = 0,\n segments,\n total,\n}: DistributionSegmentLegendProps) => (\n <div className=\"patternmode-distribution-bar__legend\">\n {segments.map((segment) => {\n const segmentStyle = {\n \"--patternmode-distribution-segment-color\": segment.color,\n backgroundColor: undefined,\n } satisfies DistributionSegmentStyle;\n\n return (\n <span key={segment.id}>\n <span\n aria-hidden=\"true\"\n className=\"patternmode-distribution-bar__swatch\"\n style={segmentStyle}\n />\n {segment.label ?? segment.id} {getDerivedDistributionPercentage(segment.value, total)}%\n </span>\n );\n })}\n {emptyValue > 0 && emptyLabel !== undefined && emptyLabel !== \"\" ? (\n <span>\n <span\n aria-hidden=\"true\"\n className=\"patternmode-distribution-bar__swatch patternmode-distribution-bar__swatch--empty\"\n />\n {emptyLabel} {getDerivedDistributionPercentage(emptyValue, total)}%\n </span>\n ) : null}\n </div>\n);\n\nconst DistributionSummaryLegend = ({\n assignedLabel,\n emptyLabel,\n emptyValue,\n total,\n}: DistributionSummaryLegendProps) => {\n const emptyPercentage = getDerivedDistributionPercentage(emptyValue, total);\n\n return (\n <div className=\"patternmode-distribution-bar__legend\">\n <span>\n {Math.max(0, 100 - emptyPercentage)}% {assignedLabel}\n </span>\n {emptyValue > 0 ? (\n <span>\n {emptyPercentage}% {emptyLabel}\n </span>\n ) : null}\n </div>\n );\n};\n\nconst DistributionBarHandle = ({\n \"aria-label\": ariaLabel,\n boundaryPercent,\n onDrag,\n onDragEnd,\n onDragStart,\n onKeyDown,\n}: DistributionBarHandleProps) => (\n <LazyMotion features={domMax}>\n <m.button\n aria-label={ariaLabel}\n className=\"patternmode-distribution-bar__handle\"\n drag=\"x\"\n dragElastic={0}\n dragMomentum={false}\n dragSnapToOrigin\n onDrag={(_event, info) => {\n onDrag(info);\n }}\n onDragEnd={(_event, info) => {\n onDragEnd(info);\n }}\n onDragStart={onDragStart}\n onKeyDown={onKeyDown}\n style={{ left: `calc(${boundaryPercent}% - 1.375rem)` }}\n transformTemplate={() => \"none\"}\n type=\"button\"\n />\n </LazyMotion>\n);\n\nexport const DistributionDisplay = ({\n \"aria-label\": ariaLabel,\n assignedLabel = \"assigned\",\n className,\n emptyLabel = \"unassigned\",\n emptyValue = 0,\n legend = \"segments\",\n onSegmentSelect,\n segments,\n selectedSegmentId,\n ...props\n}: DistributionDisplayProps) => {\n const total = getDistributionDisplayTotal(segments, emptyValue);\n const interactive = Boolean(onSegmentSelect);\n const accessibleLabel =\n ariaLabel ?? getDistributionDisplayAccessibleLabel(segments, emptyValue, emptyLabel, total);\n\n const content = (\n <>\n <div className=\"patternmode-distribution-bar__track\">\n <DistributionSegments\n emptyValue={emptyValue}\n onSegmentSelect={onSegmentSelect}\n segments={segments}\n selectedSegmentId={selectedSegmentId}\n total={total}\n />\n </div>\n {legend === \"segments\" ? (\n <DistributionSegmentLegend\n emptyLabel={emptyLabel}\n emptyValue={emptyValue}\n segments={segments}\n total={total}\n />\n ) : null}\n {legend === \"summary\" ? (\n <DistributionSummaryLegend\n assignedLabel={assignedLabel}\n emptyLabel={emptyLabel}\n emptyValue={emptyValue}\n total={total}\n />\n ) : null}\n </>\n );\n const sharedClassName = joinClassNames(\"patternmode-distribution-display\", className);\n\n return interactive ? (\n <fieldset\n {...props}\n aria-label={accessibleLabel}\n className={sharedClassName}\n data-slot=\"distribution-display\"\n >\n {content}\n </fieldset>\n ) : (\n <figure\n {...props}\n aria-label={accessibleLabel}\n className={sharedClassName}\n data-slot=\"distribution-display\"\n >\n {content}\n </figure>\n );\n};\n\nexport const DistributionBar = ({\n \"aria-label\": ariaLabel,\n className,\n legend = \"segments\",\n minValue = 4,\n onChange,\n segments,\n step = 1,\n ...props\n}: DistributionBarProps) => {\n const trackRef = useRef<HTMLDivElement>(null);\n const dragStartSegmentsRef = useRef<DistributionBarSegment[] | null>(null);\n const total = getDistributionTotal(segments);\n\n const moveBoundary = (boundaryIndex: number, deltaValue: number, sourceSegments = segments) => {\n onChange?.(moveDistributionBoundary(sourceSegments, boundaryIndex, deltaValue, minValue));\n };\n\n const handleDragStart = () => {\n dragStartSegmentsRef.current = segments;\n };\n\n const handleDrag = (boundaryIndex: number, info: PanInfo) => {\n const sourceSegments = dragStartSegmentsRef.current ?? segments;\n const sourceTotal = getDistributionTotal(sourceSegments);\n const trackWidth = trackRef.current?.getBoundingClientRect().width ?? 0;\n if (!(trackWidth > 0 && sourceTotal > 0)) {\n return;\n }\n\n moveBoundary(boundaryIndex, (info.offset.x / trackWidth) * sourceTotal, sourceSegments);\n };\n\n const handleDragEnd = (boundaryIndex: number, info: PanInfo) => {\n handleDrag(boundaryIndex, info);\n dragStartSegmentsRef.current = null;\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>, boundaryIndex: number) => {\n if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n moveBoundary(boundaryIndex, -step);\n }\n if (event.key === \"ArrowRight\") {\n event.preventDefault();\n moveBoundary(boundaryIndex, step);\n }\n };\n\n return (\n <fieldset\n {...props}\n aria-label={ariaLabel}\n className={joinClassNames(\"patternmode-distribution-bar\", className)}\n data-slot=\"distribution-bar\"\n >\n <div className=\"patternmode-distribution-bar__track\" ref={trackRef}>\n <DistributionSegments segments={segments} total={total} />\n {segments.slice(0, -1).map((segment, boundaryIndex) => {\n const nextSegment = segments[boundaryIndex + 1];\n const boundaryPercent = getDistributionBoundaryPercent(segments, boundaryIndex);\n const label = `Adjust ${segment.label ?? segment.id} and ${\n nextSegment?.label ?? nextSegment?.id\n } distribution`;\n return (\n <DistributionBarHandle\n aria-label={label}\n boundaryPercent={boundaryPercent}\n key={`${segment.id}-${nextSegment?.id ?? \"end\"}`}\n onDrag={(info) => {\n handleDrag(boundaryIndex, info);\n }}\n onDragEnd={(info) => {\n handleDragEnd(boundaryIndex, info);\n }}\n onDragStart={handleDragStart}\n onKeyDown={(event) => {\n handleKeyDown(event, boundaryIndex);\n }}\n />\n );\n })}\n </div>\n {legend === \"segments\" ? (\n <DistributionSegmentLegend segments={segments} total={total} />\n ) : null}\n </fieldset>\n );\n};\n","import { hexToRgb, rgbToHex } from \"@instruments/colorscope/convert\";\n\nimport type { SwatchColorStop } from \"./swatch-types\";\n\nexport interface SwatchAtmosphereOptions {\n /** 0 = diffuse, wide wash · 1 = dense, tight pools. Default 0.5. */\n density?: number;\n /** -1 = grounds (pools sink) · 1 = lifts (pools rise). Default 0. */\n gravity?: number;\n}\n\n/**\n * Per-pool layout for the atmosphere fill:\n * `[focal x%, focal y%, base alpha (0-255), radius delta %, gravity sign]`.\n *\n * The first three entries reproduce the original three-pool blend identity\n * gradient exactly; further entries extend the pattern for palettes with\n * more than three colors.\n */\nconst POOLS: readonly (readonly [number, number, number, number, number])[] = [\n [30, 42, 0xcc, 0, -1],\n [72, 58, 0x99, -5, 1],\n [45, 65, 0x77, 8, -1],\n [62, 32, 0x66, 3, 1],\n [24, 72, 0x55, -3, -1],\n [80, 40, 0x44, 6, 1],\n];\n\n/**\n * Build a soft, layered radial \"atmosphere\" background from color stops — a\n * stack of overlapping elliptical pools rather than a flat or linear fill.\n * Density controls how far each pool reaches; gravity shifts the pools\n * vertically. Returns `undefined` when there are no colors.\n */\n\nconst clamp = (value: number, min: number, max: number): number =>\n Math.min(max, Math.max(min, value));\n\nconst withAlpha = (color: string, alpha: number): string => {\n const rgb = hexToRgb(color);\n if (rgb !== null) {\n const suffix = Math.round(clamp(alpha, 0, 255))\n .toString(16)\n .padStart(2, \"0\");\n return `${rgbToHex(rgb.r, rgb.g, rgb.b)}${suffix}`;\n }\n const percent = Math.round((clamp(alpha, 0, 255) / 255) * 100);\n return `color-mix(in srgb, ${color} ${percent}%, transparent)`;\n};\n\nexport const getSwatchAtmosphereBackground = (\n colors: SwatchColorStop[] | undefined,\n options: SwatchAtmosphereOptions = {},\n): string | undefined => {\n if (colors === undefined || colors.length === 0) {\n return undefined;\n }\n\n const density = clamp(options.density ?? 0.5, 0, 1);\n const gravity = clamp(options.gravity ?? 0, -1, 1);\n const gy = Math.round(gravity * 8);\n const reach = Math.round(50 + (1 - density) * 15);\n\n const layers = colors.map((stop, index) => {\n const color = typeof stop === \"string\" ? stop : stop.color;\n const pool = POOLS[index % POOLS.length];\n if (pool === undefined) {\n throw new Error(\"Expected atmosphere pool to exist.\");\n }\n const [x, y, baseAlpha, radiusDelta, gravitySign] = pool;\n // Each wrap past the palette length fades the extra pools further back.\n const cycle = Math.floor(index / POOLS.length);\n const alpha = Math.max(0x22, baseAlpha - cycle * 0x22);\n const focalY = clamp(y + gravitySign * gy, 0, 100);\n const radius = Math.max(8, reach + radiusDelta);\n return `radial-gradient(ellipse at ${x}% ${focalY}%, ${withAlpha(\n color,\n alpha,\n )} 0%, transparent ${radius}%)`;\n });\n\n return layers.join(\", \");\n};\n","import { hexLightness } from \"@instruments/colorscope/math\";\n\nimport type { SwatchColorStop } from \"./swatch-types\";\n\n/** Perceptual (OKLab) lightness above which a swatch reads as \"light\". */\nconst LIGHT_LIGHTNESS_THRESHOLD = 0.62;\n\nconst toColorStop = (stop: SwatchColorStop): { color: string; ratio?: number } =>\n typeof stop === \"string\" ? { color: stop } : stop;\n\nconst getRatioWeight = (ratio: number | undefined): number => {\n if (ratio === undefined) {\n return 1;\n }\n\n return Number.isFinite(ratio) ? Math.max(0, ratio) : 0;\n};\n\nconst formatPercent = (value: number): string =>\n `${Number.isInteger(value) ? value : Number(value.toFixed(2))}%`;\n\nexport const isLightColor = (color: string): boolean => {\n const lightness = hexLightness(color);\n return Number.isFinite(lightness) && lightness > LIGHT_LIGHTNESS_THRESHOLD;\n};\n\nexport const getSwatchColorsBackground = (\n colors: SwatchColorStop[] | undefined,\n blend: \"smooth\" | \"step\" = \"step\",\n): string | undefined => {\n if (colors === undefined || colors.length === 0) {\n return undefined;\n }\n\n const [singleColor] = colors;\n if (colors.length === 1 && singleColor !== undefined) {\n return toColorStop(singleColor).color;\n }\n\n const stops = colors.map(toColorStop);\n\n /* Smooth blend: one position per stop, interpolated in OKLab so ramps\n read as a continuous region of color rather than discrete bands. */\n if (blend === \"smooth\") {\n const parts = stops.map((stop, index) => {\n const position = stops.length === 1 ? 0 : (index / (stops.length - 1)) * 100;\n return `${stop.color} ${formatPercent(position)}`;\n });\n return `linear-gradient(in oklab 90deg, ${parts.join(\", \")})`;\n }\n\n const weights = stops.map((stop) => getRatioWeight(stop.ratio));\n const rawTotal = weights.reduce((sum, ratio) => sum + ratio, 0);\n const useEqualWeights = rawTotal <= 0;\n const total = useEqualWeights ? stops.length : rawTotal;\n let cursor = 0;\n const parts = stops.map((stop, index) => {\n const ratio = useEqualWeights ? 1 : (weights[index] ?? 0);\n const start = cursor;\n const end = index === stops.length - 1 ? 100 : cursor + (ratio / total) * 100;\n cursor = end;\n return `${stop.color} ${formatPercent(start)} ${formatPercent(end)}`;\n });\n\n return `linear-gradient(90deg, ${parts.join(\", \")})`;\n};\n","import { PATTERNMODE_SIZE_VALUES, PATTERNMODE_SIZES } from \"@patternmode/system\";\nimport type { ObjectFit } from \"@patternmode/system\";\nimport type { ComponentType, HTMLAttributes, ReactElement, ReactNode, SVGProps } from \"react\";\n\nexport const SWATCH_SIZES = [...PATTERNMODE_SIZES, \"4xl\", \"5xl\", \"6xl\", \"7xl\"] as const;\n\nexport const SWATCH_SIZE_VALUES = {\n ...PATTERNMODE_SIZE_VALUES,\n \"4xl\": \"4.5rem\",\n \"5xl\": \"5rem\",\n \"6xl\": \"5.5rem\",\n \"7xl\": \"6rem\",\n} as const satisfies Record<SwatchSize, string>;\n\nexport const SWATCH_SHAPES = [\"circle\", \"pill\", \"square\", \"block\"] as const;\n\nexport const SWATCH_TEXTURES = [\"atmosphere\"] as const;\n\nexport type SwatchSize = (typeof SWATCH_SIZES)[number];\nexport type SwatchShape = (typeof SWATCH_SHAPES)[number];\nexport type SwatchTexture = (typeof SWATCH_TEXTURES)[number];\nexport type SwatchColorStop = string | { color: string; ratio?: number };\ntype SwatchIcon = ComponentType<SVGProps<SVGSVGElement>>;\n\nexport const getSwatchSizeVariableStyle = (\n size: SwatchSize,\n variableName = \"--patternmode-swatch-size\",\n): Record<string, string> => ({\n [variableName]: SWATCH_SIZE_VALUES[size],\n});\n\n/**\n * Visual and behavioural props shared by every Swatch rendering mode. These\n * map deterministically to the fill, scrim, shape, and size treatment\n * regardless of whether the swatch renders its own wrapper or an `asChild`\n * element.\n */\nexport interface SwatchSharedProps extends HTMLAttributes<HTMLElement> {\n background?: string;\n color?: string;\n /**\n * How multiple `colors` blend: `\"step\"` renders hard bands, `\"smooth\"`\n * renders a continuous OKLab-interpolated ramp. Ignored by\n * `texture=\"atmosphere\"`.\n *\n * Default `\"step\"`.\n */\n blend?: \"smooth\" | \"step\";\n colors?: SwatchColorStop[];\n /**\n * Atmosphere density (0 = diffuse wash, 1 = dense pools). Only applies when\n * `texture=\"atmosphere\"`.\n *\n * Default `0.5`.\n */\n density?: number;\n /**\n * Render a precise, flat color block: no top-to-bottom scrim gradient and\n * no drop shadow. Use for data visualisation where the fill must read as\n * the exact color value.\n *\n * Default `false`.\n */\n flat?: boolean;\n /**\n * Atmosphere gravity (-1 = pools sink, 1 = pools rise). Only applies when\n * `texture=\"atmosphere\"`.\n *\n * Default `0`.\n */\n gravity?: number;\n icon?: SwatchIcon;\n isLight?: boolean;\n /**\n * Object-fit mode applied to media children through CSS variables.\n *\n * Default `\"cover\"`.\n */\n objectFit?: ObjectFit;\n /**\n * Object-position value applied to media children through CSS variables.\n *\n * Default `\"center\"`.\n */\n objectPosition?: string;\n raised?: boolean;\n /**\n * Shows selected state and optional icon overlay.\n *\n * Default `false`.\n */\n selected?: boolean;\n /**\n * Rendered swatch shape.\n *\n * Default `\"circle\"`.\n */\n shape?: SwatchShape;\n /**\n * Whether selected swatches render their ring treatment.\n *\n * Default `true`.\n */\n showRing?: boolean;\n /**\n * Size token used for the swatch dimensions.\n *\n * Default `\"base\"`.\n */\n size?: SwatchSize;\n /**\n * Render supplied colors as a soft, layered radial atmosphere — overlapping\n * color pools — instead of a ratio-encoded weighted palette. Pair with\n * `density` and `gravity` to shape the pools.\n */\n texture?: SwatchTexture;\n /**\n * Marks the swatch as unavailable.\n *\n * Default `false`.\n */\n unavailable?: boolean;\n}\n\n/**\n * Default Swatch props: the swatch renders its own wrapper element\n * (`<figure>`, or `<fieldset>` when `onRemove` is set).\n */\nexport interface SwatchDefaultProps extends SwatchSharedProps {\n /**\n * Render the swatch styling onto a provided child element instead of an\n * own wrapper. See {@link SwatchAsChildProps}.\n *\n * Default `false`.\n */\n asChild?: false;\n /**\n * Optional media rendered inside the swatch frame.\n *\n * Swatch does not optimize image elements itself. Next.js consumers can pass\n * their own `next/image` `Image` component here and use `objectFit` /\n * `objectPosition` to align it with the swatch shape.\n */\n children?: ReactNode;\n /** Renders a remove affordance and calls this after stopping propagation. */\n onRemove?: () => void;\n /** Accessible label for the remove affordance. Defaults to the swatch label. */\n removeLabel?: string;\n}\n\n/**\n * `asChild` Swatch props: the swatch merges its className, style (size/fill\n * CSS variables), data attributes, and other props onto the single React\n * element passed as `children`, rendering through it (Radix Slot pattern)\n * instead of emitting its own wrapper. Use this when the swatch must *be* an\n * interactive element, such as a `<button>` cell in a color matrix.\n *\n * `onRemove` is unsupported in this mode — its remove affordance cannot be\n * composed into an arbitrary slotted element. Wrap a default Swatch instead\n * when a remove control is required.\n */\nexport interface SwatchAsChildProps extends SwatchSharedProps {\n asChild: true;\n /** The single element the swatch styling is merged onto and rendered through. */\n children: ReactElement;\n onRemove?: never;\n removeLabel?: never;\n}\n\nexport type SwatchProps = SwatchDefaultProps | SwatchAsChildProps;\n","import { getObjectSizingStyle, joinClassNames } from \"@patternmode/system\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport type { CSSProperties, HTMLAttributes, MouseEvent, ReactNode } from \"react\";\n\nimport { getSwatchAtmosphereBackground } from \"./swatch-atmosphere\";\nimport { getSwatchColorsBackground, isLightColor } from \"./swatch-colors\";\nimport { getSwatchSizeVariableStyle } from \"./swatch-types\";\nimport type { SwatchProps } from \"./swatch-types\";\n\ntype SwatchRootStyle = CSSProperties & Record<\"--patternmode-swatch-fill\", string | undefined>;\n\ninterface SwatchContentProps {\n children: SwatchProps[\"children\"];\n flat: boolean;\n Icon: SwatchProps[\"icon\"];\n mediaStyle: CSSProperties;\n selected: boolean;\n unavailable: boolean;\n}\n\ninterface RemovableSwatchProps {\n ariaLabel: string | undefined;\n children: ReactNode;\n className: string | undefined;\n dataProps: ReturnType<typeof getSwatchDataProps>;\n onRemove: () => void;\n removeLabel: string;\n rootStyle: SwatchRootStyle;\n props: HTMLAttributes<HTMLElement>;\n}\n\nconst SwatchContent = ({\n children,\n flat,\n Icon,\n mediaStyle,\n selected,\n unavailable,\n}: SwatchContentProps) => (\n <>\n <span aria-hidden=\"true\" className=\"patternmode-swatch__fill\" />\n {children !== undefined && children !== null ? (\n <span className=\"patternmode-swatch__media\" style={mediaStyle}>\n {children}\n </span>\n ) : null}\n {flat ? null : <span aria-hidden=\"true\" className=\"patternmode-swatch__scrim\" />}\n {selected && Icon ? (\n <span className=\"patternmode-swatch__icon\">\n <Icon aria-hidden=\"true\" focusable=\"false\" />\n </span>\n ) : null}\n {unavailable ? <span aria-hidden=\"true\" className=\"patternmode-swatch__slash\" /> : null}\n </>\n);\n\nconst getSwatchFill = ({\n background,\n blend,\n color,\n colors,\n density,\n gravity,\n texture,\n}: Pick<\n SwatchProps,\n \"background\" | \"blend\" | \"color\" | \"colors\" | \"density\" | \"gravity\" | \"texture\"\n>) => {\n const colorsBackground = getSwatchColorsBackground(colors, blend);\n const atmosphereBackground =\n texture === \"atmosphere\"\n ? getSwatchAtmosphereBackground(colors, { density, gravity })\n : undefined;\n\n return {\n colorsBackground,\n fill: background ?? atmosphereBackground ?? colorsBackground ?? color,\n };\n};\n\nconst getSwatchTone = ({\n background,\n color,\n colorsBackground,\n isLight,\n}: {\n background: SwatchProps[\"background\"];\n color: SwatchProps[\"color\"];\n colorsBackground: string | undefined;\n isLight: SwatchProps[\"isLight\"];\n}) => {\n if (isLight !== undefined) {\n return isLight ? \"light\" : \"dark\";\n }\n\n const hasColor = color !== undefined && color !== \"\";\n const hasBackground = background !== undefined && background !== \"\";\n const hasColorsBackground = colorsBackground !== undefined && colorsBackground !== \"\";\n\n if (hasColor && !hasBackground && !hasColorsBackground && isLightColor(color)) {\n return \"light\";\n }\n\n return \"dark\";\n};\n\nconst getSwatchDataProps = ({\n flat,\n lightTone,\n raised,\n selected,\n shape,\n showRing,\n size,\n unavailable,\n}: {\n flat: boolean;\n lightTone: \"dark\" | \"light\";\n raised: boolean;\n selected: boolean;\n shape: SwatchProps[\"shape\"];\n showRing: boolean;\n size: SwatchProps[\"size\"];\n unavailable: boolean;\n}) => ({\n \"data-flat\": flat ? \"true\" : undefined,\n \"data-raised\": raised ? \"true\" : undefined,\n \"data-selected\": selected ? \"true\" : undefined,\n \"data-shape\": shape,\n \"data-show-ring\": showRing ? \"true\" : \"false\",\n \"data-size\": size,\n \"data-slot\": \"swatch\",\n \"data-tone\": lightTone,\n \"data-unavailable\": unavailable ? \"true\" : undefined,\n});\n\nconst RemovableSwatch = ({\n ariaLabel,\n children,\n className,\n dataProps,\n onRemove,\n removeLabel,\n rootStyle,\n props,\n}: RemovableSwatchProps) => {\n const handleRemove = (event: MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n onRemove();\n };\n\n return (\n <fieldset\n {...props}\n {...dataProps}\n aria-label={ariaLabel}\n className={joinClassNames(\"patternmode-swatch\", className)}\n style={rootStyle}\n >\n {children}\n <button\n aria-label={removeLabel}\n className=\"patternmode-swatch__remove\"\n onClick={handleRemove}\n type=\"button\"\n >\n <svg aria-hidden=\"true\" fill=\"none\" viewBox=\"0 0 20 20\">\n <path d=\"M5.5 5.5l9 9M14.5 5.5l-9 9\" />\n </svg>\n </button>\n </fieldset>\n );\n};\n\nexport const Swatch = ({\n \"aria-label\": ariaLabel,\n asChild = false,\n background,\n blend = \"step\",\n children,\n className,\n color,\n colors,\n density,\n flat = false,\n gravity,\n icon: Icon,\n isLight,\n objectFit,\n objectPosition,\n onRemove,\n raised = false,\n removeLabel,\n role: _role,\n selected = false,\n shape = \"circle\",\n showRing = true,\n size = \"base\",\n style,\n texture,\n unavailable = false,\n ...props\n}: SwatchProps) => {\n const { colorsBackground, fill } = getSwatchFill({\n background,\n blend,\n color,\n colors,\n density,\n gravity,\n texture,\n });\n const lightTone = getSwatchTone({\n background,\n color,\n colorsBackground,\n isLight,\n });\n const resolvedRemoveLabel =\n removeLabel ?? (ariaLabel !== undefined && ariaLabel !== \"\" ? `Remove ${ariaLabel}` : \"Remove\");\n\n const rootStyle: SwatchRootStyle = {\n ...getSwatchSizeVariableStyle(size),\n \"--patternmode-swatch-fill\": fill,\n ...style,\n };\n const mediaStyle: CSSProperties = getObjectSizingStyle({\n fit: objectFit,\n position: objectPosition,\n });\n const dataProps = getSwatchDataProps({\n flat,\n lightTone,\n raised,\n selected,\n shape,\n showRing,\n size,\n unavailable,\n });\n\n const swatchContent = (\n <SwatchContent\n flat={flat}\n Icon={Icon}\n mediaStyle={mediaStyle}\n selected={selected}\n unavailable={unavailable}\n >\n {asChild ? undefined : children}\n </SwatchContent>\n );\n\n if (asChild) {\n return (\n <Slot\n {...props}\n {...dataProps}\n aria-label={ariaLabel}\n className={joinClassNames(\"patternmode-swatch\", className)}\n style={rootStyle}\n >\n {swatchContent}\n <Slottable>{children}</Slottable>\n </Slot>\n );\n }\n\n if (onRemove !== undefined) {\n return (\n <RemovableSwatch\n ariaLabel={ariaLabel}\n className={className}\n dataProps={dataProps}\n onRemove={onRemove}\n props={props}\n removeLabel={resolvedRemoveLabel}\n rootStyle={rootStyle}\n >\n {swatchContent}\n </RemovableSwatch>\n );\n }\n\n return (\n <figure\n {...props}\n {...dataProps}\n aria-label={ariaLabel}\n className={joinClassNames(\"patternmode-swatch\", className)}\n style={rootStyle}\n >\n {swatchContent}\n </figure>\n );\n};\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternmode/swatch",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.3",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Color, gradient, image, and palette swatch primitives for Patternmode interfaces.",
|
|
6
6
|
"keywords": [
|
|
@@ -41,9 +41,10 @@
|
|
|
41
41
|
"access": "public"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
+
"@instruments/colorscope": "^3.5.0",
|
|
44
45
|
"@radix-ui/react-slot": "^1.2.5",
|
|
45
46
|
"motion": "^12.40.0",
|
|
46
|
-
"@patternmode/system": "0.
|
|
47
|
+
"@patternmode/system": "0.3.0"
|
|
47
48
|
},
|
|
48
49
|
"devDependencies": {
|
|
49
50
|
"@howells/lint": "^0.5.0",
|