colbrush 1.5.0 → 1.7.0

package/dist/devtools.cjs

@@ -0,0 +1,296 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/devtools/index.ts
+var devtools_exports = {};
+__export(devtools_exports, {
+  SimulationFilter: () => SimulationFilter
+});
+module.exports = __toCommonJS(devtools_exports);
+
+// src/core/constants/simulation.ts
+var FILTER_ID = "cb-vision-filter";
+var FILTER_WRAPPER_ID = "cb-vision-filter-root";
+var DEFAULT_OPTIONS = {
+  defaultMode: "none",
+  paramKey: "vision",
+  storageKey: "colbrush:vision",
+  toolbarPosition: "left-bottom",
+  hotkey: true,
+  allowInProd: false
+};
+var MATRICES = {
+  deuteranopia: `
+    0.367  0.861 -0.228  0  0
+    0.280  0.673  0.047  0  0
+    -0.012  0.043  0.969  0  0
+    0.000  0.000  0.000  1  0
+  `,
+  protanopia: `
+    0.152  1.052  -0.204  0  0
+    0.115  0.786  0.099  0  0
+    -0.004  -0.048  1.052  0  0
+    0.000  0.000  0.000  1  0
+  `,
+  tritanopia: `
+    1.256	 -0.077  -0.179 0 0
+    -0.078	0.931	 0.148 0 0
+    0.005	 0.691	0.304 0 0
+    0.000  0.000  0.000  1  0
+  `
+};
+var IDENTITY_MATRIX = `
+1 0 0 0 0
+0 1 0 0 0
+0 0 1 0 0
+0 0 0 1 0
+`;
+function getMatrixForMode(mode) {
+  if (mode === "none") return IDENTITY_MATRIX;
+  return MATRICES[mode];
+}
+
+// src/devtools/vision/modes.ts
+var SIMULATION_MODES = [
+  "deuteranopia",
+  "protanopia",
+  "tritanopia"
+];
+var MODE_LABELS = {
+  English: {
+    none: "default",
+    protanopia: "protanopia",
+    deuteranopia: "deuteranopia",
+    tritanopia: "tritanopia"
+  },
+  Korean: {
+    none: "\uAEBC\uC9D0",
+    protanopia: "\uC801\uC0C9\uB9F9",
+    deuteranopia: "\uB179\uC0C9\uB9F9",
+    tritanopia: "\uCCAD\uC0C9\uB9F9"
+  }
+};
+
+// src/react/SimulationFilter.tsx
+var import_react3 = require("react");
+
+// src/react/ThemeProvider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ThemeContext = (0, import_react.createContext)({
+  theme: "default",
+  language: "English",
+  updateTheme: () => {
+  },
+  updateLanguage: () => {
+  },
+  simulationFilter: "none",
+  setSimulationFilter: () => {
+  }
+});
+var useTheme = () => (0, import_react.useContext)(ThemeContext);
+
+// src/react/VisionPortal.tsx
+var import_react2 = require("react");
+var import_react_dom = require("react-dom");
+var PORTAL_ID = "cb-vision-portal";
+var portalEl = null;
+var activeOwner = null;
+function ensurePortal() {
+  if (typeof document === "undefined")
+    throw new Error("No document available");
+  if (portalEl && document.body.contains(portalEl)) return portalEl;
+  const existing = document.getElementById(PORTAL_ID);
+  portalEl = existing ?? Object.assign(document.createElement("div"), { id: PORTAL_ID });
+  if (!existing) document.body.appendChild(portalEl);
+  return portalEl;
+}
+function VisionFilterPortal({
+  visible = true,
+  children
+}) {
+  const [container, setContainer] = (0, import_react2.useState)(null);
+  const ownerId = (0, import_react2.useRef)(Symbol("VisionFilterPortal"));
+  (0, import_react2.useEffect)(() => {
+    try {
+      const el = ensurePortal();
+      setContainer(el);
+      if (activeOwner === null) activeOwner = ownerId.current;
+    } catch {
+      setContainer(null);
+    }
+    return () => {
+      if (activeOwner === ownerId.current) {
+        activeOwner = null;
+      }
+    };
+  }, []);
+  const isPrimary = container !== null && activeOwner === ownerId.current;
+  const enabled = Boolean(isPrimary && visible);
+  (0, import_react2.useEffect)(() => {
+    if (!enabled || typeof document === "undefined") return;
+    const fallback = document.getElementById(FILTER_WRAPPER_ID);
+    if (fallback instanceof SVGSVGElement && fallback.dataset.cbVisionManaged === "fallback") {
+      fallback.remove();
+    }
+  }, [enabled]);
+  if (!container || !isPrimary) return null;
+  return (0, import_react_dom.createPortal)(isPrimary ? children : null, container);
+}
+
+// src/react/SimulationFilter.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_meta = {};
+var originalFilterMap = /* @__PURE__ */ new WeakMap();
+var IS_DEV = (() => {
+  if (typeof process !== "undefined" && true) {
+    return true;
+  }
+  if (typeof import_meta !== "undefined" && typeof import_meta.env?.MODE === "string") {
+    return import_meta.env.MODE !== "production";
+  }
+  if (typeof window !== "undefined") {
+    const host = window.location.hostname;
+    return host === "localhost" || host === "127.0.0.1";
+  }
+  return false;
+})();
+function resolveOptions(props) {
+  const { visible = true, ...options } = props ?? {};
+  const merged = {
+    ...DEFAULT_OPTIONS,
+    ...options,
+    toolbarPosition: options.toolbarPosition ?? DEFAULT_OPTIONS.toolbarPosition,
+    hotkey: options.hotkey ?? DEFAULT_OPTIONS.hotkey,
+    allowInProd: options.allowInProd ?? DEFAULT_OPTIONS.allowInProd
+  };
+  return { config: merged, visible };
+}
+function SimulationFilter(props) {
+  const { config, visible } = resolveOptions(props);
+  const { toolbarPosition, allowInProd } = config;
+  const [open, setOpen] = (0, import_react3.useState)(false);
+  const { simulationFilter, setSimulationFilter, language } = useTheme();
+  if (!visible) return null;
+  if (!allowInProd && !IS_DEV) return null;
+  const ANCHOR_CLASSES = {
+    "left-bottom": "left-[16px] bottom-[16px]",
+    "right-bottom": "right-[16px] bottom-[16px]",
+    "left-top": "left-[16px] top-[16px]",
+    "right-top": "right-[16px] top-[16px]"
+  };
+  const MODES = ["none", ...SIMULATION_MODES];
+  const anchorClass = ANCHOR_CLASSES[toolbarPosition] ?? ANCHOR_CLASSES["left-bottom"];
+  (0, import_react3.useEffect)(() => {
+    if (typeof document === "undefined") return;
+    const resolveTarget = () => {
+      const preferred = document.querySelector("[data-cb-vision-target]") ?? document.getElementById("root") ?? document.getElementById("__next");
+      if (preferred instanceof HTMLElement) return preferred;
+      const bodyChildren = Array.from(
+        document.body?.children ?? []
+      );
+      const fallback = bodyChildren.find(
+        (child) => child.id !== PORTAL_ID
+      );
+      return fallback ?? document.body;
+    };
+    const target = resolveTarget();
+    if (!(target instanceof HTMLElement)) return;
+    const style = target.style;
+    if (!originalFilterMap.has(target)) {
+      originalFilterMap.set(target, {
+        filter: style.filter ?? "",
+        webkitFilter: style.webkitFilter ?? ""
+      });
+    }
+    const snapshot = originalFilterMap.get(target) ?? {
+      filter: "",
+      webkitFilter: ""
+    };
+    const applyFilter = () => {
+      const filterValue = `url(#${FILTER_ID})`;
+      style.filter = filterValue;
+      style.webkitFilter = filterValue;
+    };
+    const clearFilter = () => {
+      style.filter = snapshot.filter;
+      style.webkitFilter = snapshot.webkitFilter;
+    };
+    if (simulationFilter === "none") {
+      clearFilter();
+      return;
+    }
+    applyFilter();
+    return () => {
+      clearFilter();
+    };
+  }, [simulationFilter]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(VisionFilterPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "svg",
+      {
+        id: FILTER_WRAPPER_ID,
+        "aria-hidden": "true",
+        "data-cb-vision-managed": "react",
+        preserveAspectRatio: "none",
+        style: {
+          position: "fixed",
+          inset: 0,
+          width: "100vw",
+          height: "100vh",
+          pointerEvents: "none",
+          zIndex: 2147483646
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("filter", { id: FILTER_ID, "data-cb-vision-managed": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "feColorMatrix",
+          {
+            type: "matrix",
+            values: getMatrixForMode(simulationFilter)
+          }
+        ) }) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        className: `cb-vision-toolbar h-[36px] fixed z-[100] inline-flex items-center gap-[6px] rounded-[10px] bg-[rgba(17,17,17,0.85)] p-[6px_8px] text-[12px] text-white opacity-90 shadow-[0_6px_18px_rgba(0,0,0,0.25)] backdrop-blur-[6px] ${anchorClass}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "span",
+            {
+              className: "font-medium hover:cursor-pointer",
+              onClick: () => setOpen(!open),
+              children: "Vision"
+            }
+          ),
+          open && MODES.map((value) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              type: "button",
+              className: `rounded-[6px] px-[6px] py-[3px] ${simulationFilter === value ? "bg-white text-black" : "hover:bg-[rgba(255,255,255,0.2)]"}`,
+              onClick: () => setSimulationFilter(value),
+              children: MODE_LABELS[language][value] ?? value
+            },
+            value
+          ))
+        ]
+      }
+    )
+  ] });
+}

package/dist/devtools.d.cts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type VisionMode = 'deuteranopia' | 'protanopia' | 'tritanopia' | 'none';
+interface VisionOptions {
+    /** 기본 모드. 기본값 'none' */
+    defaultMode?: VisionMode;
+    /** URL 토글 파라미터 키 (예: ?vision=deut), 기본값 'vision' */
+    paramKey?: string;
+    /** localStorage 키, 기본값 'colbrush:vision' */
+    storageKey?: string;
+    /** 개발 호스트 허용(정규식) — 기본: localhost/127/192.168.x */
+    devHostPattern?: RegExp;
+    /** 툴바 위치, 기본 'left-bottom' */
+    toolbarPosition?: 'left-bottom' | 'right-bottom' | 'left-top' | 'right-top';
+    /** 단축키 활성 여부, 기본 true (⌘/Ctrl + Alt + D) */
+    hotkey?: boolean;
+    /** 프로덕션에서도 강제로 허용(디버깅용). 기본 false */
+    allowInProd?: boolean;
+}
+
+type SimulationFilterProps = VisionOptions & {
+    visible?: boolean;
+};
+declare function SimulationFilter(props?: SimulationFilterProps): react_jsx_runtime.JSX.Element | null;
+
+export { SimulationFilter };

package/dist/devtools.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type VisionMode = 'deuteranopia' | 'protanopia' | 'tritanopia' | 'none';
+interface VisionOptions {
+    /** 기본 모드. 기본값 'none' */
+    defaultMode?: VisionMode;
+    /** URL 토글 파라미터 키 (예: ?vision=deut), 기본값 'vision' */
+    paramKey?: string;
+    /** localStorage 키, 기본값 'colbrush:vision' */
+    storageKey?: string;
+    /** 개발 호스트 허용(정규식) — 기본: localhost/127/192.168.x */
+    devHostPattern?: RegExp;
+    /** 툴바 위치, 기본 'left-bottom' */
+    toolbarPosition?: 'left-bottom' | 'right-bottom' | 'left-top' | 'right-top';
+    /** 단축키 활성 여부, 기본 true (⌘/Ctrl + Alt + D) */
+    hotkey?: boolean;
+    /** 프로덕션에서도 강제로 허용(디버깅용). 기본 false */
+    allowInProd?: boolean;
+}
+
+type SimulationFilterProps = VisionOptions & {
+    visible?: boolean;
+};
+declare function SimulationFilter(props?: SimulationFilterProps): react_jsx_runtime.JSX.Element | null;
+
+export { SimulationFilter };

package/dist/devtools.js

@@ -0,0 +1,260 @@
+import {
+  useTheme
+} from "./chunk-EFIJAMPH.js";
+
+// src/core/constants/simulation.ts
+var FILTER_ID = "cb-vision-filter";
+var FILTER_WRAPPER_ID = "cb-vision-filter-root";
+var DEFAULT_OPTIONS = {
+  defaultMode: "none",
+  paramKey: "vision",
+  storageKey: "colbrush:vision",
+  toolbarPosition: "left-bottom",
+  hotkey: true,
+  allowInProd: false
+};
+var MATRICES = {
+  deuteranopia: `
+    0.367  0.861 -0.228  0  0
+    0.280  0.673  0.047  0  0
+    -0.012  0.043  0.969  0  0
+    0.000  0.000  0.000  1  0
+  `,
+  protanopia: `
+    0.152  1.052  -0.204  0  0
+    0.115  0.786  0.099  0  0
+    -0.004  -0.048  1.052  0  0
+    0.000  0.000  0.000  1  0
+  `,
+  tritanopia: `
+    1.256	 -0.077  -0.179 0 0
+    -0.078	0.931	 0.148 0 0
+    0.005	 0.691	0.304 0 0
+    0.000  0.000  0.000  1  0
+  `
+};
+var IDENTITY_MATRIX = `
+1 0 0 0 0
+0 1 0 0 0
+0 0 1 0 0
+0 0 0 1 0
+`;
+function getMatrixForMode(mode) {
+  if (mode === "none") return IDENTITY_MATRIX;
+  return MATRICES[mode];
+}
+
+// src/devtools/vision/modes.ts
+var SIMULATION_MODES = [
+  "deuteranopia",
+  "protanopia",
+  "tritanopia"
+];
+var MODE_LABELS = {
+  English: {
+    none: "default",
+    protanopia: "protanopia",
+    deuteranopia: "deuteranopia",
+    tritanopia: "tritanopia"
+  },
+  Korean: {
+    none: "\uAEBC\uC9D0",
+    protanopia: "\uC801\uC0C9\uB9F9",
+    deuteranopia: "\uB179\uC0C9\uB9F9",
+    tritanopia: "\uCCAD\uC0C9\uB9F9"
+  }
+};
+
+// src/react/SimulationFilter.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/react/VisionPortal.tsx
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+var PORTAL_ID = "cb-vision-portal";
+var portalEl = null;
+var activeOwner = null;
+function ensurePortal() {
+  if (typeof document === "undefined")
+    throw new Error("No document available");
+  if (portalEl && document.body.contains(portalEl)) return portalEl;
+  const existing = document.getElementById(PORTAL_ID);
+  portalEl = existing ?? Object.assign(document.createElement("div"), { id: PORTAL_ID });
+  if (!existing) document.body.appendChild(portalEl);
+  return portalEl;
+}
+function VisionFilterPortal({
+  visible = true,
+  children
+}) {
+  const [container, setContainer] = useState(null);
+  const ownerId = useRef(Symbol("VisionFilterPortal"));
+  useEffect(() => {
+    try {
+      const el = ensurePortal();
+      setContainer(el);
+      if (activeOwner === null) activeOwner = ownerId.current;
+    } catch {
+      setContainer(null);
+    }
+    return () => {
+      if (activeOwner === ownerId.current) {
+        activeOwner = null;
+      }
+    };
+  }, []);
+  const isPrimary = container !== null && activeOwner === ownerId.current;
+  const enabled = Boolean(isPrimary && visible);
+  useEffect(() => {
+    if (!enabled || typeof document === "undefined") return;
+    const fallback = document.getElementById(FILTER_WRAPPER_ID);
+    if (fallback instanceof SVGSVGElement && fallback.dataset.cbVisionManaged === "fallback") {
+      fallback.remove();
+    }
+  }, [enabled]);
+  if (!container || !isPrimary) return null;
+  return createPortal(isPrimary ? children : null, container);
+}
+
+// src/react/SimulationFilter.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var originalFilterMap = /* @__PURE__ */ new WeakMap();
+var IS_DEV = (() => {
+  if (typeof process !== "undefined" && true) {
+    return true;
+  }
+  if (typeof import.meta !== "undefined" && typeof import.meta.env?.MODE === "string") {
+    return import.meta.env.MODE !== "production";
+  }
+  if (typeof window !== "undefined") {
+    const host = window.location.hostname;
+    return host === "localhost" || host === "127.0.0.1";
+  }
+  return false;
+})();
+function resolveOptions(props) {
+  const { visible = true, ...options } = props ?? {};
+  const merged = {
+    ...DEFAULT_OPTIONS,
+    ...options,
+    toolbarPosition: options.toolbarPosition ?? DEFAULT_OPTIONS.toolbarPosition,
+    hotkey: options.hotkey ?? DEFAULT_OPTIONS.hotkey,
+    allowInProd: options.allowInProd ?? DEFAULT_OPTIONS.allowInProd
+  };
+  return { config: merged, visible };
+}
+function SimulationFilter(props) {
+  const { config, visible } = resolveOptions(props);
+  const { toolbarPosition, allowInProd } = config;
+  const [open, setOpen] = useState2(false);
+  const { simulationFilter, setSimulationFilter, language } = useTheme();
+  if (!visible) return null;
+  if (!allowInProd && !IS_DEV) return null;
+  const ANCHOR_CLASSES = {
+    "left-bottom": "left-[16px] bottom-[16px]",
+    "right-bottom": "right-[16px] bottom-[16px]",
+    "left-top": "left-[16px] top-[16px]",
+    "right-top": "right-[16px] top-[16px]"
+  };
+  const MODES = ["none", ...SIMULATION_MODES];
+  const anchorClass = ANCHOR_CLASSES[toolbarPosition] ?? ANCHOR_CLASSES["left-bottom"];
+  useEffect2(() => {
+    if (typeof document === "undefined") return;
+    const resolveTarget = () => {
+      const preferred = document.querySelector("[data-cb-vision-target]") ?? document.getElementById("root") ?? document.getElementById("__next");
+      if (preferred instanceof HTMLElement) return preferred;
+      const bodyChildren = Array.from(
+        document.body?.children ?? []
+      );
+      const fallback = bodyChildren.find(
+        (child) => child.id !== PORTAL_ID
+      );
+      return fallback ?? document.body;
+    };
+    const target = resolveTarget();
+    if (!(target instanceof HTMLElement)) return;
+    const style = target.style;
+    if (!originalFilterMap.has(target)) {
+      originalFilterMap.set(target, {
+        filter: style.filter ?? "",
+        webkitFilter: style.webkitFilter ?? ""
+      });
+    }
+    const snapshot = originalFilterMap.get(target) ?? {
+      filter: "",
+      webkitFilter: ""
+    };
+    const applyFilter = () => {
+      const filterValue = `url(#${FILTER_ID})`;
+      style.filter = filterValue;
+      style.webkitFilter = filterValue;
+    };
+    const clearFilter = () => {
+      style.filter = snapshot.filter;
+      style.webkitFilter = snapshot.webkitFilter;
+    };
+    if (simulationFilter === "none") {
+      clearFilter();
+      return;
+    }
+    applyFilter();
+    return () => {
+      clearFilter();
+    };
+  }, [simulationFilter]);
+  return /* @__PURE__ */ jsxs(VisionFilterPortal, { children: [
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        id: FILTER_WRAPPER_ID,
+        "aria-hidden": "true",
+        "data-cb-vision-managed": "react",
+        preserveAspectRatio: "none",
+        style: {
+          position: "fixed",
+          inset: 0,
+          width: "100vw",
+          height: "100vh",
+          pointerEvents: "none",
+          zIndex: 2147483646
+        },
+        children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: FILTER_ID, "data-cb-vision-managed": "true", children: /* @__PURE__ */ jsx(
+          "feColorMatrix",
+          {
+            type: "matrix",
+            values: getMatrixForMode(simulationFilter)
+          }
+        ) }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `cb-vision-toolbar h-[36px] fixed z-[100] inline-flex items-center gap-[6px] rounded-[10px] bg-[rgba(17,17,17,0.85)] p-[6px_8px] text-[12px] text-white opacity-90 shadow-[0_6px_18px_rgba(0,0,0,0.25)] backdrop-blur-[6px] ${anchorClass}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "font-medium hover:cursor-pointer",
+              onClick: () => setOpen(!open),
+              children: "Vision"
+            }
+          ),
+          open && MODES.map((value) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `rounded-[6px] px-[6px] py-[3px] ${simulationFilter === value ? "bg-white text-black" : "hover:bg-[rgba(255,255,255,0.2)]"}`,
+              onClick: () => setSimulationFilter(value),
+              children: MODE_LABELS[language][value] ?? value
+            },
+            value
+          ))
+        ]
+      }
+    )
+  ] });
+}
+export {
+  SimulationFilter
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colbrush",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "A React theme switching library that makes it easy to apply color-blind accessible UI themes",
   "homepage": "https://colbrush.vercel.app",
   "repository": {
@@ -18,10 +18,21 @@
       "import": "./dist/client.js",
       "require": "./dist/client.cjs"
     },
+    "./devtools": {
+      "types": "./dist/devtools.d.ts",
+      "import": "./dist/devtools.js",
+      "require": "./dist/devtools.cjs"
+    },
     "./package.json": "./package.json"
   },
   "typesVersions": {
     "*": {
+      "devtools": [
+        "./dist/devtools.d.ts"
+      ],
+      "client": [
+        "./dist/client.d.ts"
+      ],
       "*": [
         "./dist/client.d.ts"
       ]