@netoyed/ux4g-design-system-v3-cli 1.0.0

package/dist/ux4g.js

@@ -0,0 +1,622 @@
+#!/usr/bin/env node
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// bin/ux4g.js
+import { Command } from "commander";
+
+// commands/build.js
+import fg from "fast-glob";
+import path2 from "path";
+import fs5 from "fs";
+
+// config/loadConfig.js
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+// ../core/config/defaultConfig.js
+var defaultConfig = {
+  /**
+   * --------------------------------------------------
+   * CORE
+   * --------------------------------------------------
+   */
+  prefix: "ux4g-",
+  /**
+   * dev | build | cdn
+   * NOTE: CLI command will override this
+   */
+  mode: "build",
+  /**
+   * --------------------------------------------------
+   * CONTENT (used for purge / JIT)
+   * --------------------------------------------------
+   */
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx,vue,html}",
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+    "./**/*.php"
+  ],
+  /**
+   * --------------------------------------------------
+   * THEME (tokens)
+   * --------------------------------------------------
+   */
+  theme: {
+    colors: {
+      primary: {
+        50: "#EFF6FF",
+        500: "#3B82F6",
+        700: "#1D4ED8"
+      },
+      secondary: {
+        500: "#9333EA"
+      },
+      danger: {
+        500: "#EF4444"
+      }
+    },
+    spacing: {
+      0: "0px",
+      1: "4px",
+      2: "8px",
+      4: "16px",
+      6: "24px",
+      8: "32px"
+    },
+    fontSize: {
+      xs: "12px",
+      sm: "14px",
+      md: "16px",
+      lg: "18px",
+      xl: "20px"
+    },
+    fontWeight: {
+      regular: 400,
+      medium: 500,
+      bold: 700
+    },
+    radius: {
+      sm: "4px",
+      md: "8px",
+      lg: "12px",
+      xl: "16px"
+    },
+    shadow: {
+      sm: "0 1px 2px rgba(0,0,0,0.05)",
+      md: "0 4px 6px rgba(0,0,0,0.1)"
+    },
+    zIndex: {
+      dropdown: 1e3,
+      modal: 1100,
+      toast: 1200
+    }
+  },
+  /**
+   * --------------------------------------------------
+   * RESPONSIVE
+   * --------------------------------------------------
+   */
+  breakpoints: {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px"
+  },
+  /**
+   * --------------------------------------------------
+   * DARK MODE / THEMES
+   * --------------------------------------------------
+   */
+  darkMode: {
+    enabled: true,
+    strategy: "data-attribute",
+    // class | data-attribute
+    attribute: "data-theme",
+    themes: {
+      light: "light",
+      dark: "dark"
+    }
+  },
+  /**
+   * --------------------------------------------------
+   * SAFELIST (dynamic classes)
+   * --------------------------------------------------
+   */
+  safelist: [],
+  /**
+   * --------------------------------------------------
+   * COMPONENTS
+   * --------------------------------------------------
+   */
+  components: {
+    button: true,
+    card: true,
+    input: true,
+    modal: false
+  },
+  /**
+   * --------------------------------------------------
+   * PLUGINS
+   * --------------------------------------------------
+   */
+  plugins: [],
+  /**
+   * --------------------------------------------------
+   * OUTPUT
+   * --------------------------------------------------
+   */
+  output: {
+    dir: "dist",
+    file: "ux4g.css",
+    minify: true,
+    sourceMap: false
+  }
+};
+
+// config/mergeConfig.js
+function deepMerge(target, source) {
+  if (!isObject(target) || !isObject(source)) {
+    return source === void 0 ? target : source;
+  }
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    const sourceValue = source[key];
+    const targetValue = target[key];
+    if (sourceValue === void 0) continue;
+    if (Array.isArray(sourceValue)) {
+      result[key] = sourceValue;
+      continue;
+    }
+    if (isObject(sourceValue) && isObject(targetValue)) {
+      result[key] = deepMerge(targetValue, sourceValue);
+      continue;
+    }
+    result[key] = sourceValue;
+  }
+  return result;
+}
+function isObject(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+// config/loadConfig.js
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path.dirname(__filename);
+function loadUX4GConfig() {
+  const projectRoot = process.cwd();
+  const userConfigPath = path.join(projectRoot, "ux4g.config.js");
+  let userConfig = {};
+  if (fs.existsSync(userConfigPath)) {
+    try {
+      userConfig = __require(userConfigPath);
+    } catch (err) {
+      console.error("\u274C Failed to load ux4g.config.js");
+      console.error(err);
+      process.exit(1);
+    }
+  }
+  const finalConfig = deepMerge(
+    structuredClone(defaultConfig),
+    userConfig
+  );
+  finalConfig.prefix = "ux4g-";
+  finalConfig.content = normalizeContentPaths(
+    finalConfig.content,
+    projectRoot
+  );
+  finalConfig.output = normalizeOutput(finalConfig.output, projectRoot);
+  applyModeDefaults(finalConfig);
+  return finalConfig;
+}
+function normalizeContentPaths(content = [], root) {
+  return content.map(
+    (p) => path.isAbsolute(p) ? p : path.join(root, p)
+  );
+}
+function normalizeOutput(output = {}, root) {
+  const dir = output.dir || "dist";
+  const file = output.file || "ux4g.css";
+  return {
+    ...output,
+    dir: path.join(root, dir),
+    file,
+    filePath: path.join(root, dir, file)
+  };
+}
+function applyModeDefaults(config) {
+  if (config.mode === "dev") {
+    config.minify = false;
+    config.purge = false;
+  }
+  if (config.mode === "build") {
+    config.minify = true;
+    config.purge = true;
+  }
+  if (config.mode === "cdn") {
+    config.minify = true;
+    config.purge = false;
+    config.content = [];
+  }
+}
+
+// jit/scanner.js
+import fs2 from "fs";
+
+// jit/state.js
+import crypto from "crypto";
+
+// ../core/jit/state.js
+function createJITState() {
+  return {
+    usedClasses: /* @__PURE__ */ new Set(),
+    generatedCSS: /* @__PURE__ */ new Map()
+    // class → css
+  };
+}
+
+// jit/state.js
+function createJITState2(config) {
+  const state = createJITState();
+  state.fileHashes = /* @__PURE__ */ new Map();
+  state.configHash = hash(JSON.stringify(config));
+  return state;
+}
+function hash(input) {
+  return crypto.createHash("md5").update(input).digest("hex");
+}
+
+// jit/scanner.js
+function scanFiles(files, state, config) {
+  const found = /* @__PURE__ */ new Set();
+  const prefix = config.prefix.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
+  const CLASS_REGEX = new RegExp(`(sm:|md:|lg:|xl:)?${prefix}[a-z0-9\\-]+`, "g");
+  for (const file of files) {
+    const content = fs2.readFileSync(file, "utf8");
+    const contentHash = hash(content);
+    if (state.fileHashes.get(file) === contentHash) continue;
+    state.fileHashes.set(file, contentHash);
+    const matches = content.match(CLASS_REGEX);
+    if (matches) matches.forEach((c) => found.add(c));
+  }
+  return found;
+}
+
+// ../core/jit/registry.js
+var registry = {
+  // --- Spacing ---
+  "p": { type: "space", property: "padding" },
+  "pt": { type: "space", property: "padding-top" },
+  "pr": { type: "space", property: "padding-right" },
+  "pb": { type: "space", property: "padding-bottom" },
+  "pl": { type: "space", property: "padding-left" },
+  "px": { type: "space", property: ["padding-left", "padding-right"] },
+  "py": { type: "space", property: ["padding-top", "padding-bottom"] },
+  "m": { type: "space", property: "margin" },
+  "mt": { type: "space", property: "margin-top" },
+  "mr": { type: "space", property: "margin-right" },
+  "mb": { type: "space", property: "margin-bottom" },
+  "ml": { type: "space", property: "margin-left" },
+  "mx": { type: "space", property: ["margin-left", "margin-right"] },
+  "my": { type: "space", property: ["margin-top", "margin-bottom"] },
+  // --- Colors ---
+  "text": { type: "color", property: "color" },
+  "bg": { type: "color", property: "background-color" },
+  "border": { type: "color", property: "border-color" },
+  // --- Typography ---
+  "font": { type: "fontDetail", property: "font-weight" },
+  "text-size": { type: "text", property: "font-size" },
+  "leading": { type: "value", property: "line-height" },
+  "tracking": { type: "value", property: "letter-spacing" },
+  "align": { type: "static", property: "text-align" },
+  // text-center
+  // --- Layout ---
+  "flex": { type: "static", property: "display", value: "flex" },
+  "inline-flex": { type: "static", property: "display", value: "inline-flex" },
+  "grid": { type: "static", property: "display", value: "grid" },
+  "hidden": { type: "static", property: "display", value: "none" },
+  "block": { type: "static", property: "display", value: "block" },
+  "inline-block": { type: "static", property: "display", value: "inline-block" },
+  "items": { type: "static", property: "align-items" },
+  // start, end, center, baseline, stretch
+  "justify": { type: "static", property: "justify-content" },
+  // start, end, center, between, around, evenly
+  "self": { type: "static", property: "align-self" },
+  "flex-col": { type: "static", property: "flex-direction", value: "column" },
+  "flex-row": { type: "static", property: "flex-direction", value: "row" },
+  "flex-wrap": { type: "static", property: "flex-wrap", value: "wrap" },
+  "flex-nowrap": { type: "static", property: "flex-wrap", value: "nowrap" },
+  "gap": { type: "space", property: "gap" },
+  "gap-x": { type: "space", property: "column-gap" },
+  "gap-y": { type: "space", property: "row-gap" },
+  // --- Sizing ---
+  "w": { type: "size", property: "width" },
+  "h": { type: "size", property: "height" },
+  "min-w": { type: "size", property: "min-width" },
+  "min-h": { type: "size", property: "min-height" },
+  "max-w": { type: "size", property: "max-width" },
+  "max-h": { type: "size", property: "max-height" },
+  // --- Borders & Effects ---
+  "rounded": { type: "radius", property: "border-radius" },
+  "shadow": { type: "shadow", property: "box-shadow" },
+  "opacity": { type: "value", property: "opacity" },
+  "z": { type: "zIndex", property: "z-index" },
+  // --- Position ---
+  "absolute": { type: "static", property: "position", value: "absolute" },
+  "relative": { type: "static", property: "position", value: "relative" },
+  "fixed": { type: "static", property: "position", value: "fixed" },
+  "top": { type: "space", property: "top" },
+  "right": { type: "space", property: "right" },
+  "bottom": { type: "space", property: "bottom" },
+  "left": { type: "space", property: "left" }
+};
+
+// ../core/jit/generator.js
+function generateUtility(className, config) {
+  let bp = null;
+  let util = className;
+  if (className.includes(":")) {
+    [bp, util] = className.split(":");
+  }
+  let css = "";
+  if (!util.startsWith(config.prefix)) return null;
+  const coreUtil = util.replace(config.prefix, "");
+  for (const [key, def] of Object.entries(registry)) {
+    const prefix = `${key}-`;
+    if (coreUtil.startsWith(prefix)) {
+      const value = coreUtil.slice(prefix.length);
+      let varName = "";
+      if (def.type === "space") varName = `var(--${config.prefix}space-${value})`;
+      else if (def.type === "color") varName = `var(--${config.prefix}color-${value})`;
+      else if (def.type === "radius") varName = `var(--${config.prefix}radius-${value || "DEFAULT"})`;
+      else if (def.type === "shadow") varName = `var(--${config.prefix}shadow-${value || "DEFAULT"})`;
+      else if (def.type === "zIndex") varName = `var(--${config.prefix}zIndex-${value})`;
+      else if (def.type === "fontDetail") varName = `var(--${config.prefix}fontWeight-${value})`;
+      else if (def.type === "static") {
+        if (def.value) {
+          if (value !== "" && !def.allowValue) continue;
+          varName = def.value;
+        } else {
+          varName = value;
+        }
+      } else if (def.type === "size") {
+        if (config.theme.spacing[value]) {
+          varName = `var(--${config.prefix}space-${value})`;
+        } else if (value.includes("/")) {
+          const [num, den] = value.split("/");
+          varName = `${parseInt(num) / parseInt(den) * 100}%`;
+        } else {
+          continue;
+        }
+      } else continue;
+      const props = Array.isArray(def.property) ? def.property : [def.property];
+      const decls = def.type === "static" && def.value ? varName : props.map((p) => `${p}:${varName}`).join(";");
+      css = `.${escape(className)}{${decls};}`;
+      break;
+    }
+  }
+  if (!css) return null;
+  if (bp) {
+    const size = config.breakpoints[bp];
+    return `@media (min-width:${size}){${css}}`;
+  }
+  return css;
+}
+function escape(cls) {
+  return cls.replace(/:/g, "\\:");
+}
+
+// jit/writer.js
+import fs3 from "fs-extra";
+function writeCSS(state, outputPath) {
+  let css = "/* UX4G v3 \u2013 JIT build */\n";
+  for (const rule of state.generatedCSS.values()) {
+    css += rule + "\n";
+  }
+  fs3.ensureFileSync(outputPath);
+  fs3.writeFileSync(outputPath, css);
+}
+
+// plugins/runPlugins.js
+function runPlugins(hook, state, config) {
+  if (!config.plugins || !config.plugins.length) return;
+  for (const plugin of config.plugins) {
+    let pluginDef = plugin;
+    if (typeof plugin === "function") {
+      pluginDef = plugin();
+    }
+    if (!pluginDef || typeof pluginDef !== "object") continue;
+    if (typeof pluginDef[hook] === "function") {
+      const api = createPluginAPI(state, config);
+      pluginDef[hook](api);
+    }
+  }
+}
+function createPluginAPI(state, config) {
+  return {
+    addUtility(className, css) {
+      state.generatedCSS.set(className, css);
+    },
+    hasUtility(className) {
+      return state.generatedCSS.has(className);
+    },
+    theme(path3) {
+      return path3.split(".").reduce((o, k) => o == null ? void 0 : o[k], config.theme);
+    },
+    config(path3) {
+      return path3.split(".").reduce((o, k) => o == null ? void 0 : o[k], config);
+    }
+  };
+}
+
+// minify/minifyCSS.lightning.js
+import fs4 from "fs";
+import { transform } from "lightningcss";
+function minifyCSS(inputFile, outputFile) {
+  const css = fs4.readFileSync(inputFile, "utf8");
+  const result = transform({
+    filename: inputFile,
+    code: Buffer.from(css),
+    minify: true,
+    sourceMap: false,
+    targets: {
+      chrome: 90,
+      firefox: 90,
+      safari: 14,
+      edge: 90
+    }
+  });
+  fs4.writeFileSync(outputFile, result.code);
+}
+
+// ../core/config/preflight.js
+var preflight = `
+/* UX4G Preflight (Reset) */
+*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }
+html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: system-ui, sans-serif; }
+body { margin: 0; line-height: inherit; }
+hr { height: 0; color: inherit; border-top-width: 1px; }
+abbr:where([title]) { text-decoration: underline dotted; }
+h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
+a { color: inherit; text-decoration: inherit; }
+b, strong { font-weight: bolder; }
+code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; }
+small { font-size: 80%; }
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sub { bottom: -0.25em; }
+sup { top: -0.5em; }
+table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
+button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: inherit; color: inherit; margin: 0; padding: 0; }
+button, select { text-transform: none; }
+button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; }
+:-moz-focusring { outline: auto; }
+:-moz-ui-invalid { box-shadow: none; }
+progress { vertical-align: baseline; }
+::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
+[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
+::-webkit-search-decoration { -webkit-appearance: none; }
+::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
+summary { display: list-item; }
+blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }
+fieldset { margin: 0; padding: 0; }
+legend { padding: 0; }
+ol, ul, menu { list-style: none; margin: 0; padding: 0; }
+textarea { resize: vertical; }
+input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }
+button, [role="button"] { cursor: pointer; }
+:disabled { cursor: default; }
+img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
+img, video { max-width: 100%; height: auto; }
+[hidden] { display: none; }
+`;
+
+// commands/build.js
+async function build({ cdn = false, input, output } = {}) {
+  const config = loadUX4GConfig();
+  config.mode = cdn ? "cdn" : "build";
+  if (output) {
+    config.output.filePath = path2.resolve(process.cwd(), output);
+    config.output.dir = path2.dirname(config.output.filePath);
+  }
+  const state = createJITState2(config);
+  if (cdn) {
+    console.log("\u26A0\uFE0F  NOTE: Static CDN build is deprecated. Please use the Runtime Engine (@ux4g/cdn).");
+    console.log("   Include the following script in your HTML:");
+    console.log('   <script src="https://cdn.jsdelivr.net/npm/@netoyed/ux4g-design-system-v3-cdn/dist/ux4g.cdn.js"></script>');
+    return;
+  }
+  const files = await fg(config.content);
+  const classes = scanFiles(files, state, config);
+  config.safelist.forEach((rule) => {
+    if (typeof rule === "string") state.usedClasses.add(rule);
+  });
+  for (const cls of classes) {
+    state.usedClasses.add(cls);
+  }
+  for (const cls of state.usedClasses) {
+    const css = generateUtility(cls, config);
+    if (css) state.generatedCSS.set(cls, css);
+  }
+  runPlugins("beforeBuild", state, config);
+  let finalCSS = "";
+  let utilitiesCSS = Array.from(state.generatedCSS.values()).join("");
+  if (input) {
+    const inputPath = path2.resolve(process.cwd(), input);
+    if (fs5.existsSync(inputPath)) {
+      let inputContent = fs5.readFileSync(inputPath, "utf8");
+      inputContent = inputContent.replace("@ux4g base;", preflight);
+      inputContent = inputContent.replace("@ux4g utilities;", utilitiesCSS);
+      finalCSS = inputContent;
+    } else {
+      console.error(`\u274C Input file not found: ${inputPath}`);
+      process.exit(1);
+    }
+  } else {
+    finalCSS = preflight + "\n" + utilitiesCSS;
+  }
+  if (!fs5.existsSync(config.output.dir)) fs5.mkdirSync(config.output.dir, { recursive: true });
+  fs5.writeFileSync(config.output.filePath, finalCSS);
+  if (config.output.minify) {
+    const minFile = config.output.filePath.replace(".css", ".min.css");
+    minifyCSS(config.output.filePath, minFile);
+  }
+  runPlugins("afterBuild", state, config);
+  console.log(`\u2705 UX4G production build complete: ${config.output.filePath}`);
+  console.log(`   Import this file in your main app entry:`);
+  console.log(`   import './${path2.relative(process.cwd(), config.output.filePath).replace(/\\/g, "/")}';`);
+}
+
+// jit/watcher.js
+import chokidar from "chokidar";
+import fg2 from "fast-glob";
+function startWatcher(config, state) {
+  const watcher = chokidar.watch(config.content, {
+    ignoreInitial: true
+  });
+  watcher.on("all", async () => {
+    const files = await fg2(config.content);
+    const classes = scanFiles(files, state, config);
+    let changed = false;
+    for (const cls of classes) {
+      if (!state.generatedCSS.has(cls)) {
+        const css = generateUtility(cls, config);
+        if (css) {
+          state.generatedCSS.set(cls, css);
+          changed = true;
+        }
+      }
+    }
+    if (changed) {
+      writeCSS(state, config.output.filePath);
+      console.log("\u267B\uFE0F UX4G JIT updated");
+    }
+  });
+}
+
+// commands/watch.js
+async function watch() {
+  console.log("\u{1F440} Starting UX4G Watch Mode...");
+  await build({ cdn: false });
+  const config = loadUX4GConfig();
+  config.mode = "dev";
+  const state = createJITState2(config);
+  startWatcher(config, state);
+}
+
+// bin/ux4g.js
+var program = new Command();
+program.name("ux4g").description("UX4G Design System CLI").version("1.0.0");
+program.command("build").description("Build CSS for production").option("--cdn", "Build for CDN (Runtime Engine)").option("-i, --input <file>", "Input CSS file").option("-o, --output <file>", "Output CSS file").action((options) => {
+  build(options);
+});
+program.command("watch").description("Watch files for changes and rebuild CSS").action(() => {
+  watch();
+});
+program.parse();

package/package.json

@@ -0,0 +1,30 @@
+{
+	"name": "@netoyed/ux4g-design-system-v3-cli",
+	"version": "1.0.0",
+	"description": "CLI for UX4G Design System",
+	"type": "module",
+	"bin": {
+		"ux4g": "./dist/ux4g.js"
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "tsup bin/ux4g.js --format esm --out-dir dist --clean --platform node",
+		"prepublishOnly": "npm run build",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"devDependencies": {
+		"postcss": "^8.0.0",
+		"tsup": "^8.0.0",
+		"typescript": "^5.9.3"
+	},
+	"dependencies": {
+		"chokidar": "^5.0.0",
+		"colorette": "^2.0.20",
+		"commander": "^14.0.3",
+		"fast-glob": "^3.3.3",
+		"fs-extra": "^11.3.3",
+		"lightningcss": "^1.31.1"
+	}
+}