qstd 0.1.0

package/dist/server/index.js

@@ -0,0 +1,527 @@
+import { format, formatDistanceToNow, formatISO, isSameYear, isSameMonth, isSameDay, addSeconds, addMinutes, addHours, addDays, addWeeks, addBusinessDays, addMonths, addYears } from 'date-fns';
+import fs from 'fs';
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/shared/list.ts
+var list_exports = {};
+__export(list_exports, {
+  chunk: () => chunk,
+  create: () => create,
+  partition: () => partition,
+  zipWith: () => zipWith
+});
+function zipWith(fn, ...arrays) {
+  if (arrays.length === 0) return [];
+  const minLength = Math.min(...arrays.map((arr) => arr.length));
+  const result = [];
+  for (let i = 0; i < minLength; i++) {
+    const args = arrays.map((arr) => arr[i]);
+    result.push(fn(...args));
+  }
+  return result;
+}
+var create = (size, fn) => fn ? Array(size).fill(null).map(fn) : Array(size).fill(null);
+var partition = (xs, predicate) => xs.reduce(
+  ([truthList, falseList], x) => {
+    const passes = predicate(x);
+    if (passes) truthList.push(x);
+    else falseList.push(x);
+    return [truthList, falseList];
+  },
+  [[], []]
+);
+var chunk = (list, chunkSize) => {
+  const totalChunks = Math.ceil(list.length / chunkSize);
+  return Array.from({ length: totalChunks }, (_, i) => {
+    const start = i * chunkSize;
+    const end = i * chunkSize + chunkSize;
+    return list.slice(start, end);
+  });
+};
+
+// src/shared/dict.ts
+var dict_exports = {};
+__export(dict_exports, {
+  byteSizeOfObj: () => byteSizeOfObj,
+  exists: () => exists,
+  filter: () => filter,
+  isEmpty: () => isEmpty,
+  omit: () => omit,
+  partition: () => partition2,
+  pick: () => pick,
+  transform: () => transform
+});
+function byteSizeOfObj(o) {
+  const objectList = [];
+  const stack = [o];
+  const bytes = [0];
+  while (stack.length) {
+    const value = stack.pop();
+    if (value == null) bytes[0] += 4;
+    else if (typeof value === "boolean") bytes[0] += 4;
+    else if (typeof value === "string") bytes[0] += value.length * 2;
+    else if (typeof value === "number") bytes[0] += 8;
+    else if (typeof value === "object" && objectList.indexOf(value) === -1) {
+      objectList.push(value);
+      if (typeof value.byteLength === "number") bytes[0] += value.byteLength;
+      else if (value[Symbol.iterator]) {
+        for (const v of value) stack.push(v);
+      } else {
+        Object.keys(value).forEach((k) => {
+          bytes[0] += k.length * 2;
+          stack.push(value[k]);
+        });
+      }
+    }
+  }
+  return bytes[0];
+}
+var filter = (r, predicate) => Object.entries(r).reduce(
+  (store, [key, value]) => predicate(value) ? { ...store, [key]: value } : store,
+  {}
+);
+var transform = (r, transformFn) => Object.entries(r).reduce(
+  (store, [key, value]) => ({
+    ...store,
+    ...transformFn(key, value)
+  }),
+  {}
+);
+var partition2 = (r, predicate) => {
+  const passed = {};
+  const failed = {};
+  for (const key in r) {
+    if (predicate(key)) passed[key] = r[key];
+    else failed[key] = r[key];
+  }
+  return [passed, failed];
+};
+var exists = (obj) => {
+  return obj && typeof obj === "object" && Object.keys(obj).length > 0;
+};
+var isEmpty = (obj) => {
+  return !obj || Object.keys(obj).length === 0 && obj.constructor === Object;
+};
+var pick = (r, paths) => Object.entries(r).reduce(
+  (store, [key, value]) => paths.includes(key) ? { ...store, [key]: value } : store,
+  {}
+);
+var omit = (r, paths) => {
+  if (!r) {
+    throw new Error("[omit] item was not an object");
+  }
+  return Object.entries(r).reduce((store, [key, value]) => {
+    if (paths.includes(key)) {
+      return store;
+    } else {
+      store[key] = value;
+      return store;
+    }
+  }, {});
+};
+
+// src/shared/str.ts
+var str_exports = {};
+__export(str_exports, {
+  concat: () => concat,
+  countChar: () => countChar,
+  countWords: () => countWords,
+  createSentences: () => createSentences,
+  toCase: () => toCase
+});
+var createSentences = (text) => {
+  if (!text) return [];
+  return text?.replace(/([.?!])\s*(?=[A-Z])/g, "$1|").split("|");
+};
+var countWords = (text) => {
+  text = text.trim();
+  if (text.length === 0) {
+    return 0;
+  }
+  const wordPattern = /\w+/g;
+  const matches = text.match(wordPattern);
+  return matches ? matches.length : 0;
+};
+var concat = (xs, delimiter) => {
+  return xs.filter((x) => !!x).join(delimiter);
+};
+var countChar = (str, ch) => {
+  return str.split("").reduce((x, y) => y === ch ? x + 1 : x, 0);
+};
+var toCase = (text, opts) => {
+  switch (opts.to) {
+    case "title":
+      return text.charAt(0).toUpperCase() + text.slice(1);
+    case "snake":
+      return text.replace(
+        /[A-Z]/g,
+        (l, idx) => idx === 0 ? l.toLowerCase() : "_" + l.toLowerCase()
+      );
+    case "kebab": {
+      const lowered = text.toLowerCase().trim();
+      const cleaned = opts.clean ? lowered.replaceAll(/[:,]/g, "") : lowered;
+      return cleaned.replaceAll(/\s+/g, "-");
+    }
+    default:
+      return text;
+  }
+};
+
+// src/shared/int.ts
+var int_exports = {};
+__export(int_exports, {
+  clamp: () => clamp,
+  commaSeparateThousandths: () => commaSeparateThousandths,
+  formatBytes: () => formatBytes
+});
+var clamp = (num2, range) => Math.min(Math.max(num2, range.min), range.max);
+var isNumeric = (x) => {
+  return /^[0-9]+$/.test(x);
+};
+var commaSeparateThousandths = (n) => {
+  if (typeof n === "string" && !isNumeric(n)) {
+    throw new Error(`[comma separate thousandths] Value ${n} must be a number`);
+  }
+  return Number(n).toLocaleString("en-US");
+};
+var formatBytes = (bytes, decimals = 1, binaryUnits = false) => {
+  if (!bytes) return {};
+  if (bytes === 0) return { value: 0, unit: "Bytes" };
+  const unitMultiple = binaryUnits ? 1024 : 1e3;
+  const unitNames = unitMultiple === 1024 ? ["Bytes", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"] : ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const unitChanges = Math.floor(Math.log(bytes) / Math.log(unitMultiple));
+  const value = parseFloat(
+    (bytes / Math.pow(unitMultiple, unitChanges)).toFixed(decimals || 0)
+  );
+  const unit = unitNames[unitChanges];
+  return { value, unit, display: `${value}${unit}` };
+};
+
+// src/shared/money.ts
+var money_exports = {};
+__export(money_exports, {
+  convertToCents: () => convertToCents,
+  convertToUsd: () => convertToUsd
+});
+var convertToUsd = (cents, opts = {}) => {
+  if (!cents) return;
+  const dollars = (Number(cents) / 100).toLocaleString("en-US", {
+    style: "currency",
+    currency: "USD"
+  });
+  const showSymbol = opts.symbol ?? true;
+  return showSymbol ? dollars : dollars.slice(1);
+};
+var convertToCents = (dollars) => {
+  const str = dollars.toString().replaceAll(/[\$,]+/g, "");
+  return Number(str) * 100;
+};
+
+// src/shared/time.ts
+var time_exports = {};
+__export(time_exports, {
+  adjustDate: () => adjustDate,
+  formatDate: () => formatDate,
+  formatDateRange: () => formatDateRange,
+  formatDuration: () => formatDuration,
+  formatThreadDateRange: () => formatThreadDateRange,
+  now: () => now,
+  sleep: () => sleep,
+  toMs: () => toMs
+});
+var formatDuration = (ms, options = {}) => {
+  if (ms === null || ms === void 0) return "--:--";
+  const { format: fmt = "clock", showZero = false } = options;
+  const totalSeconds = Math.floor(Math.abs(ms) / 1e3);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  if (fmt === "clock") {
+    if (hours > 0) {
+      return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+    }
+    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+  }
+  if (fmt === "full") {
+    const parts2 = [];
+    if (showZero) {
+      const hasHours = hours > 0;
+      const hasMinutes = minutes > 0;
+      const hasSeconds = seconds > 0;
+      if (hasHours || hasMinutes || hasSeconds) {
+        if (hasHours) parts2.push(`${hours} ${hours === 1 ? "hour" : "hours"}`);
+        if (hasHours || hasMinutes)
+          parts2.push(`${minutes} ${minutes === 1 ? "minute" : "minutes"}`);
+        parts2.push(`${seconds} ${seconds === 1 ? "second" : "seconds"}`);
+      } else {
+        parts2.push("0 seconds");
+      }
+    } else {
+      if (hours > 0) parts2.push(`${hours} ${hours === 1 ? "hour" : "hours"}`);
+      if (minutes > 0)
+        parts2.push(`${minutes} ${minutes === 1 ? "minute" : "minutes"}`);
+      if (seconds > 0)
+        parts2.push(`${seconds} ${seconds === 1 ? "second" : "seconds"}`);
+    }
+    return parts2.join(" ") || "0 seconds";
+  }
+  if (fmt === "fractional") {
+    const totalSecondsWithFraction = Math.abs(ms) / 1e3;
+    const totalMinutes = Math.floor(totalSecondsWithFraction / 60);
+    if (totalMinutes === 0) {
+      const fractionalSeconds = totalSecondsWithFraction.toFixed(1);
+      return `${fractionalSeconds}s`;
+    } else {
+      const remainingSeconds = totalSecondsWithFraction % 60;
+      const fractionalSeconds = remainingSeconds.toFixed(1);
+      return `${totalMinutes}m ${fractionalSeconds}s`;
+    }
+  }
+  const parts = [];
+  if (showZero) {
+    const hasHours = hours > 0;
+    const hasMinutes = minutes > 0;
+    const hasSeconds = seconds > 0;
+    if (hasHours || hasMinutes || hasSeconds) {
+      if (hasHours) parts.push(`${hours}h`);
+      if (hasHours || hasMinutes) parts.push(`${minutes}m`);
+      parts.push(`${seconds}s`);
+    } else {
+      parts.push("0s");
+    }
+  } else {
+    if (hours > 0) parts.push(`${hours}h`);
+    if (minutes > 0) parts.push(`${minutes}m`);
+    if (seconds > 0) parts.push(`${seconds}s`);
+  }
+  return parts.join(" ") || "0s";
+};
+var formatDate = (input, options = {}) => {
+  const { style = "medium", pattern, includeTime = false } = options;
+  let date2;
+  if (typeof input === "string") {
+    date2 = new Date(input);
+  } else if (typeof input === "number") {
+    date2 = new Date(input);
+  } else {
+    date2 = input;
+  }
+  if (isNaN(date2.getTime())) {
+    return "Invalid Date";
+  }
+  if (pattern) {
+    return format(date2, pattern);
+  }
+  switch (style) {
+    case "iso":
+      return formatISO(date2);
+    case "short":
+      return includeTime ? format(date2, "M/d/yy h:mm a") : format(date2, "M/d/yy");
+    case "medium":
+      return includeTime ? format(date2, "MMM d, yyyy h:mm a") : format(date2, "MMM d, yyyy");
+    case "long":
+      return includeTime ? format(date2, "MMMM d, yyyy 'at' h:mm a") : format(date2, "MMMM d, yyyy");
+    case "relative":
+      return formatDistanceToNow(date2, { addSuffix: true });
+    case "year":
+      return format(date2, "yyyy");
+    default:
+      return includeTime ? format(date2, "MMM d, yyyy h:mm a") : format(date2, "MMM d, yyyy");
+  }
+};
+var toDate = (input) => typeof input === "string" || typeof input === "number" ? new Date(input) : input;
+var formatDateRange = (startInput, endInput, options = {}) => {
+  const now2 = options.now ?? /* @__PURE__ */ new Date();
+  const showTimeWhenSameDay = options.showTimeWhenSameDay ?? true;
+  const markToday = options.markToday ?? true;
+  const todayLabel = options.todayLabel ?? "today";
+  const separator = options.separator ?? " - ";
+  const monthPattern = options.monthFormat === "long" ? "MMMM" : "MMM";
+  const lowercaseAmPm = options.lowercaseAmPm ?? true;
+  const { locale } = options;
+  let start = toDate(startInput);
+  let end = toDate(endInput);
+  if (start.getTime() > end.getTime()) {
+    const tmp = start;
+    start = end;
+    end = tmp;
+  }
+  if (isNaN(start.getTime()) || isNaN(end.getTime())) return "";
+  const sameYear = isSameYear(start, end);
+  const sameMonth = sameYear && isSameMonth(start, end);
+  const sameDay = sameMonth && isSameDay(start, end);
+  const isStartToday = isSameDay(start, now2);
+  const isEndToday = isSameDay(end, now2);
+  const appendToday = (base, isTodayFlag) => markToday && isTodayFlag ? `${base} (${todayLabel})` : base;
+  const fmt = (d, pattern) => locale ? format(d, pattern, { locale }) : format(d, pattern);
+  if (sameDay) {
+    const dayPart = appendToday(
+      fmt(start, `${monthPattern} d`),
+      isStartToday || isEndToday
+    );
+    if (!showTimeWhenSameDay) return dayPart;
+    const timePattern = "h:mma";
+    const formatTime = (d) => lowercaseAmPm ? fmt(d, timePattern).toLowerCase() : fmt(d, timePattern);
+    const startTime = formatTime(start);
+    const endTime = formatTime(end);
+    return `${dayPart}, ${startTime}${separator}${endTime}`;
+  }
+  if (sameMonth) {
+    const monthPart = fmt(start, monthPattern);
+    const startDay = fmt(start, "d");
+    const endDay = fmt(end, "d");
+    const startSegment = appendToday(startDay, isStartToday);
+    const endSegment = appendToday(endDay, isEndToday);
+    const yearPart = fmt(start, "yyyy");
+    return `${monthPart} ${startSegment}${separator}${endSegment}, ${yearPart}`;
+  }
+  if (sameYear) {
+    const startPart2 = appendToday(
+      fmt(start, `${monthPattern} d`),
+      isStartToday
+    );
+    const endPart2 = appendToday(fmt(end, `${monthPattern} d`), isEndToday);
+    const yearPart = fmt(start, "yyyy");
+    return `${startPart2}${separator}${endPart2}, ${yearPart}`;
+  }
+  const startPart = appendToday(
+    fmt(start, `${monthPattern} d, yyyy`),
+    isStartToday
+  );
+  const endPart = appendToday(fmt(end, `${monthPattern} d, yyyy`), isEndToday);
+  return `${startPart}${separator}${endPart}`;
+};
+var formatThreadDateRange = (startInput, endInput, options = {}) => formatDateRange(startInput, endInput, options);
+var adjustDate = (adjustment, baseDate = /* @__PURE__ */ new Date()) => {
+  let result = new Date(baseDate);
+  if (adjustment.seconds) result = addSeconds(result, adjustment.seconds);
+  if (adjustment.minutes) result = addMinutes(result, adjustment.minutes);
+  if (adjustment.hours) result = addHours(result, adjustment.hours);
+  if (adjustment.days) result = addDays(result, adjustment.days);
+  if (adjustment.weeks) result = addWeeks(result, adjustment.weeks);
+  if (adjustment.businessDays)
+    result = addBusinessDays(result, adjustment.businessDays);
+  if (adjustment.months) result = addMonths(result, adjustment.months);
+  if (adjustment.years) result = addYears(result, adjustment.years);
+  return result;
+};
+var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+var now = () => Date.now();
+var toMs = (value, unit = "seconds") => {
+  const multipliers = {
+    seconds: 1e3,
+    minutes: 60 * 1e3,
+    hours: 60 * 60 * 1e3,
+    days: 24 * 60 * 60 * 1e3,
+    weeks: 7 * 24 * 60 * 60 * 1e3,
+    months: 30 * 24 * 60 * 60 * 1e3,
+    // approximate
+    years: 365 * 24 * 60 * 60 * 1e3
+    // approximate
+  };
+  return value * multipliers[unit];
+};
+
+// src/shared/flow.ts
+var flow_exports = {};
+__export(flow_exports, {
+  asyncPool: () => asyncPool,
+  debounce: () => debounce,
+  sleep: () => sleep2,
+  throttle: () => throttle
+});
+var throttle = (fn, ms) => {
+  let time = Date.now();
+  return (...args) => {
+    if (time + ms - Date.now() < 0) {
+      fn(...args);
+      time = Date.now();
+    }
+  };
+};
+var debounce = (fn, timeout) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn(...args);
+    }, timeout);
+  };
+};
+var sleep2 = (ms) => new Promise((res) => setTimeout(res, ms));
+async function* asyncPool(concurrency, iterable, iterator_fn) {
+  const executing = /* @__PURE__ */ new Set();
+  const consume = async () => {
+    const [promise, value] = await Promise.race(executing);
+    executing.delete(promise);
+    return value;
+  };
+  for (const item2 of iterable) {
+    const promise = (async () => await iterator_fn(item2, iterable))().then(
+      (value) => [promise, value]
+    );
+    executing.add(promise);
+    if (executing.size >= concurrency) {
+      yield await consume();
+    }
+  }
+  while (executing.size) {
+    yield await consume();
+  }
+}
+
+// src/shared/random.ts
+var random_exports = {};
+__export(random_exports, {
+  coinFlip: () => coinFlip,
+  date: () => date,
+  hexColor: () => hexColor,
+  item: () => item,
+  num: () => num,
+  shuffle: () => shuffle
+});
+var item = (xs) => {
+  const rand = Math.random() * xs.length;
+  const flooredRand = Math.floor(rand);
+  return xs[flooredRand];
+};
+var num = (props = {}) => {
+  const { min = 0, max = Number.MAX_SAFE_INTEGER } = props;
+  return Math.floor(Math.pow(10, 14) * Math.random() * Math.random()) % (max - min + 1) + min;
+};
+var shuffle = (xs) => {
+  return xs.reduceRight((r, _, __, s) => {
+    const randomItem = s.splice(0 | Math.random() * s.length, 1)[0];
+    return r.push(randomItem), r;
+  }, []);
+};
+var coinFlip = () => {
+  return Math.random() < 0.5;
+};
+var date = () => {
+  return new Date(+/* @__PURE__ */ new Date() - Math.floor(Math.random() * 1e13));
+};
+var hexColor = () => {
+  const hex = Math.floor(Math.random() * 16777215).toString(16);
+  if (hex.length !== 6) {
+    console.warn(`${hex} was not 6 characters. Regenerating.`);
+    return hexColor();
+  }
+  return hex;
+};
+
+// src/server/file.ts
+var file_exports = {};
+__export(file_exports, {
+  readFile: () => readFile
+});
+var readFile = (filePath, encoding = "utf-8") => {
+  return fs.readFileSync(filePath, encoding);
+};
+
+export { dict_exports as Dict, file_exports as File, flow_exports as Flow, int_exports as Int, list_exports as List, money_exports as Money, random_exports as Random, str_exports as Str, time_exports as Time };

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "qstd",
+  "version": "0.1.0",
+  "description": "Standard Block component and utilities library with Panda CSS",
+  "author": "Eric Morrison",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/block/index.js",
+  "module": "./dist/block/index.mjs",
+  "types": "./dist/block/index.d.ts",
+  "exports": {
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.cjs"
+    },
+    "./client": {
+      "types": "./dist/client/index.d.ts",
+      "import": "./dist/client/index.js"
+    },
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "node": {
+        "import": "./dist/server/index.js",
+        "require": "./dist/server/index.cjs"
+      }
+    },
+    "./preset": {
+      "types": "./dist/preset/index.d.ts",
+      "import": "./dist/preset/index.js",
+      "require": "./dist/preset/index.cjs"
+    },
+    "./react/styles.css": "./dist/react/index.css"
+  },
+  "files": [
+    "dist",
+    "panda.config.ts",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": [
+    "dist/react/index.css"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.27.12",
+    "@fortawesome/fontawesome-svg-core": "^7.0.0",
+    "@fortawesome/free-brands-svg-icons": "^7.0.0",
+    "@fortawesome/free-regular-svg-icons": "^7.0.0",
+    "@fortawesome/free-solid-svg-icons": "^7.0.0",
+    "@fortawesome/react-fontawesome": "^3.0.1",
+    "date-fns": "^4.1.0",
+    "framer-motion": "^12.15.0",
+    "motion-dom": "^12.23.21",
+    "music-metadata-browser": "^2.5.11",
+    "nanoid": "^5.1.5",
+    "react-icons": "^5.5.0",
+    "react-loader-spinner": "^6.1.6",
+    "react-spinners": "^0.17.0",
+    "use-immer": "^0.11.0"
+  },
+  "devDependencies": {
+    "@pandacss/dev": "^1.2.0",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.8",
+    "@typescript-eslint/eslint-plugin": "^8.41.0",
+    "@typescript-eslint/parser": "^8.41.0",
+    "eslint": "^9.28.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.9.2",
+    "vitest": "^3.1.4"
+  },
+  "keywords": [
+    "react",
+    "component",
+    "ui",
+    "panda-css",
+    "utilities",
+    "typescript",
+    "hooks"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ericmorr/qstd"
+  },
+  "bugs": {
+    "url": "https://github.com/ericmorr/qstd/issues"
+  },
+  "homepage": "https://github.com/ericmorr/qstd#readme",
+  "scripts": {
+    "build": "panda codegen && panda cssgen && tsup && node scripts/inject-css-import.js",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:all": "pnpx tsx tests/test-all.ts",
+    "test:block": "node tests/test-block.tsx",
+    "test:playground": "node tests/playground-e2e.mjs",
+    "typecheck": "tsc --noEmit",
+    "typecheck:perf": "tsc --noEmit --extendedDiagnostics",
+    "typecheck:trace": "tsc --noEmit --generateTrace ./performance/ts-trace",
+    "analyze:tsserver": "bash performance/analyze-tsserver.sh",
+    "lint": "eslint src --ext ts,tsx"
+  }
+}

