@vinicunca/unocss-preset 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-PRESENT Anthony Fu <https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/client.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+function masonryGridPolyfill(selectors = ".masonry-grid") {
+  const elements = [...document.querySelectorAll(selectors)];
+  if (!elements.length) {
+    return;
+  }
+  if (getComputedStyle(elements[0]).gridTemplateRows === "masonry") {
+    return;
+  }
+  for (const el of elements) {
+    const grid = {
+      el,
+      items: [...el.childNodes].filter((i) => i.nodeType === 1),
+      gap: parseFloat(getComputedStyle(el).rowGap),
+      columns: 0,
+      count: 0
+    };
+    renderGrid(grid);
+    const resizeObserver = new ResizeObserver(() => renderGrid(grid));
+    resizeObserver.observe(grid.el);
+  }
+}
+function renderGrid(grid) {
+  const columns = getComputedStyle(grid.el).gridTemplateColumns.split(" ").length;
+  for (const column of grid.items) {
+    const { height } = column.getBoundingClientRect();
+    const h = height.toString();
+    if (h !== column.dataset?.h) {
+      column.dataset.h = h;
+      grid.count++;
+    }
+  }
+  if (grid.columns === columns && grid.count) {
+    return;
+  }
+  grid.columns = columns;
+  for (const { style } of grid.items) {
+    style.removeProperty("margin-top");
+  }
+  if (grid.columns > 1) {
+    for (const [index, column] of grid.items.slice(columns).entries()) {
+      const { bottom: prevBottom } = grid.items[index].getBoundingClientRect();
+      const { top } = column.getBoundingClientRect();
+      column.style.marginTop = `${prevBottom + grid.gap - top}px`;
+    }
+  }
+  grid.count = 0;
+}
+
+exports.masonryGridPolyfill = masonryGridPolyfill;

package/dist/client.d.ts

@@ -0,0 +1,10 @@
+interface GridInstance {
+    el: HTMLElement;
+    items: HTMLElement[];
+    gap: number;
+    columns: number;
+    count: number;
+}
+declare function masonryGridPolyfill(selectors?: string): void;
+
+export { GridInstance, masonryGridPolyfill };

package/dist/client.mjs

@@ -0,0 +1,49 @@
+function masonryGridPolyfill(selectors = ".masonry-grid") {
+  const elements = [...document.querySelectorAll(selectors)];
+  if (!elements.length) {
+    return;
+  }
+  if (getComputedStyle(elements[0]).gridTemplateRows === "masonry") {
+    return;
+  }
+  for (const el of elements) {
+    const grid = {
+      el,
+      items: [...el.childNodes].filter((i) => i.nodeType === 1),
+      gap: parseFloat(getComputedStyle(el).rowGap),
+      columns: 0,
+      count: 0
+    };
+    renderGrid(grid);
+    const resizeObserver = new ResizeObserver(() => renderGrid(grid));
+    resizeObserver.observe(grid.el);
+  }
+}
+function renderGrid(grid) {
+  const columns = getComputedStyle(grid.el).gridTemplateColumns.split(" ").length;
+  for (const column of grid.items) {
+    const { height } = column.getBoundingClientRect();
+    const h = height.toString();
+    if (h !== column.dataset?.h) {
+      column.dataset.h = h;
+      grid.count++;
+    }
+  }
+  if (grid.columns === columns && grid.count) {
+    return;
+  }
+  grid.columns = columns;
+  for (const { style } of grid.items) {
+    style.removeProperty("margin-top");
+  }
+  if (grid.columns > 1) {
+    for (const [index, column] of grid.items.slice(columns).entries()) {
+      const { bottom: prevBottom } = grid.items[index].getBoundingClientRect();
+      const { top } = column.getBoundingClientRect();
+      column.style.marginTop = `${prevBottom + grid.gap - top}px`;
+    }
+  }
+  grid.count = 0;
+}
+
+export { masonryGridPolyfill };

package/dist/index.cjs

