@lvl99dotcom/paintcanvas 0.5.0 → 0.6.0

package/dist/ui/elements/PcToolSettings/index.js

@@ -295,7 +295,7 @@ var PcToolSettings = class extends PcElement {
 			})}
         <button
           type="button"
-          class="configure"
+          class="configure pill-s"
           @click=${() => this.emit("pc-configure-brush", kind)}
         >
           ${this.t("paintCanvas.toolSettings.configure")}
@@ -359,14 +359,14 @@ var PcToolSettings = class extends PcElement {
 			label: this.t("paintCanvas.toolSettings.maskSettings"),
 			start: html`<button
           type="button"
-          class="pill select-all"
+          class="pill-s select-all"
           @click=${() => app.selection.selectAll()}
         >
           ${this.t("paintCanvas.toolSettings.selectAll")}
         </button>
         <button
           type="button"
-          class="pill invert"
+          class="pill-s invert"
           ?disabled=${!app.selection.active}
           @click=${() => app.selection.invert()}
         >
@@ -374,7 +374,7 @@ var PcToolSettings = class extends PcElement {
         </button>
         <button
           type="button"
-          class="pill deselect"
+          class="pill-s deselect"
           ?disabled=${!app.selection.active}
           @click=${() => app.selection.clear()}
         >
@@ -486,7 +486,7 @@ var PcToolSettings = class extends PcElement {
         </button>
         <button
           type="button"
-          class="pill reset"
+          class="pill-s reset"
           ?disabled=${disabled}
           @click=${() => app.cancelTransform()}
         >
@@ -538,7 +538,7 @@ var PcToolSettings = class extends PcElement {
         </label>
         <button
           type="button"
-          class="pill reset"
+          class="pill-s reset"
           @click=${() => view.zoomAt(centre, 1)}
         >
           ${this.t("paintCanvas.toolSettings.reset")}

package/dist/ui/icons/images/icon-profile-graph@2x.js

@@ -0,0 +1,3 @@
+// src/ui/icons/images/icon-profile-graph@2x.png?url
+var icon_profile_graph_2x_default = "data:image/png;base64,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";
+export { icon_profile_graph_2x_default as default };

package/dist/ui/icons/index.d.ts

@@ -1,5 +1,5 @@
 /** Names of the icons that come with PaintCanvas */
-export type IconName = "brush" | "eraser" | "cursor" | "rectangleMask" | "circleMask" | "polygonMask" | "freehandMask" | "eyedropper" | "zoom" | "zoomIn" | "zoomOut" | "pan" | "undo" | "redo" | "layers" | "locked" | "unlocked" | "visible" | "hidden" | "linked" | "unlinked" | "pressure" | "focusPen" | "tilt" | "randomise" | "flipHorizontal" | "flipVertical" | "rotate90Left" | "rotate90Right" | "rotate" | "horizontalSize" | "verticalSize" | "diagonalTlbrSize" | "diagonalTrblSize" | "clipboard" | "smoothingLinear" | "smoothingBezierQuad" | "smoothingBezierCubic" | "sun" | "moon" | "star" | "cog";
+export type IconName = "brush" | "eraser" | "cursor" | "rectangleMask" | "circleMask" | "polygonMask" | "freehandMask" | "eyedropper" | "zoom" | "zoomIn" | "zoomOut" | "pan" | "undo" | "redo" | "layers" | "locked" | "unlocked" | "visible" | "hidden" | "linked" | "unlinked" | "pressure" | "focusPen" | "tilt" | "randomise" | "profileGraph" | "flipHorizontal" | "flipVertical" | "rotate90Left" | "rotate90Right" | "rotate" | "horizontalSize" | "verticalSize" | "diagonalTlbrSize" | "diagonalTrblSize" | "clipboard" | "smoothingLinear" | "smoothingBezierQuad" | "smoothingBezierCubic" | "sun" | "moon" | "star" | "cog";
 /** The icons that come with PaintCanvas, as URLs */
 export declare const DEFAULT_ICONS: Readonly<Record<IconName, string>>;
 /**

package/dist/ui/icons/index.js

@@ -23,6 +23,7 @@ import icon_pressure_2x_default from "./images/icon-pressure@2x.js";
 import icon_focus_pen_2x_default from "./images/icon-focus-pen@2x.js";
 import icon_tilt_2x_default from "./images/icon-tilt@2x.js";
 import icon_randomise_2x_default from "./images/icon-randomise@2x.js";
+import icon_profile_graph_2x_default from "./images/icon-profile-graph@2x.js";
 import icon_flip_horizontal_2x_default from "./images/icon-flip-horizontal@2x.js";
 import icon_flip_vertical_2x_default from "./images/icon-flip-vertical@2x.js";
 import icon_rotate_90_left_2x_default from "./images/icon-rotate-90-left@2x.js";
@@ -69,6 +70,7 @@ var DEFAULT_ICONS = {
 	focusPen: icon_focus_pen_2x_default,
 	tilt: icon_tilt_2x_default,
 	randomise: icon_randomise_2x_default,
+	profileGraph: icon_profile_graph_2x_default,
 	flipHorizontal: icon_flip_horizontal_2x_default,
 	flipVertical: icon_flip_vertical_2x_default,
 	rotate90Left: icon_rotate_90_left_2x_default,

package/dist/ui/index.d.ts

@@ -8,12 +8,17 @@ export { PcIconToggle } from "./elements/PcIconToggle";
 export { PcToggleCheckbox } from "./elements/PcToggleCheckbox";
 export { PcSlider } from "./elements/PcSlider";
 export { PcNumberSlider, fitNumber } from "./elements/PcNumberSlider";
+export { PcProfileEditor, type ProfileSaveDetail, } from "./elements/PcProfileEditor";
+export { PcProfileGraph, curvePath, movePoint, } from "./elements/PcProfileGraph";
+export { PcSliderRange, rangeFraction, type RangeDetail, type RangeEnd, } from "./elements/PcSliderRange";
 export { PcBrushSize, sizeText } from "./elements/PcBrushSize";
 export { PointerDrag, DRAG_THRESHOLD, dragDelta } from "./drag";
 export { markDismissingPress, isDismissingPress } from "./dismiss";
 export { PcMenu, isMenuItem, menuSections, type MenuItem, type MenuLabel, type MenuDivider, type MenuEntry, } from "./elements/PcMenu";
 export { PcContextMenu, CONTEXT_MENU_TOGGLE_EVENT, MENU_MARGIN, menuLeft, menuTop, type MenuPlacement, } from "./elements/PcContextMenu";
-export { PcDialog, CANCEL_CHOICE, type DialogChoice, } from "./elements/PcDialog";
+export { PcDialogWindow, DIALOG_DISMISS_EVENT, type DialogCloseReason, } from "./elements/PcDialogWindow";
+export { PcDialog, CANCEL_CHOICE, type DialogChoice, type DialogChoiceDetail, type DialogField, } from "./elements/PcDialog";
+export { askConfirm, askText, deletePresetQuestion, OK_CHOICE, type AskOptions, type AskTextOptions, type ConfirmFn, type PromptFn, } from "./ask";
 export { PcToast, TOAST_DURATION_MS, type ToastKind } from "./elements/PcToast";
 export { PcInfoTip } from "./elements/PcInfoTip";
 export { PcPopover } from "./elements/PcPopover";

package/dist/ui/index.js

@@ -9,12 +9,17 @@ import { PcIconToggle } from "./elements/PcIconToggle/index.js";
 import { PcToggleCheckbox } from "./elements/PcToggleCheckbox/index.js";
 import { PcSlider } from "./elements/PcSlider/index.js";
 import { PcNumberSlider, fitNumber } from "./elements/PcNumberSlider/index.js";
+import { PcProfileEditor } from "./elements/PcProfileEditor/index.js";
+import { PcProfileGraph, curvePath, movePoint } from "./elements/PcProfileGraph/index.js";
+import { PcSliderRange, rangeFraction } from "./elements/PcSliderRange/index.js";
 import { PcBrushSize, sizeText } from "./elements/PcBrushSize/index.js";
 import { DRAG_THRESHOLD, PointerDrag, dragDelta } from "./drag/index.js";
 import { isDismissingPress, markDismissingPress } from "./dismiss/index.js";
 import { PcMenu, isMenuItem, menuSections } from "./elements/PcMenu/index.js";
 import { CONTEXT_MENU_TOGGLE_EVENT, MENU_MARGIN, PcContextMenu, menuLeft, menuTop } from "./elements/PcContextMenu/index.js";
+import { DIALOG_DISMISS_EVENT, PcDialogWindow } from "./elements/PcDialogWindow/index.js";
 import { CANCEL_CHOICE, PcDialog } from "./elements/PcDialog/index.js";
+import { OK_CHOICE, askConfirm, askText, deletePresetQuestion } from "./ask/index.js";
 import { PcToast, TOAST_DURATION_MS } from "./elements/PcToast/index.js";
 import { PcInfoTip } from "./elements/PcInfoTip/index.js";
 import { PcPopover } from "./elements/PcPopover/index.js";
@@ -31,4 +36,4 @@ import { PcStats, formatBytes } from "./elements/PcStats/index.js";
 import { PcThemePicker, THEME_ICONS } from "./elements/PcThemePicker/index.js";
 import { PaintCanvasElement } from "./elements/PaintCanvas/index.js";
 import { DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, LayoutStateController, STATE_EVENT, matchesState, parseSideModes, showsRail, sideModeFor } from "./layout/index.js";
-export { CANCEL_CHOICE, CLIPBOARD_TOOLS, COLOUR_CLICK_EVENT, CONTEXT_MENU_TOGGLE_EVENT, DARK_TOKENS, DEFAULT_ICONS, DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, DRAG_THRESHOLD, IconRegistry, LIGHT_TOKENS, LONG_PRESS_MS, LayoutStateController, MENU_MARGIN, PANE_COLLAPSE_EVENT, PaintCanvasElement, PcAppSettings, PcBrushSize, PcButton, PcButtonGroup, PcClipboardTools, PcColourPair, PcContextMenu, PcDialog, PcElement, PcIcon, PcIconToggle, PcInfoTip, PcInputSettings, PcMatch, PcMenu, PcNumberSlider, PcPane, PcPanel, PcPanelColours, PcPopover, PcShortcutSettings, PcSlider, PcStats, PcThemePicker, PcToast, PcToggleCheckbox, PointerDrag, STATE_EVENT, THEMES, THEME_ICONS, TOAST_DURATION_MS, TOKENS_CSS, defineElement, dragDelta, emit, fitNumber, formatBytes, icons, installTokens, isDismissingPress, isMenuItem, isTheme, markDismissingPress, matchesState, menuLeft, menuSections, menuTop, parseSideModes, showsRail, sideModeFor, sizeText, tokens };
+export { CANCEL_CHOICE, CLIPBOARD_TOOLS, COLOUR_CLICK_EVENT, CONTEXT_MENU_TOGGLE_EVENT, DARK_TOKENS, DEFAULT_ICONS, DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, DIALOG_DISMISS_EVENT, DRAG_THRESHOLD, IconRegistry, LIGHT_TOKENS, LONG_PRESS_MS, LayoutStateController, MENU_MARGIN, OK_CHOICE, PANE_COLLAPSE_EVENT, PaintCanvasElement, PcAppSettings, PcBrushSize, PcButton, PcButtonGroup, PcClipboardTools, PcColourPair, PcContextMenu, PcDialog, PcDialogWindow, PcElement, PcIcon, PcIconToggle, PcInfoTip, PcInputSettings, PcMatch, PcMenu, PcNumberSlider, PcPane, PcPanel, PcPanelColours, PcPopover, PcProfileEditor, PcProfileGraph, PcShortcutSettings, PcSlider, PcSliderRange, PcStats, PcThemePicker, PcToast, PcToggleCheckbox, PointerDrag, STATE_EVENT, THEMES, THEME_ICONS, TOAST_DURATION_MS, TOKENS_CSS, askConfirm, askText, curvePath, defineElement, deletePresetQuestion, dragDelta, emit, fitNumber, formatBytes, icons, installTokens, isDismissingPress, isMenuItem, isTheme, markDismissingPress, matchesState, menuLeft, menuSections, menuTop, movePoint, parseSideModes, rangeFraction, showsRail, sideModeFor, sizeText, tokens };

package/dist/ui/styles/index.d.ts

@@ -1,10 +1,30 @@
+/** The sizes of pill buttons, from small to extra extra large (`pill` is the usual size) */
+export declare const PILL_SIZES: readonly ["pill-s", "pill", "pill-l", "pill-xl", "pill-xxl"];
+/** A pill button size */
+export type PillSize = (typeof PILL_SIZES)[number];
+/** Each pill size's least height, font size and padding, in pixels */
+export declare const PILL_SIZE_STYLES: Readonly<Record<PillSize, {
+    height: number;
+    fontSize: number;
+    padding: string;
+}>>;
+/**
+ * CSS declarations giving a pill size (its least height, font size and padding), with text on one centred line.
+ *
+ * @example
+ * pillSizeDeclarations("pill-s"); // "min-height: 24px; font-size: 14px; padding: 2px 8px; line-height: 1;"
+ */
+export declare const pillSizeDeclarations: (size: PillSize) => string;
 /** Windows, menus and dialog buttons: affirmative buttons purple, cancel and close buttons pink */
 export declare const windows: import("lit").CSSResult;
 /** Interface controls whose text isn't selected by clicking or dragging (form fields stay selectable) */
 export declare const noTextSelection: import("lit").CSSResult;
 /** Icon toggles (a checkbox hidden behind its icon, purple while on) and boxed icon buttons */
 export declare const iconControls: import("lit").CSSResult;
-/** Small purple pill buttons, e.g. "Configure", "New Layer", "Import" */
+/**
+ * Purple pill buttons, e.g. "Configure", "New Layer", "Import": `pill` is the usual size; `pill-s`, `pill-l`, `pill-xl`
+ * and `pill-xxl` are the others (see `PILL_SIZE_STYLES`).
+ */
 export declare const pills: import("lit").CSSResult;
 /** The shared styles as text, e.g. for `unsafeCSS` */
 export declare const WINDOWS_CSS: string;

package/dist/ui/styles/index.js

@@ -1,5 +1,53 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
 // src/ui/styles/index.ts
+/** The sizes of pill buttons, from small to extra extra large (`pill` is the usual size) */
+var PILL_SIZES = [
+	"pill-s",
+	"pill",
+	"pill-l",
+	"pill-xl",
+	"pill-xxl"
+];
+/** Each pill size's least height, font size and padding, in pixels */
+var PILL_SIZE_STYLES = {
+	"pill-s": {
+		height: 24,
+		fontSize: 14,
+		padding: "2px 8px"
+	},
+	pill: {
+		height: 32,
+		fontSize: 16,
+		padding: "8px 16px"
+	},
+	"pill-l": {
+		height: 50,
+		fontSize: 20,
+		padding: "15px 25px"
+	},
+	"pill-xl": {
+		height: 75,
+		fontSize: 24,
+		padding: "25px 37px"
+	},
+	"pill-xxl": {
+		height: 100,
+		fontSize: 28,
+		padding: "36px 50px"
+	}
+};
+/**
+* CSS declarations giving a pill size (its least height, font size and padding), with text on one centred line.
+*
+* @example
+* pillSizeDeclarations("pill-s"); // "min-height: 24px; font-size: 14px; padding: 2px 8px; line-height: 1;"
+*/
+var pillSizeDeclarations = (size) => {
+	const { height, fontSize, padding } = PILL_SIZE_STYLES[size];
+	return `min-height: ${height}px; font-size: ${fontSize}px; padding: ${padding}; line-height: 1;`;
+};
+/** The usual pill size, for buttons shaped as pills without a size of their own */
+var PILL = unsafeCSS(pillSizeDeclarations("pill"));
 /** Windows, menus and dialog buttons: affirmative buttons purple, cancel and close buttons pink */
 var windows = css`
   button,
@@ -25,12 +73,15 @@ var windows = css`
   button[type="submit"],
   button.cancel,
   button.close {
-    min-height: var(--pc-control-size);
-    padding: var(--pc-space-1) var(--pc-space-3);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
     border: 0;
     border-radius: var(--pc-radius-pill);
     color: var(--pc-accent-text);
     font: inherit;
+    ${PILL}
     font-weight: bold;
     cursor: pointer;
   }
@@ -159,30 +210,38 @@ var iconControls = css`
     outline: var(--pc-focus-width) solid var(--pc-focus);
   }
 `;
-/** Small purple pill buttons, e.g. "Configure", "New Layer", "Import" */
+/** Pill buttons, of each size in `PILL_SIZES` as classes */
+var PILL_SELECTOR = unsafeCSS(["configure", ...PILL_SIZES].map((name) => `button.${name}`).join(", "));
+/** Each pill size's class, giving it its height, font size and padding */
+var PILL_SIZE_CLASSES = unsafeCSS(PILL_SIZES.map((size) => `button.${size} { ${pillSizeDeclarations(size)} }`).join("\n"));
+/**
+* Purple pill buttons, e.g. "Configure", "New Layer", "Import": `pill` is the usual size; `pill-s`, `pill-l`, `pill-xl`
+* and `pill-xxl` are the others (see `PILL_SIZE_STYLES`).
+*/
 var pills = css`