package/panda.config.ts

@@ -0,0 +1,68 @@
+import { defineConfig } from "@pandacss/dev";
+import qstdPreset from "./src/preset/index.js";
+
+/**
+ * QSTD Panda Config
+ *
+ * This config uses the exported preset from src/preset/index.ts to avoid duplicating
+ * style definitions. The preset contains all the shared configuration that consumers
+ * will also use (globalCss, theme, conditions, utilities).
+ *
+ * ARCHITECTURE:
+ * - src/preset/index.ts: Single source of truth for all styles (exported to consumers)
+ * - panda.config.ts: Uses the preset + adds build-specific config (include, outdir, etc.)
+ *
+ * DEPENDENCIES:
+ * - The preset MUST be in the presets array alongside Panda's base preset
+ * - Order matters: ["@pandacss/dev/presets", qstdPreset] ensures base colors/tokens load first
+ * - Any config defined here will extend/override preset values if needed
+ */
+export default defineConfig({
+  // Include Panda's base preset for default tokens (colors, spacing, etc.)
+  // Then include our qstd preset for custom utilities and semantic tokens
+  presets: ["@pandacss/dev/presets", qstdPreset],
+
+  // Whether to use css reset
+  preflight: true,
+
+  /**
+   * SOURCE FILES TO SCAN
+   *
+   * Panda scans these files to extract utility usage and generate CSS.
+   * For qstd development, we scan the source files (not dist) to enable:
+   * - Static extraction of utilities used in Block components
+   * - Type generation for TypeScript
+   * - CSS generation for the development environment
+   *
+   * NOTE: The commented line below would enable the css() function to work
+   * inside the qstd package itself (for runtime CSS generation).
+   * Uncomment if you need to use: import { css } from 'panda/css'
+   */
+  include: [
+    "./src/**/*.{ts,tsx,js,jsx}",
+    // "./dist/**/*.{js,mjs}", // Uncomment to enable css() function within qstd package
+  ],
+
+  exclude: [],
+
+  /**
+   * ALL STYLE DEFINITIONS COME FROM THE PRESET
+   *
+   * The preset (src/preset/index.ts) contains:
+   * - globalCss: Root styles and html defaults
+   * - theme: Semantic tokens, breakpoints, keyframes
+   * - conditions: Custom selectors (dark mode, hover, focus, etc.)
+   * - utilities: All custom utilities (flex, grid, rounded, etc.)
+   *
+   * By importing the preset in the presets array above, all these definitions
+   * are automatically included. No need to duplicate them here.
+   *
+   * If you need to add development-only utilities (like test utilities),
+   * you can extend them below in the utilities.extend section.
+   */
+
+  // The output directory for your css system
+  outdir: "styled-system",
+
+  jsxFramework: "react",
+});