@@ -0,0 +1,556 @@
+'use strict';
+
+const jsUtilities = require('@vinicunca/js-utilities');
+const core = require('@unocss/core');
+const presetMini = require('@unocss/preset-mini');
+const unocss = require('unocss');
+
+const DEFAULT_PREFIX = "vin-";
+class PresetCore {
+  constructor(options) {
+    this.prefix = options.prefix ?? "";
+    this.colorKeys = options.colorKeys ?? [];
+  }
+  genVariable(key = "") {
+    return `--${this.prefix}${key}`;
+  }
+  remapVariables({ tokens, key = "" }) {
+    return Object.keys(tokens).reduce((prev, acc) => {
+      const _key = `${this.genVariable(key)}${jsUtilities.toKebabCase(acc)}`;
+      prev[_key] = tokens[acc];
+      return prev;
+    }, {});
+  }
+  getColorKeys() {
+    return Array.from(new Set(this.colorKeys));
+  }
+}
+
+class Color extends PresetCore {
+  constructor(options) {
+    super(options);
+  }
+  getRules() {
+    return [
+      this.getTextRule(),
+      this.getBgRule()
+    ];
+  }
+  getTextRule() {
+    return [
+      /^text-(?<body>(?:on-)?(?<color>.+))/,
+      ({ groups }) => {
+        const { body, color } = groups;
+        if (!this.getColorKeys().includes(color)) {
+          return;
+        }
+        const colorBody = /^on-[a-z]/.test(body) ? `on-${color}` : color;
+        const colorVar = this.genVariable(`theme-${colorBody}`);
+        return {
+          "--un-color-opacity": 1,
+          "color": `rgba(var(${colorVar}), var(--un-color-opacity))`
+        };
+      },
+      { layer: "vinicunca" }
+    ];
+  }
+  getBgRule() {
+    return [
+      /^bg-(.+)$/,
+      ([, body]) => {
+        if (!this.colorKeys.includes(body)) {
+          return;
+        }
+        const bgColorVar = this.genVariable(`theme-${body}`);
+        const colorVar = this.genVariable(`theme-on-${body}`);
+        return {
+          "--un-color-opacity": 1,
+          "--un-bg-opacity": 1,
+          "background-color": `rgba(var(${bgColorVar}),var(--un-bg-opacity))`,
+          "color": `rgba(var(${colorVar}), var(--un-color-opacity))`
+        };
+      },
+      { layer: "vinicunca" }
+    ];
+  }
+}
+
+const COLOR_RING_OFFSET = "rgba(0, 0, 0, 0.2)";
+const COLOR_RING_SHADOW = "rgba(0, 0, 0, 0.14)";
+const COLOR_SHADOW = "rgba(0, 0, 0, 0.12)";
+const ELEVATION_DICTIONARY = {
+  0: [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]],
+  1: [[0, 2, 1, -1], [0, 1, 1, 0], [0, 1, 3, 0]],
+  2: [[0, 3, 1, -2], [0, 2, 2, 0], [0, 1, 5, 0]],
+  3: [[0, 3, 3, -2], [0, 3, 4, 0], [0, 1, 8, 0]],
+  4: [[0, 2, 4, -1], [0, 4, 5, 0], [0, 1, 10, 0]],
+  5: [[0, 3, 5, -1], [0, 5, 8, 0], [0, 1, 14, 0]],
+  6: [[0, 3, 5, -1], [0, 6, 10, 0], [0, 1, 18, 0]],
+  7: [[0, 4, 5, -2], [0, 7, 10, 1], [0, 2, 16, 1]],
+  8: [[0, 5, 5, -3], [0, 8, 10, 1], [0, 3, 14, 2]],
+  9: [[0, 5, 6, -3], [0, 9, 12, 1], [0, 3, 16, 2]],
+  10: [[0, 6, 6, -3], [0, 10, 14, 1], [0, 4, 18, 3]],
+  11: [[0, 6, 7, -4], [0, 11, 15, 1], [0, 4, 20, 3]],
+  12: [[0, 7, 8, -4], [0, 12, 17, 2], [0, 5, 22, 4]],
+  13: [[0, 7, 8, -4], [0, 13, 19, 2], [0, 5, 24, 4]],
+  14: [[0, 7, 9, -4], [0, 14, 21, 2], [0, 5, 26, 4]],
+  15: [[0, 8, 9, -5], [0, 15, 22, 2], [0, 6, 28, 5]],
+  16: [[0, 8, 10, -5], [0, 16, 24, 2], [0, 6, 30, 5]],
+  17: [[0, 8, 11, -5], [0, 17, 26, 2], [0, 6, 32, 5]],
+  18: [[0, 9, 11, -5], [0, 18, 28, 2], [0, 7, 34, 6]],
+  19: [[0, 9, 12, -6], [0, 19, 29, 2], [0, 7, 36, 6]],
+  20: [[0, 1, 13, -6], [0, 20, 31, 3], [0, 8, 38, 7]],
+  21: [[0, 1, 13, -6], [0, 21, 33, 3], [0, 8, 40, 7]],
+  22: [[0, 1, 14, -6], [0, 22, 35, 3], [0, 8, 42, 7]],
+  23: [[0, 1, 14, -7], [0, 23, 36, 3], [0, 9, 44, 8]],
+  24: [[0, 1, 15, -7], [0, 24, 38, 3], [0, 9, 46, 8]]
+};
+class Elevation {
+  getRules() {
+    return [
+      this.getBaseRule()
+    ];
+  }
+  addPixels(value) {
+    return value.map((v) => jsUtilities.convertToUnit(v)).join(" ");
+  }
+  getBaseRule() {
+    return [
+      /^elevation-([\d.]+)$/,
+      ([, body]) => {
+        const elevation = ELEVATION_DICTIONARY[body];
+        if (!elevation) {
+          return;
+        }
+        const [ringOffset, ringShadow, shadow] = elevation;
+        const unRingOffsetShadow = this.addPixels(ringOffset);
+        const unRingShadow = this.addPixels(ringShadow);
+        const unShadow = this.addPixels(shadow);
+        return {
+          "--un-ring-offset-shadow": `${unRingOffsetShadow} ${COLOR_RING_OFFSET}`,
+          "--un-ring-shadow": `${unRingShadow} ${COLOR_RING_SHADOW}`,
+          "--un-shadow": `${unShadow} ${COLOR_SHADOW}`,
+          "box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)"
+        };
+      },
+      { layer: "vinicunca" }
+    ];
+  }
+}
+
+const DEFAULT_THEME = {
+  light: {
+    dark: false,
+    colors: {
+      "background": "#FFFFFF",
+      "invert": "#000000",
+      "surface": "#FFFFFF",
+      "surface-variant": "#424242",
+      "on-surface-variant": "#EEEEEE",
+      "primary": "#1976D2",
+      "secondary": "#9c27b0",
+      "error": "#d32f2f",
+      "info": "#0288d1",
+      "success": "#2e7d32",
+      "warning": "#ed6c02"
+    },
+    variables: {
+      "border-color": "#000000",
+      "border-opacity": 0.12,
+      "high-emphasis-opacity": 0.87,
+      "medium-emphasis-opacity": 0.6,
+      "disabled-opacity": 0.38,
+      "idle-opacity": 0.04,
+      "hover-opacity": 0.04,
+      "focus-opacity": 0.12,
+      "selected-opacity": 0.08,
+      "activated-opacity": 0.12,
+      "pressed-opacity": 0.12,
+      "dragged-opacity": 0.08
+    }
+  },
+  dark: {
+    dark: true,
+    colors: {
+      "background": "#121212",
+      "invert": "#FFFFFF",
+      "surface": "#212121",
+      "surface-variant": "#BDBDBD",
+      "on-surface-variant": "#424242",
+      "primary": "#1565C0",
+      "secondary": "#7b1fa2",
+      "error": "#c62828",
+      "info": "#01579b",
+      "success": "#1b5e20",
+      "warning": "#e65100"
+    },
+    variables: {
+      "border-color": "#FFFFFF",
+      "border-opacity": 0.12,
+      "high-emphasis-opacity": 0.87,
+      "medium-emphasis-opacity": 0.6,
+      "disabled-opacity": 0.38,
+      "idle-opacity": 0.1,
+      "hover-opacity": 0.04,
+      "focus-opacity": 0.12,
+      "selected-opacity": 0.08,
+      "activated-opacity": 0.12,
+      "pressed-opacity": 0.16,
+      "dragged-opacity": 0.08
+    }
+  }
+};
+
+function createCssSelector({ selector, content }) {
+  return `${selector} { ${content.join(" ")} }`;
+}
+
+function generateRGBs(colors) {
+  const theme = {};
+  for (const color of Object.keys(colors)) {
+    let colorKey = color;
+    if (/^on-[a-z]/.test(color)) {
+      colorKey = jsUtilities.toCamelCase(color);
+    }
+    const data = presetMini.parseColor(color, {
+      colors: {
+        [colorKey]: colors[color]
+      }
+    });
+    if (data?.cssColor?.components) {
+      const colorValue = data.cssColor.components.join(",");
+      theme[color] = colorValue;
+    }
+  }
+  return theme;
+}
+function colorToInt(color) {
+  let rgb;
+  if (typeof color === "number") {
+    rgb = color;
+  } else if (typeof color === "string") {
+    let c = color.startsWith("#") ? color.substring(1) : color;
+    if (c.length === 3) {
+      c = c.split("").map((char) => char + char).join("");
+    }
+    if (c.length !== 6 && c.length !== 8) {
+      console.warn(`'${color}' is not a valid rgb color`);
+    }
+    rgb = parseInt(c, 16);
+  } else {
+    throw new TypeError(`Colors can only be numbers or strings, recieved ${color == null ? color : color.constructor.name} instead`);
+  }
+  if (rgb < 0) {
+    console.warn(`Colors cannot be negative: '${color}'`);
+    rgb = 0;
+  } else if (rgb > 4294967295 || isNaN(rgb)) {
+    console.warn(`'${color}' is not a valid rgb color`);
+    rgb = 16777215;
+  }
+  return rgb;
+}
+
+const mainTRC = 2.4;
+const Rco = 0.2126729;
+const Gco = 0.7151522;
+const Bco = 0.072175;
+const normBG = 0.55;
+const normTXT = 0.58;
+const revTXT = 0.57;
+const revBG = 0.62;
+const blkThrs = 0.03;
+const blkClmp = 1.45;
+const deltaYmin = 5e-4;
+const scaleBoW = 1.25;
+const scaleWoB = 1.25;
+const loConThresh = 0.078;
+const loConFactor = 12.82051282051282;
+const loConOffset = 0.06;
+const loClip = 1e-3;
+function APCAcontrast(text, background) {
+  const Rtxt = ((text >> 16 & 255) / 255) ** mainTRC;
+  const Gtxt = ((text >> 8 & 255) / 255) ** mainTRC;
+  const Btxt = ((text >> 0 & 255) / 255) ** mainTRC;
+  const Rbg = ((background >> 16 & 255) / 255) ** mainTRC;
+  const Gbg = ((background >> 8 & 255) / 255) ** mainTRC;
+  const Bbg = ((background >> 0 & 255) / 255) ** mainTRC;
+  let Ytxt = Rtxt * Rco + Gtxt * Gco + Btxt * Bco;
+  let Ybg = Rbg * Rco + Gbg * Gco + Bbg * Bco;
+  if (Ytxt <= blkThrs) {
+    Ytxt += (blkThrs - Ytxt) ** blkClmp;
+  }
+  if (Ybg <= blkThrs) {
+    Ybg += (blkThrs - Ybg) ** blkClmp;
+  }
+  if (Math.abs(Ybg - Ytxt) < deltaYmin) {
+    return 0;
+  }
+  let outputContrast;
+  if (Ybg > Ytxt) {
+    const SAPC = (Ybg ** normBG - Ytxt ** normTXT) * scaleBoW;
+    outputContrast = SAPC < loClip ? 0 : SAPC < loConThresh ? SAPC - SAPC * loConFactor * loConOffset : SAPC - loConOffset;
+  } else {
+    const SAPC = (Ybg ** revBG - Ytxt ** revTXT) * scaleWoB;
+    outputContrast = SAPC > -loClip ? 0 : SAPC > -loConThresh ? SAPC - SAPC * loConFactor * loConOffset : SAPC + loConOffset;
+  }
+  return outputContrast * 100;
+}
+
+class Theme extends PresetCore {
+  constructor(options) {
+    super(options);
+    const parsedOptions = this.parseThemeOptions(options?.themes);
+    this.themes = this.parseTheme(parsedOptions);
+    this.preflights = options?.preflights ?? {};
+  }
+  getPreflight() {
+    return {
+      layer: "preflight",
+      getCSS: () => {
+        const lines = [];
+        lines.push(createCssSelector({
+          selector: "root:",
+          content: [
+            core.entriesToCss(Object.entries(this.remapVariables({ tokens: this.preflights })))
+          ]
+        }));
+        return lines.join("");
+      }
+    };
+  }
+  getRules() {
+    return [
+      this.getVariablesRule()
+    ];
+  }
+  parseThemeOptions(options) {
+    if (!options) {
+      return DEFAULT_THEME;
+    }
+    return jsUtilities.mergeDeep(
+      DEFAULT_THEME,
+      { ...options }
+    );
+  }
+  parseTheme(_themes) {
+    const acc = {};
+    for (const [name, original] of Object.entries(_themes)) {
+      const theme = acc[name] = {
+        ...original,
+        colors: {
+          ...original.colors
+        }
+      };
+      for (const color of Object.keys(theme.colors)) {
+        if (/^on-[a-z]/.test(color) || theme.colors[`on-${color}`]) {
+          continue;
+        }
+        const onColor = `on-${color}`;
+        const colorValue = colorToInt(theme.colors[color]);
+        const blackContrast = Math.abs(APCAcontrast(0, colorValue));
+        const whiteContrast = Math.abs(APCAcontrast(16777215, colorValue));
+        theme.colors[onColor] = whiteContrast > Math.min(blackContrast, 50) ? "#fff" : "#000";
+        this.colorKeys.push(color);
+      }
+    }
+    return acc;
+  }
+  getVariablesRule() {
+    return [
+      new RegExp(`^theme-(?<name>${Object.keys(this.themes).join("|")})$`),
+      ({ groups }) => {
+        if (!groups?.name) {
+          return {};
+        }
+        const themeName = this.themes[groups.name];
+        const themeColors = themeName.colors ?? {};
+        const rgbs = generateRGBs(themeColors);
+        return {
+          "color-scheme": themeName.dark ? "dark" : "light",
+          ...this.remapVariables({ tokens: rgbs, key: "theme-" }),
+          ...this.remapVariables({ tokens: themeName.variables })
+        };
+      },
+      { layer: "vinicunca" }
+    ];
+  }
+}
+
+class Button extends PresetCore {
+  constructor(options) {
+    super(options);
+    this.sizes = options.sizes ?? {};
+    this.variants = options.variants ?? {};
+  }
+  transformClass(content) {
+    const reSize = new RegExp(`(${Object.keys(this.sizes).join("|")})`);
+    return content.replace(
+      new RegExp(`(${this.prefix}button)(?:--\\[((?:[\\w\\s-])+?)\\])`, "gm"),
+      (_from, pre, props = "") => {
+        const results = [];
+        const [size] = props.match(reSize) ?? [];
+        const [variant] = props.match(/outline|text|circle/) ?? [];
+        const [, color] = props.match(/brand-(\w+)/) ?? [];
+        results.push(pre + `--size-${size ?? "default"}`);
+        const variants = variant ?? "default";
+        results.push(pre + `--variant-${variants}`);
+        const hasVariants = variants !== "default";
+        if (color) {
+          if (hasVariants) {
+            results.push(`${this.prefix}text-${color}`);
+            results.push(`hover:${this.prefix}text-on-${color}`);
+            results.push(`hover:before:${this.prefix}bg-${color}`);
+          } else {
+            results.push(`${this.prefix}bg-${color}`);
+          }
+        } else if (hasVariants) {
+          results.push(`hover:${this.prefix}text-on-invert`);
+          results.push(`hover:before:${this.prefix}bg-invert`);
+        }
+        return results.join(" ");
+      }
+    );
+  }
+  getRules() {
+    return [];
+  }
+  getShortcuts() {
+    return [
+      [
+        /^button$/,
+        () => {
+          const size = this.sizes.default ?? "";
+          const variant = this.variants.default ?? "";
+          return `${size} ${variant}`;
+        },
+        { layer: "vinicunca" }
+      ],
+      [
+        new RegExp(`^button--size-(?<size>${Object.keys(this.sizes).join("|")})?$`),
+        ({ groups }) => {
+          const size = groups?.size || "default";
+          return this.sizes[size] ?? "";
+        },
+        { layer: "vinicunca" }
+      ],
+      [
+        new RegExp(`^button--variant-(?<variant>${Object.keys(this.variants).join("|")})?$`),
+        ({ groups }) => {
+          const variant = groups?.variant || "elevated";
+          return this.variants[variant] ?? "";
+        },
+        { layer: "variants" }
+      ]
+    ];
+  }
+}
+
+class Overlay extends PresetCore {
+  constructor(options) {
+    super(options);
+    this.scrollBlockedClass = options.scrollBlockedClass ?? {};
+  }
+  getPreflight() {
+    return {
+      layer: "preflight",
+      getCSS: () => {
+        const lines = [];
+        lines.push(createCssSelector({
+          selector: `html.${this.scrollBlockedClass.name}`,
+          content: [
+            unocss.entriesToCss(Object.entries(this.scrollBlockedClass.html))
+          ]
+        }));
+        return lines.join("");
+      }
+    };
+  }
+  getShortcuts() {
+    const trimmedClass = this.scrollBlockedClass.name.replace(this.prefix, "");
+    return [
+      [
+        trimmedClass,
+        this.scrollBlockedClass.rules,
+        { layer: "vinicunca" }
+      ]
+    ];
+  }
+}
+
+class VinicuncaConfig {
+  constructor(options) {
+    const { prefix, components, theme } = options;
+    this.prefix = prefix ?? DEFAULT_PREFIX;
+    this.theme = new Theme({
+      prefix: this.prefix,
+      ...theme
+    });
+    const colorKeys = this.theme.getColorKeys();
+    this.color = new Color({
+      prefix: this.prefix,
+      colorKeys
+    });
+    this.elevation = new Elevation();
+    this.button = new Button({
+      prefix: this.prefix,
+      colorKeys,
+      ...components?.button
+    });
+    this.overlay = new Overlay({
+      prefix: this.prefix,
+      ...components?.overlay
+    });
+  }
+  getPreset() {
+    return {
+      name: "unocss-preset-vinicunca",
+      layers: {
+        preflight: -2,
+        vinicunca: -1,
+        default: 0,
+        variants: 1
+      },
+      prefix: this.prefix,
+      preflights: this.definePreflights(),
+      rules: this.defineRules(),
+      shortcuts: this.defineShortcuts()
+    };
+  }
+  getTransformer() {
+    return {
+      name: "vinicunca-transformers",
+      enforce: "pre",
+      transform: (str) => {
+        let content = str.toString();
+        content = this.button.transformClass(content);
+        str.overwrite(0, str.length(), content);
+      }
+    };
+  }
+  definePreflights() {
+    return [
+      this.theme.getPreflight(),
+      this.overlay.getPreflight()
+    ];
+  }
+  defineRules() {
+    return [
+      this.theme.getRules(),
+      this.color.getRules(),
+      this.elevation.getRules(),
+      this.button.getRules()
+    ].flat(1);
+  }
+  defineShortcuts() {
+    return [
+      ...this.button.getShortcuts(),
+      ...this.overlay.getShortcuts()
+    ];
+  }
+}
+
+function defineVinicuncaConfig(options = {}) {
+  return new VinicuncaConfig(options);
+}
+
+exports.defineVinicuncaConfig = defineVinicuncaConfig;