-  button.configure,
-  button.pill {
-    min-height: 30px;
-    padding: var(--pc-space-1) var(--pc-space-3);
+  ${PILL_SELECTOR} {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
     border: 0;
     border-radius: var(--pc-radius-pill);
     background: var(--pc-accent);
     color: var(--pc-accent-text);
     font: inherit;
+    ${PILL}
     font-weight: bold;
     cursor: pointer;
   }
-  button.configure:hover:not(:disabled),
-  button.pill:hover:not(:disabled) {
+  ${PILL_SIZE_CLASSES}
+  :is(${PILL_SELECTOR}):hover:not(:disabled) {
     filter: brightness(1.15);
   }
-  button.configure:focus-visible,
-  button.pill:focus-visible {
+  :is(${PILL_SELECTOR}):focus-visible {
     outline: var(--pc-focus-width) solid var(--pc-focus);
     outline-offset: 2px;
   }
-  button.pill:disabled {
+  :is(${PILL_SELECTOR}):disabled {
     background: var(--pc-disabled);
     cursor: default;
   }
@@ -192,4 +251,4 @@ var WINDOWS_CSS = windows.cssText;
 var NO_TEXT_SELECTION_CSS = noTextSelection.cssText;
 var ICON_CONTROLS_CSS = iconControls.cssText;
 var PILLS_CSS = pills.cssText;
-export { ICON_CONTROLS_CSS, NO_TEXT_SELECTION_CSS, PILLS_CSS, WINDOWS_CSS, iconControls, noTextSelection, pills, windows };
+export { ICON_CONTROLS_CSS, NO_TEXT_SELECTION_CSS, PILLS_CSS, PILL_SIZES, PILL_SIZE_STYLES, WINDOWS_CSS, iconControls, noTextSelection, pillSizeDeclarations, pills, windows };

package/locales/en-GB.json

@@ -7,6 +7,7 @@
   "paintCanvas.common.clear": "Clear",
   "paintCanvas.common.cut": "Cut",
   "paintCanvas.common.copy": "Copy",
+  "paintCanvas.common.copyMerged": "Copy merged",
   "paintCanvas.common.paste": "Paste",
   "paintCanvas.common.undo": "Undo",
   "paintCanvas.common.redo": "Redo",
@@ -16,6 +17,31 @@
   "paintCanvas.common.height": "Height",
   "paintCanvas.common.size": "Size",
   "paintCanvas.common.opacity": "Opacity",
+  "paintCanvas.range.low": "{label} (min)",
+  "paintCanvas.range.high": "{label} (max)",
+  "paintCanvas.profileGraph.point": "Point {number}: {x}, {y}",
+  "paintCanvas.profileGraph.remove": "Remove point",
+  "paintCanvas.profileGraph.linear": "Sharp corner (linear)",
+  "paintCanvas.profileGraph.bezier": "Smooth (bezier cubic)",
+  "paintCanvas.profiles.linear": "Linear",
+  "paintCanvas.profiles.overweight": "Overweight",
+  "paintCanvas.profiles.underweight": "Underweight",
+  "paintCanvas.profileEditor.title": "{param} profile graph",
+  "paintCanvas.profileEditor.button": "{param}: profile graph",
+  "paintCanvas.profileEditor.custom": "Custom",
+  "paintCanvas.profileEditor.actions": "Profile graph actions",
+  "paintCanvas.profileEditor.new": "New graph",
+  "paintCanvas.profileEditor.duplicate": "Duplicate…",
+  "paintCanvas.profileEditor.rename": "Rename…",
+  "paintCanvas.profileEditor.delete": "Delete…",
+  "paintCanvas.profileEditor.reset": "Reset",
+  "paintCanvas.profileEditor.name": "Name",
+  "paintCanvas.profileEditor.saveHeading": "Save profile graph",
+  "paintCanvas.profileEditor.renameHeading": "Rename profile graph",
+  "paintCanvas.profileEditor.deleteHeading": "Delete profile graph",
+  "paintCanvas.profileEditor.deleteConfirm": "Delete \"{name}\"? This can't be undone.",
+  "paintCanvas.profileEditor.replaceHeading": "Replace profile graph",
+  "paintCanvas.profileEditor.replaceConfirm": "You already have a profile graph called \"{name}\". Replace it?",
   "paintCanvas.tool.brush": "Brush",
   "paintCanvas.tool.eraser": "Eraser",
   "paintCanvas.tool.move": "Move, scale and rotate",
@@ -88,6 +114,9 @@
   "paintCanvas.presets.myPresets": "My presets",
   "paintCanvas.presets.unknownAuthor": "Unknown",
   "paintCanvas.presets.deleteConfirm": "Delete \"{name}\"? This can't be undone.",
+  "paintCanvas.presets.deleteHeading": "Delete preset",
+  "paintCanvas.presets.replaceHeading": "Replace preset",
+  "paintCanvas.presets.replace": "Replace",
   "paintCanvas.presets.deleted": "Deleted \"{name}\"",
   "paintCanvas.presets.deleteFailed": "Couldn't delete \"{name}\"",
   "paintCanvas.presets.saved": "Saved \"{name}\" to My presets",
@@ -181,6 +210,7 @@
   "paintCanvas.brushConfig.snapToPixelGrid": "Snap to pixel grid",
   "paintCanvas.brushConfig.addToPresets": "Add to presets",
   "paintCanvas.brushConfig.variation": "{param}: {source}",
+  "paintCanvas.brushConfig.varyWith": "{param}: vary with",
   "paintCanvas.layers.mergeDownTitle": "Merge down",
   "paintCanvas.layers.clear": "Clear…",
   "paintCanvas.layers.delete": "Delete…",

package/locales/en-US.json

@@ -7,6 +7,7 @@
   "paintCanvas.common.clear": "Clear",
   "paintCanvas.common.cut": "Cut",
   "paintCanvas.common.copy": "Copy",
+  "paintCanvas.common.copyMerged": "Copy merged",
   "paintCanvas.common.paste": "Paste",
   "paintCanvas.common.undo": "Undo",
   "paintCanvas.common.redo": "Redo",
@@ -16,6 +17,31 @@
   "paintCanvas.common.height": "Height",
   "paintCanvas.common.size": "Size",
   "paintCanvas.common.opacity": "Opacity",
+  "paintCanvas.range.low": "{label} (min)",
+  "paintCanvas.range.high": "{label} (max)",
+  "paintCanvas.profileGraph.point": "Point {number}: {x}, {y}",
+  "paintCanvas.profileGraph.remove": "Remove point",
+  "paintCanvas.profileGraph.linear": "Sharp corner (linear)",
+  "paintCanvas.profileGraph.bezier": "Smooth (bezier cubic)",
+  "paintCanvas.profiles.linear": "Linear",
+  "paintCanvas.profiles.overweight": "Overweight",
+  "paintCanvas.profiles.underweight": "Underweight",
+  "paintCanvas.profileEditor.title": "{param} profile graph",
+  "paintCanvas.profileEditor.button": "{param}: profile graph",
+  "paintCanvas.profileEditor.custom": "Custom",
+  "paintCanvas.profileEditor.actions": "Profile graph actions",
+  "paintCanvas.profileEditor.new": "New graph",
+  "paintCanvas.profileEditor.duplicate": "Duplicate…",
+  "paintCanvas.profileEditor.rename": "Rename…",
+  "paintCanvas.profileEditor.delete": "Delete…",
+  "paintCanvas.profileEditor.reset": "Reset",
+  "paintCanvas.profileEditor.name": "Name",
+  "paintCanvas.profileEditor.saveHeading": "Save profile graph",
+  "paintCanvas.profileEditor.renameHeading": "Rename profile graph",
+  "paintCanvas.profileEditor.deleteHeading": "Delete profile graph",
+  "paintCanvas.profileEditor.deleteConfirm": "Delete \"{name}\"? This can't be undone.",
+  "paintCanvas.profileEditor.replaceHeading": "Replace profile graph",
+  "paintCanvas.profileEditor.replaceConfirm": "You already have a profile graph called \"{name}\". Replace it?",
   "paintCanvas.tool.brush": "Brush",
   "paintCanvas.tool.eraser": "Eraser",
   "paintCanvas.tool.move": "Move, scale and rotate",
@@ -88,6 +114,9 @@
   "paintCanvas.presets.myPresets": "My presets",
   "paintCanvas.presets.unknownAuthor": "Unknown",
   "paintCanvas.presets.deleteConfirm": "Delete \"{name}\"? This can't be undone.",
+  "paintCanvas.presets.deleteHeading": "Delete preset",
+  "paintCanvas.presets.replaceHeading": "Replace preset",
+  "paintCanvas.presets.replace": "Replace",
   "paintCanvas.presets.deleted": "Deleted \"{name}\"",
   "paintCanvas.presets.deleteFailed": "Couldn't delete \"{name}\"",
   "paintCanvas.presets.saved": "Saved \"{name}\" to My presets",
@@ -181,6 +210,7 @@
   "paintCanvas.brushConfig.snapToPixelGrid": "Snap to pixel grid",
   "paintCanvas.brushConfig.addToPresets": "Add to presets",
   "paintCanvas.brushConfig.variation": "{param}: {source}",
+  "paintCanvas.brushConfig.varyWith": "{param}: vary with",
   "paintCanvas.layers.mergeDownTitle": "Merge down",
   "paintCanvas.layers.clear": "Clear…",
   "paintCanvas.layers.delete": "Delete…",

package/locales/fr.json

@@ -7,6 +7,7 @@
   "paintCanvas.common.clear": "Effacer",
   "paintCanvas.common.cut": "Couper",
   "paintCanvas.common.copy": "Copier",
+  "paintCanvas.common.copyMerged": "Copier avec fusion",
   "paintCanvas.common.paste": "Coller",
   "paintCanvas.common.undo": "Annuler",
   "paintCanvas.common.redo": "Rétablir",
@@ -16,6 +17,31 @@
   "paintCanvas.common.height": "Hauteur",
   "paintCanvas.common.size": "Taille",
   "paintCanvas.common.opacity": "Opacité",
+  "paintCanvas.range.low": "{label} (min)",
+  "paintCanvas.range.high": "{label} (max)",
+  "paintCanvas.profileGraph.point": "Point {number} : {x}, {y}",
+  "paintCanvas.profileGraph.remove": "Supprimer le point",
+  "paintCanvas.profileGraph.linear": "Angle net (linéaire)",
+  "paintCanvas.profileGraph.bezier": "Lisse (bézier cubique)",
+  "paintCanvas.profiles.linear": "Linéaire",
+  "paintCanvas.profiles.overweight": "Surpondéré",
+  "paintCanvas.profiles.underweight": "Sous-pondéré",
+  "paintCanvas.profileEditor.title": "Courbe de profil : {param}",
+  "paintCanvas.profileEditor.button": "{param} : courbe de profil",
+  "paintCanvas.profileEditor.custom": "Personnalisé",
+  "paintCanvas.profileEditor.actions": "Actions de la courbe",
+  "paintCanvas.profileEditor.new": "Nouvelle courbe",
+  "paintCanvas.profileEditor.duplicate": "Dupliquer…",
+  "paintCanvas.profileEditor.rename": "Renommer…",
+  "paintCanvas.profileEditor.delete": "Supprimer…",
+  "paintCanvas.profileEditor.reset": "Réinitialiser",
+  "paintCanvas.profileEditor.name": "Nom",
+  "paintCanvas.profileEditor.saveHeading": "Enregistrer la courbe",
+  "paintCanvas.profileEditor.renameHeading": "Renommer la courbe",
+  "paintCanvas.profileEditor.deleteHeading": "Supprimer la courbe",
+  "paintCanvas.profileEditor.deleteConfirm": "Supprimer « {name} » ? Cette action est irréversible.",
+  "paintCanvas.profileEditor.replaceHeading": "Remplacer la courbe",
+  "paintCanvas.profileEditor.replaceConfirm": "Vous avez déjà une courbe nommée « {name} ». La remplacer ?",
   "paintCanvas.tool.brush": "Pinceau",
   "paintCanvas.tool.eraser": "Gomme",
   "paintCanvas.tool.move": "Déplacer, redimensionner et faire pivoter",
@@ -88,6 +114,9 @@
   "paintCanvas.presets.myPresets": "Mes préréglages",
   "paintCanvas.presets.unknownAuthor": "Inconnu",
   "paintCanvas.presets.deleteConfirm": "Supprimer « {name} » ? Cette action est irréversible.",
+  "paintCanvas.presets.deleteHeading": "Supprimer le préréglage",
+  "paintCanvas.presets.replaceHeading": "Remplacer le préréglage",
+  "paintCanvas.presets.replace": "Remplacer",
   "paintCanvas.presets.deleted": "« {name} » supprimé",
   "paintCanvas.presets.deleteFailed": "Impossible de supprimer « {name} »",
   "paintCanvas.presets.saved": "« {name} » enregistré dans Mes préréglages",
@@ -181,6 +210,7 @@
   "paintCanvas.brushConfig.snapToPixelGrid": "Aligner sur la grille de pixels",
   "paintCanvas.brushConfig.addToPresets": "Ajouter aux préréglages",
   "paintCanvas.brushConfig.variation": "{param} : {source}",
+  "paintCanvas.brushConfig.varyWith": "{param} : varier selon",
   "paintCanvas.layers.mergeDownTitle": "Fusionner avec le calque inférieur",
   "paintCanvas.layers.clear": "Effacer…",
   "paintCanvas.layers.delete": "Supprimer…",

package/locales/ja.json

@@ -7,6 +7,7 @@
   "paintCanvas.common.clear": "クリア",
   "paintCanvas.common.cut": "切り取り",
   "paintCanvas.common.copy": "コピー",
+  "paintCanvas.common.copyMerged": "結合部分をコピー",
   "paintCanvas.common.paste": "ペースト",
   "paintCanvas.common.undo": "取り消す",
   "paintCanvas.common.redo": "やり直す",
@@ -16,6 +17,31 @@
   "paintCanvas.common.height": "高さ",
   "paintCanvas.common.size": "サイズ",
   "paintCanvas.common.opacity": "不透明度",
+  "paintCanvas.range.low": "{label}（最小）",
+  "paintCanvas.range.high": "{label}（最大）",
+  "paintCanvas.profileGraph.point": "点 {number}：{x}, {y}",
+  "paintCanvas.profileGraph.remove": "点を削除",
+  "paintCanvas.profileGraph.linear": "角（直線）",
+  "paintCanvas.profileGraph.bezier": "なめらか（3次ベジェ）",
+  "paintCanvas.profiles.linear": "リニア",
+  "paintCanvas.profiles.overweight": "重め",
+  "paintCanvas.profiles.underweight": "軽め",
+  "paintCanvas.profileEditor.title": "{param}のプロファイルグラフ",
+  "paintCanvas.profileEditor.button": "{param}：プロファイルグラフ",
+  "paintCanvas.profileEditor.custom": "カスタム",
+  "paintCanvas.profileEditor.actions": "グラフの操作",
+  "paintCanvas.profileEditor.new": "新しいグラフ",
+  "paintCanvas.profileEditor.duplicate": "複製…",
+  "paintCanvas.profileEditor.rename": "名前を変更…",
+  "paintCanvas.profileEditor.delete": "削除…",
+  "paintCanvas.profileEditor.reset": "リセット",
+  "paintCanvas.profileEditor.name": "名前",
+  "paintCanvas.profileEditor.saveHeading": "グラフを保存",
+  "paintCanvas.profileEditor.renameHeading": "グラフの名前を変更",
+  "paintCanvas.profileEditor.deleteHeading": "グラフを削除",
+  "paintCanvas.profileEditor.deleteConfirm": "「{name}」を削除しますか？元に戻せません。",
+  "paintCanvas.profileEditor.replaceHeading": "グラフを置き換え",
+  "paintCanvas.profileEditor.replaceConfirm": "「{name}」という名前のグラフがすでにあります。置き換えますか？",
   "paintCanvas.tool.brush": "ブラシ",
   "paintCanvas.tool.eraser": "消しゴム",
   "paintCanvas.tool.move": "移動・拡大縮小・回転",
@@ -88,6 +114,9 @@
   "paintCanvas.presets.myPresets": "マイプリセット",
   "paintCanvas.presets.unknownAuthor": "不明",
   "paintCanvas.presets.deleteConfirm": "「{name}」を削除しますか？元に戻せません。",
+  "paintCanvas.presets.deleteHeading": "プリセットを削除",
+  "paintCanvas.presets.replaceHeading": "プリセットを置き換え",
+  "paintCanvas.presets.replace": "置き換え",
   "paintCanvas.presets.deleted": "「{name}」を削除しました",
   "paintCanvas.presets.deleteFailed": "「{name}」を削除できませんでした",
   "paintCanvas.presets.saved": "「{name}」をマイプリセットに保存しました",
@@ -181,6 +210,7 @@
   "paintCanvas.brushConfig.snapToPixelGrid": "ピクセルグリッドに吸着",
   "paintCanvas.brushConfig.addToPresets": "プリセットに追加",
   "paintCanvas.brushConfig.variation": "{param}：{source}",
+  "paintCanvas.brushConfig.varyWith": "{param}：変化の元",
   "paintCanvas.layers.mergeDownTitle": "下のレイヤーと結合",
   "paintCanvas.layers.clear": "クリア…",
   "paintCanvas.layers.delete": "削除…",

package/locales/ko.json

@@ -7,6 +7,7 @@
   "paintCanvas.common.clear": "지우기",
   "paintCanvas.common.cut": "잘라내기",
   "paintCanvas.common.copy": "복사",
+  "paintCanvas.common.copyMerged": "병합하여 복사",
   "paintCanvas.common.paste": "붙여넣기",
   "paintCanvas.common.undo": "실행 취소",
   "paintCanvas.common.redo": "다시 실행",
@@ -16,6 +17,31 @@
   "paintCanvas.common.height": "높이",
   "paintCanvas.common.size": "크기",
   "paintCanvas.common.opacity": "불투명도",
+  "paintCanvas.range.low": "{label} (최소)",
+  "paintCanvas.range.high": "{label} (최대)",
+  "paintCanvas.profileGraph.point": "점 {number}: {x}, {y}",
+  "paintCanvas.profileGraph.remove": "점 삭제",
+  "paintCanvas.profileGraph.linear": "뾰족한 모서리 (선형)",
+  "paintCanvas.profileGraph.bezier": "부드럽게 (3차 베지어)",
+  "paintCanvas.profiles.linear": "선형",
+  "paintCanvas.profiles.overweight": "강하게",
+  "paintCanvas.profiles.underweight": "약하게",
+  "paintCanvas.profileEditor.title": "{param} 프로필 그래프",
+  "paintCanvas.profileEditor.button": "{param}: 프로필 그래프",
+  "paintCanvas.profileEditor.custom": "사용자 지정",
+  "paintCanvas.profileEditor.actions": "그래프 작업",
+  "paintCanvas.profileEditor.new": "새 그래프",
+  "paintCanvas.profileEditor.duplicate": "복제…",
+  "paintCanvas.profileEditor.rename": "이름 바꾸기…",
+  "paintCanvas.profileEditor.delete": "삭제…",
+  "paintCanvas.profileEditor.reset": "초기화",
+  "paintCanvas.profileEditor.name": "이름",
+  "paintCanvas.profileEditor.saveHeading": "그래프 저장",
+  "paintCanvas.profileEditor.renameHeading": "그래프 이름 바꾸기",
+  "paintCanvas.profileEditor.deleteHeading": "그래프 삭제",
+  "paintCanvas.profileEditor.deleteConfirm": "\"{name}\"을(를) 삭제할까요? 되돌릴 수 없습니다.",
+  "paintCanvas.profileEditor.replaceHeading": "그래프 바꾸기",
+  "paintCanvas.profileEditor.replaceConfirm": "\"{name}\"(이)라는 그래프가 이미 있습니다. 바꿀까요?",
   "paintCanvas.tool.brush": "브러시",
   "paintCanvas.tool.eraser": "지우개",
   "paintCanvas.tool.move": "이동, 크기 조절 및 회전",
@@ -88,6 +114,9 @@
   "paintCanvas.presets.myPresets": "내 프리셋",
   "paintCanvas.presets.unknownAuthor": "알 수 없음",
   "paintCanvas.presets.deleteConfirm": "\"{name}\"을(를) 삭제할까요? 되돌릴 수 없습니다.",
+  "paintCanvas.presets.deleteHeading": "프리셋 삭제",
+  "paintCanvas.presets.replaceHeading": "프리셋 바꾸기",
+  "paintCanvas.presets.replace": "바꾸기",
   "paintCanvas.presets.deleted": "\"{name}\"을(를) 삭제했습니다",
   "paintCanvas.presets.deleteFailed": "\"{name}\"을(를) 삭제하지 못했습니다",
   "paintCanvas.presets.saved": "\"{name}\"을(를) 내 프리셋에 저장했습니다",
@@ -181,6 +210,7 @@
   "paintCanvas.brushConfig.snapToPixelGrid": "픽셀 격자에 맞추기",
   "paintCanvas.brushConfig.addToPresets": "프리셋에 추가",
   "paintCanvas.brushConfig.variation": "{param}: {source}",
+  "paintCanvas.brushConfig.varyWith": "{param}: 변화 기준",
   "paintCanvas.layers.mergeDownTitle": "아래 레이어와 병합",
   "paintCanvas.layers.clear": "지우기…",
   "paintCanvas.layers.delete": "삭제…",