@greensight/gts 1.0.0-alpha.13 → 1.0.0-alpha.15

package/index.mjs

@@ -1,89 +1,89 @@
-var _ = Object.defineProperty;
-var ee = (s, e, r) => e in s ? _(s, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : s[e] = r;
-var b = (s, e, r) => ee(s, typeof e != "symbol" ? e + "" : e, r);
-import $ from "path";
-import { tsImport as re } from "ts-import";
-import { existsSync as S } from "node:fs";
-import { readFile as P, mkdir as te, writeFile as oe, rm as se } from "node:fs/promises";
-import { resolve as x } from "node:path";
+var z = Object.defineProperty;
+var K = (n, e, t) => e in n ? z(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var y = (n, e, t) => K(n, typeof e != "symbol" ? e + "" : e, t);
+import m from "path";
+import { tsImport as q } from "ts-import";
+import { existsSync as j } from "node:fs";
+import { readFile as T, mkdir as D, writeFile as H, rm as U } from "node:fs/promises";
+import { resolve as M } from "node:path";
 const h = class h {
   static resolveReadPath(e) {
     if (!e || !e.trim())
       throw new Error("File path must be a non-empty string");
-    return x(h.baseDir, e);
+    return M(h.baseDir, e);
   }
-  static resolveWritePath(e, r) {
-    const t = x(h.baseDir, r ?? "");
+  static resolveWritePath(e, t) {
+    const r = M(h.baseDir, t ?? "");
     return {
-      targetDir: t,
-      targetPath: x(t, e)
+      targetDir: r,
+      targetPath: M(r, e)
     };
   }
-  static handleReadError(e, r) {
-    throw e.code === "ENOENT" ? new Error(`File not found: ${r}`) : new Error(
-      `Failed to read file "${r}": ${e.message ?? String(e)}`
+  static handleReadError(e, t) {
+    throw e.code === "ENOENT" ? new Error(`File not found: ${t}`) : new Error(
+      `Failed to read file "${t}": ${e.message ?? String(e)}`
     );
   }
-  static async read(e, r = "utf8") {
-    const t = h.resolveReadPath(e);
+  static async read(e, t = "utf8") {
+    const r = h.resolveReadPath(e);
     try {
-      return await P(t, { encoding: r });
+      return await T(r, { encoding: t });
     } catch (o) {
-      h.handleReadError(o, t);
+      h.handleReadError(o, r);
     }
   }
   static async readBuffer(e) {
-    const r = h.resolveReadPath(e);
+    const t = h.resolveReadPath(e);
     try {
-      return await P(r);
-    } catch (t) {
-      h.handleReadError(t, r);
+      return await T(t);
+    } catch (r) {
+      h.handleReadError(r, t);
     }
   }
   static async readJson(e) {
-    const r = h.resolveReadPath(e);
+    const t = h.resolveReadPath(e);
     try {
-      const t = await P(r, { encoding: "utf8" });
+      const r = await T(t, { encoding: "utf8" });
       try {
-        return JSON.parse(t);
+        return JSON.parse(r);
       } catch (o) {
-        throw new Error(`Failed to parse JSON from "${r}": ${o.message}`);
+        throw new Error(`Failed to parse JSON from "${t}": ${o.message}`);
       }
-    } catch (t) {
-      h.handleReadError(t, r);
+    } catch (r) {
+      h.handleReadError(r, t);
     }
   }
-  static async write(e, r = "", t = {}) {
-    const { directory: o, overwrite: n = !0 } = t, { targetDir: a, targetPath: i } = h.resolveWritePath(e, o);
-    if (!n && S(i))
+  static async write(e, t = "", r = {}) {
+    const { directory: o, overwrite: s = !0 } = r, { targetDir: a, targetPath: i } = h.resolveWritePath(e, o);
+    if (!s && j(i))
       throw new Error(`File ${i} already exists`);
-    return await te(a, { recursive: !0 }), await oe(i, r, { encoding: "utf8" }), i;
+    return await D(a, { recursive: !0 }), await H(i, t, { encoding: "utf8" }), i;
   }
-  static async writeWithExtension(e, r, t = "", o) {
-    const n = r.startsWith(".") ? r : `.${r}`, a = `${e}${n}`;
-    return h.write(a, t, o);
+  static async writeWithExtension(e, t, r = "", o) {
+    const s = t.startsWith(".") ? t : `.${t}`, a = `${e}${s}`;
+    return h.write(a, r, o);
   }
   static exists(e) {
-    const r = h.resolveReadPath(e);
-    return S(r);
+    const t = h.resolveReadPath(e);
+    return j(t);
   }
-  static async delete(e, r) {
-    const { targetPath: t } = h.resolveWritePath(e, r);
-    S(t) && await se(t, { force: !0 });
+  static async delete(e, t) {
+    const { targetPath: r } = h.resolveWritePath(e, t);
+    j(r) && await U(r, { force: !0 });
   }
 };
-b(h, "baseDir", process.cwd());
-let m = h;
-const v = class v {
+y(h, "baseDir", process.cwd());
+let d = h;
+const b = class b {
   static async create() {
-    if (m.exists(v.configFileName))
+    if (d.exists(b.configFileName))
       throw new Error("The file already exists");
-    await m.write(v.configFileName, "", { overwrite: !1 });
+    await d.write(b.configFileName, "", { overwrite: !1 });
   }
   async load() {
     try {
-      const e = await re.compile(
-        `${$.resolve(process.cwd(), v.configFileName)}`
+      const e = await q.compile(
+        `${m.resolve(process.cwd(), b.configFileName)}`
       );
       if (!e) throw new Error();
       return e.default;
@@ -92,61 +92,61 @@ const v = class v {
     }
   }
 };
-b(v, "configFileName", "gts.config.ts");
-let E = v;
-const ne = (s) => {
+y(b, "configFileName", "gts.config.ts");
+let $ = b;
+const Q = (n) => {
   const e = new URLSearchParams();
-  return Object.keys(s).forEach((r) => {
-    Array.isArray(s[r]) ? s[r].forEach((t) => e.append(`${r}[]`, t)) : e.append(r, s[r]);
+  return Object.keys(n).forEach((t) => {
+    Array.isArray(n[t]) ? n[t].forEach((r) => e.append(`${t}[]`, r)) : e.append(t, n[t]);
   }), e;
-}, ae = (s, e = 50) => {
-  const r = [];
-  for (let t = 0; t < s.length; t += e)
-    r.push(s.slice(t, t + e));
-  return r;
+}, X = (n, e = 50) => {
+  const t = [];
+  for (let r = 0; r < n.length; r += e)
+    t.push(n.slice(r, r + e));
+  return t;
 };
-class V {
-  constructor(e, r) {
-    b(this, "figmaToken");
-    b(this, "fileId");
-    b(this, "onTimeMeasureHandler");
-    this.figmaToken = e, this.fileId = r;
+class v {
+  constructor(e, t) {
+    y(this, "figmaToken");
+    y(this, "fileId");
+    y(this, "onTimeMeasureHandler");
+    this.figmaToken = e, this.fileId = t;
   }
   setOnTimeMeasureHandler(e) {
     this.onTimeMeasureHandler = e;
   }
   static async returnJSON(e) {
-    const r = await e.json();
+    const t = await e.json();
     if (!e.ok) {
-      let t = "Request failed";
-      throw new Error(t);
+      let r = "Request failed";
+      throw new Error(r);
     }
-    return r;
+    return t;
   }
-  async performControlledRequest(e, { params: r = {}, timeout: t = 3e4, abortController: o = new AbortController() } = {}) {
-    var g;
+  async performControlledRequest(e, { params: t = {}, timeout: r = 3e4, abortController: o = new AbortController() } = {}) {
+    var p;
     if (!this.figmaToken || !this.fileId)
       throw new Error("Добавьте figmaToken и figmaId");
-    const n = Object.entries(r).reduce((u, [p, w]) => typeof w < "u" ? { ...u, [p]: w } : u, {}), a = `https://api.figma.com/v1${e}${n && Object.keys(n).length ? `?${ne(n)}` : ""}`;
+    const s = Object.entries(t).reduce((k, [W, C]) => typeof C < "u" ? { ...k, [W]: C } : k, {}), a = `https://api.figma.com/v1${e}${s && Object.keys(s).length ? `?${Q(s)}` : ""}`;
     console.log("endpoinWithParams=", a);
-    const i = setTimeout(() => o.abort(), t), l = {
+    const i = setTimeout(() => o.abort(), r), l = {
       "Content-Type": "application/json",
       ...this.figmaToken && { "X-Figma-Token": this.figmaToken }
     }, c = {
       method: "GET",
       headers: l,
       signal: o.signal
-    }, f = performance.now(), d = await fetch(`${a}`, c);
+    }, u = performance.now(), f = await fetch(`${a}`, c);
     clearTimeout(i);
-    const y = performance.now() - f;
-    return (g = this.onTimeMeasureHandler) == null || g.call(this, a, l, y), d;
+    const g = performance.now() - u;
+    return (p = this.onTimeMeasureHandler) == null || p.call(this, a, l, g), f;
   }
-  async request(e, r) {
+  async request(e, t) {
     var o;
-    const t = await this.performControlledRequest(e, {
-      ...r
+    const r = await this.performControlledRequest(e, {
+      ...t
     });
-    return (o = t.headers.get("content-type")) != null && o.includes("application/json") ? V.returnJSON(t) : t;
+    return (o = r.headers.get("content-type")) != null && o.includes("application/json") ? v.returnJSON(r) : r;
   }
   async getComponents() {
     return this.request(`/files/${this.fileId}/components`);
@@ -155,52 +155,88 @@ class V {
     return this.request(`/files/${this.fileId}/styles`);
   }
   async getNodes(e) {
-    const r = ae(e).map(
-      (n) => this.request(`/files/${this.fileId}/nodes`, { params: { ids: n.join(",") } })
-    ), t = await Promise.all(r);
+    const t = X(e).map(
+      (s) => this.request(`/files/${this.fileId}/nodes`, { params: { ids: s.join(",") } })
+    ), r = await Promise.all(t);
     return {
-      ...t[0],
-      nodes: t.reduce((n, a) => ({ ...n, ...a.nodes }), {})
+      ...r[0],
+      nodes: r.reduce((s, a) => ({ ...s, ...a.nodes }), {})
     };
   }
 }
-const q = (s, e) => {
-  const r = Array.isArray(e) ? e : e.split(".");
-  let t = s;
-  for (const o of r) {
-    if (t == null || typeof t != "object") return;
-    t = t[o];
+const Y = (n, e) => {
+  const t = Array.isArray(e) ? e : e.split(".");
+  let r = n;
+  for (const o of t) {
+    if (r == null || typeof r != "object") return;
+    r = r[o];
   }
-  return t;
-}, X = (s, e) => {
-  if (!e || typeof e != "object") return s;
-  if (!s || typeof s != "object") return e;
-  const r = { ...s };
-  for (const t in e)
-    e.hasOwnProperty(t) && (typeof e[t] == "object" && e[t] !== null && typeof r[t] == "object" && r[t] !== null ? r[t] = X(r[t], e[t]) : r[t] = e[t]);
   return r;
+}, N = (n, e) => {
+  if (!e || typeof e != "object") return n;
+  if (!n || typeof n != "object") return e;
+  const t = { ...n };
+  for (const r in e)
+    e.hasOwnProperty(r) && (typeof e[r] == "object" && e[r] !== null && typeof t[r] == "object" && t[r] !== null ? t[r] = N(t[r], e[r]) : t[r] = e[r]);
+  return t;
+};
+function E(n, e) {
+  if (n === e)
+    return !0;
+  if (n == null || e == null)
+    return n === e;
+  if (typeof n != typeof e)
+    return !1;
+  if (n instanceof Date && e instanceof Date)
+    return n.getTime() === e.getTime();
+  if (n instanceof RegExp && e instanceof RegExp)
+    return n.toString() === e.toString();
+  if (Array.isArray(n) && Array.isArray(e)) {
+    if (n.length !== e.length)
+      return !1;
+    for (let t = 0; t < n.length; t++)
+      if (!E(n[t], e[t]))
+        return !1;
+    return !0;
+  }
+  if (typeof n == "object" && typeof e == "object") {
+    const t = Object.keys(n), r = Object.keys(e);
+    if (t.length !== r.length)
+      return !1;
+    for (const o of t)
+      if (!r.includes(o) || !E(n[o], e[o]))
+        return !1;
+    return !0;
+  }
+  return !1;
+}
+const F = {
+  color: {},
+  effect: {},
+  text: {},
+  grid: {}
 };
-class ie {
+class Z {
   constructor(e) {
     // files
-    b(this, "tokensDir");
-    b(this, "manifestPath");
-    // figma data
-    b(this, "variables");
-    b(this, "styles");
+    y(this, "tokensDir");
+    y(this, "manifestPath");
+    // result data
+    y(this, "variables");
+    y(this, "styles");
     // flags
-    b(this, "loaded", !1);
-    this.tokensDir = e || "", this.manifestPath = $.join(this.tokensDir, "manifest.json");
+    y(this, "loaded", !1);
+    this.tokensDir = e || "", this.manifestPath = m.join(this.tokensDir, "manifest.json");
   }
   isLoaded() {
     return this.loaded && !!this.variables && !!this.styles;
   }
   /** to camelCase */
   normalizeKey(e) {
-    const r = e.trim();
-    return r && r.replace(/[-_\s]+/g, " ").split(" ").filter((t) => t.length).map((t, o) => {
-      const n = t.charAt(0), a = t.slice(1);
-      return o === 0 ? t.toLowerCase() : n.toUpperCase() + a;
+    const t = e.trim();
+    return t && t.replace(/[-_\s]+/g, " ").split(" ").filter((r) => r.length).map((r, o) => {
+      const s = r.charAt(0), a = r.slice(1);
+      return o === 0 ? r.toLowerCase() : s.toUpperCase() + a;
     }).join("");
   }
   /**
@@ -208,9 +244,9 @@ class ie {
    */
   parseVariableString(e) {
     if (typeof e != "string") return e;
-    const r = /^\{(.+)\}$/, t = e.match(r);
-    if (t) {
-      const o = t[1].trim();
+    const t = /^\{(.+)\}$/, r = e.match(t);
+    if (r) {
+      const o = r[1].trim();
       return `{${this.normalizeKey(o)}}`;
     }
     return e;
@@ -220,59 +256,59 @@ class ie {
    */
   createVariableFileList(e) {
     return Object.entries(e).flatMap(
-      ([r, t]) => Object.entries(t.modes).flatMap(
-        ([o, n]) => n.map((a) => ({
+      ([t, r]) => Object.entries(r.modes).flatMap(
+        ([o, s]) => s.map((a) => ({
           fileName: a,
           modeName: this.normalizeKey(o.trim()),
-          collectionName: r
+          collectionName: t
         }))
       )
     );
   }
   parseValue(e) {
-    return e && (typeof e == "string" ? this.parseVariableString(e) : typeof e != "object" ? e : (Array.isArray(e) && e.map((r) => this.parseValue(r)), Object.entries(e).reduce((r, [t, o]) => ({ ...r, [t]: this.parseValue(o) }), {})));
+    return e && (typeof e == "string" ? this.parseVariableString(e) : typeof e != "object" ? e : Array.isArray(e) ? e.map((t) => this.parseValue(t)) : Object.entries(e).reduce((t, [r, o]) => ({ ...t, [r]: this.parseValue(o) }), {}));
   }
-  getTokensFromFile(e, r) {
-    return Object.entries(e).reduce((t, [o, n]) => "$type" in n && "$value" in n ? {
-      ...t,
+  getTokensFromFile(e, t) {
+    return Object.entries(e).reduce((r, [o, s]) => "$type" in s && "$value" in s ? {
+      ...r,
       [this.normalizeKey(o)]: {
-        type: n.$type,
-        description: n.$description,
-        value: r ? { [this.normalizeKey(r)]: this.parseValue(n.$value) } : this.parseValue(n.$value)
+        type: s.$type,
+        description: s.$description,
+        value: t ? { [this.normalizeKey(t)]: this.parseValue(s.$value) } : this.parseValue(s.$value)
       }
-    } : { ...t, [this.normalizeKey(o)]: this.getTokensFromFile(n, r) }, {});
+    } : { ...r, [this.normalizeKey(o)]: this.getTokensFromFile(s, t) }, {});
   }
-  processTokensFile(e, r, t) {
-    const o = this.normalizeKey(t), n = this.getTokensFromFile(e, r);
-    return { [o]: n };
+  processTokensFile(e, t, r) {
+    const o = this.normalizeKey(r), s = this.getTokensFromFile(e, t);
+    return { [o]: s };
   }
   /**
    * Loads all variable files in parallel and returns processed results
    */
   async loadVariableFiles(e) {
     return Promise.all(
-      e.map(async ({ fileName: r, modeName: t, collectionName: o }) => {
+      e.map(async ({ fileName: t, modeName: r, collectionName: o }) => {
         try {
-          const n = $.join(this.tokensDir, r), a = await m.readJson(n);
-          return this.processTokensFile(a, t, o);
-        } catch (n) {
-          return console.warn(`Failed to load variable file: ${$.join(this.tokensDir, r)}`, n), {};
+          const s = m.join(this.tokensDir, t), a = await d.readJson(s);
+          return this.processTokensFile(a, r, o);
+        } catch (s) {
+          return console.warn(`Failed to load variable file: ${m.join(this.tokensDir, t)}`, s), {};
         }
       })
     );
   }
   mergeVariables(e) {
-    return e.reduce((r, t) => X(r, t), {});
+    return e.reduce((t, r) => N(t, r), {});
   }
   /**
    * Loads and processes all token variables from manifest collections
    */
   async loadTokenVariables(e) {
     try {
-      const r = this.createVariableFileList(e), t = await this.loadVariableFiles(r);
-      return this.mergeVariables(t);
-    } catch (r) {
-      throw new Error(`Failed to load token variables from ${this.tokensDir}: ${r}`);
+      const t = this.createVariableFileList(e), r = await this.loadVariableFiles(t);
+      return this.mergeVariables(r);
+    } catch (t) {
+      throw new Error(`Failed to load token variables from ${this.tokensDir}: ${t}`);
     }
   }
   /**
@@ -280,8 +316,8 @@ class ie {
    */
   createStyleFileList(e) {
     return Object.entries(e).flatMap(
-      ([r, t]) => (t == null ? void 0 : t.map((o) => ({
-        styleType: r,
+      ([t, r]) => (r == null ? void 0 : r.map((o) => ({
+        styleType: t,
         fileName: o
       }))) || []
     );
@@ -291,30 +327,32 @@ class ie {
    */
   async loadStyleFiles(e) {
     return (await Promise.all(
-      e.map(async ({ styleType: t, fileName: o }) => {
+      e.map(async ({ styleType: r, fileName: o }) => {
         try {
-          const n = $.join(this.tokensDir, o), a = await m.readJson(n);
-          return { styleType: t, styleTokens: a };
-        } catch (n) {
-          return console.warn(`Failed to load style file: ${$.join(this.tokensDir, o)}`, n), { styleType: t, styleTokens: {} };
+          const s = m.join(this.tokensDir, o), a = await d.readJson(s);
+          return { styleType: r, styleTokens: a };
+        } catch (s) {
+          return console.warn(`Failed to load style file: ${m.join(this.tokensDir, o)}`, s), { styleType: r, styleTokens: {} };
         }
       })
     )).reduce(
-      (t, o) => ({ ...t, [o.styleType]: this.getTokensFromFile(o.styleTokens, "") }),
-      {}
+      (r, o) => ({ ...r, [o.styleType]: this.getTokensFromFile(o.styleTokens, "") }),
+      {
+        ...F
+      }
     );
   }
   /**
    * Loads and processes all style tokens from manifest
    */
   async loadStyles(e) {
-    if (!e) return {};
-    const r = this.createStyleFileList(e);
-    return await this.loadStyleFiles(r);
+    if (!e) return { ...F };
+    const t = this.createStyleFileList(e);
+    return await this.loadStyleFiles(t);
   }
   async load() {
     if (this.loaded) return;
-    const e = await m.readJson(this.manifestPath);
+    const e = await d.readJson(this.manifestPath);
     if (!e)
       throw new Error(`Failed to load manifest file from: ${this.manifestPath}`);
     this.variables = await this.loadTokenVariables(e.collections), this.styles = await this.loadStyles(e.styles), this.loaded = !0;
@@ -351,27 +389,57 @@ class ie {
   getVariablePath(e) {
     return e.slice(1, -1);
   }
+  /**
+   * Resolves a variable reference by validating, parsing and getting the token
+   * @param value - Value to resolve (should be a variable reference like "{variable.path}")
+   * @param mode - Mode name to get value for (optional)
+   * @returns resolved token variable or undefined if not found or invalid
+   */
+  resolveVariableValue(e) {
+    if (typeof e == "object")
+      return Object.keys(e).reduce((t, r) => {
+        const o = e[r], s = this.resolveVariableValueString(o, r);
+        return s && (t[r] = s), t;
+      }, {});
+  }
+  /**
+   * Resolves a variable reference by validating, parsing and getting the token
+   * @param value - Value to resolve (should be a variable reference like "{variable.path}")
+   * @param mode - Mode name to get value for (optional)
+   * @returns resolved token variable or undefined if not found or invalid
+   */
+  resolveVariableValueString(e, t) {
+    if (!this.isVariableReference(e)) return e;
+    const r = this.getVariablePath(e), o = this.getToken(r, t);
+    if (o)
+      return this.resolveVariableValueString(o, t);
+  }
   /**
    * Gets a nested token value by path, similar to lodash.get
    * @param variablePath - Dot-separated string path or array of path segments
+   * @param mode - Mode name to get value for (optional)
    */
-  getToken(e) {
+  getToken(e, t) {
     if (!this.loaded || !this.variables)
       throw new Error("Tokens not loaded. Call load() first.");
-    const r = q(this.variables, e);
-    if (r && typeof r == "object") return r;
-    for (const [, t] of Object.entries(this.variables)) {
-      const o = q(t, e);
-      if (o != null && o.value) return o;
+    for (const r of Object.values(this.variables)) {
+      const o = Y(r, e);
+      if (o != null && o.value && typeof o.value == "object") {
+        if (t) return o.value[t];
+        {
+          const s = Object.keys(o.value)[0];
+          return o.value[s];
+        }
+      }
     }
   }
 }
-const Pe = async () => {
-  const e = await new E().load();
+const ot = async () => {
+  const e = await new $().load();
   if (!e)
     throw new Error("Заполнить ошибку через нейронку");
-  const { figmaToken: r, fileId: t, modules: o, manifest: n } = e, a = new V(r, t), i = new ie(n);
-  n && m.exists(n) && await i.load(), await Promise.all(
+  const { figmaToken: t, fileId: r, modules: o, manifest: s } = e, a = new v(t, r), i = new Z(s);
+  s && d.exists(s) && await i.load(), await Promise.all(
     // [
     //     colorsFromTokenManager({
     //         input: {
@@ -383,365 +451,681 @@ const Pe = async () => {
     //             stylesDir: './fromVariables',
     //         },
     //     }),
+    //     shadowsFromTokenManager({
+    //         input: {
+    //             // includeVariables: ['colors'],
+    //             // includeStyles: false,
+    //         },
+    //         output: {
+    //             jsonDir: './fromVariables',
+    //             stylesDir: './fromVariables',
+    //         },
+    //     }),
+    //     breakpointsFromTokenManager({
+    //         input: {
+    //             names: ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs', 'xxs', 'xxxs'],
+    //         },
+    //         output: {
+    //             jsonDir: './breakpoints',
+    //             stylesDir: './breakpoints',
+    //         },
+    //     }),
+    //     breakpointsListFromTokenManager({
+    //         input: {
+    //             names: ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs', 'xxs', 'xxxs'],
+    //         },
+    //         output: {
+    //             stylesDir: './breakpointsList',
+    //             fileName: 'breakpointsList',
+    //         },
+    //     }),
+    //     containerFromTokenManager({
+    //         input: {
+    //             containerWidth: 1200,
+    //             layer: 'lalala',
+    //             isModule: false,
+    //         },
+    //         output: {
+    //             stylesDir: './container',
+    //             fileName: 'containerCSS',
+    //         },
+    //     }),
+    //     typographyFromTokenManager({
+    //         input: {
+    //             isModule: true,
+    //             breakpoints: {
+    //                 desktop: '1440',
+    //                 mobile: '768',
+    //                 blabla: '761',
+    //             },
+    //         },
+    //         output: {
+    //             jsonDir: './typography',
+    //             stylesDir: './typography',
+    //         },
+    //     }),
     // ].map(module => module.executor({ figmaApiClient, tokenManagerClient }))
     o.map((l) => l.executor({ figmaApiClient: a, tokenManagerClient: i }))
   );
-}, xe = async () => {
-  await E.create(), console.log("\x1B[32m%s\x1B[0m", "✔️ Configuration file created gts.config.ts");
-}, le = ({ r: s, g: e, b: r }) => {
-  const t = (o) => `0${o.toString(16)}`.slice(-2);
-  return `#${t(s)}${t(e)}${t(r)}`;
-}, j = ({ opacity: s, r: e, g: r, b: t }) => {
-  const o = [e, r, t].map((n) => Math.round(n * 255));
-  return s < 1 ? `rgba(${o[0]}, ${o[1]}, ${o[2]}, ${s})` : le({ r: o[0], g: o[1], b: o[2] });
-}, Y = (s, e = 0) => {
-  const r = Math.atan2(
-    s[1].y - s[0].y,
-    s[1].x - s[0].x
-  );
-  return Math.round(r * 180 / Math.PI) + e;
-}, R = (s) => s.reduce((e, r) => {
-  const t = Number((r.position * 100).toFixed(1));
-  return [
+}, st = async () => {
+  await $.create(), console.log("\x1B[32m%s\x1B[0m", "✔️ Configuration file created gts.config.ts");
+}, B = ["xxxl", "xxl", "xl", "lg", "md", "sm", "xs", "xxs", "xxxs"], _ = (n) => parseInt(n.value, 10), L = (n) => n.reduce(
+  (e, t) => ({
     ...e,
-    `${j({
-      opacity: r.color.a,
-      r: r.color.r,
-      g: r.color.g,
-      b: r.color.b
-    })}${t > 0 && t < 100 ? ` ${t}%` : ""}`
-  ];
-}, []).join(", "), K = (s) => {
-  const e = s[0].x, r = s[0].y, t = (e * 100).toFixed(2), o = (r * 100).toFixed(2);
-  return { centerX: t, centerY: o };
-}, ce = (s) => {
-  const { gradientHandlePositions: e, gradientStops: r } = s, t = Y(e, 90), o = R(r);
-  return `linear-gradient(${t}deg, ${o})`;
-}, de = (s) => {
-  const e = s[0].x, r = s[0].y, t = s[1].x, o = s[1].y, n = s[2].x, a = s[2].y, i = (Math.sqrt((n - e) ** 2 + (a - r) ** 2) * 100).toFixed(2), l = (Math.sqrt((t - e) ** 2 + (o - r) ** 2) * 100).toFixed(2);
-  return { radiusX: i, radiusY: l };
-}, ue = (s) => {
-  const { gradientHandlePositions: e, gradientStops: r } = s, { centerX: t, centerY: o } = K(e), { radiusX: n, radiusY: a } = de(e), i = R(r);
-  return `radial-gradient(${n}% ${a}% at ${t}% ${o}%, ${i})`;
-}, fe = (s) => {
-  const { gradientHandlePositions: e, gradientStops: r } = s, t = Y(e, 30), { centerX: o, centerY: n } = K(e), a = R(r);
-  return `conic-gradient(from ${t}deg at ${o}% ${n}%, ${a})`;
-}, ge = (s) => {
-  const e = s.type;
-  return e === "SOLID" ? j({
-    opacity: s.color.a,
-    r: s.color.r,
-    g: s.color.g,
-    b: s.color.b
-  }) : e === "GRADIENT_LINEAR" ? ce(s) : e === "GRADIENT_RADIAL" ? ue(s) : e === "GRADIENT_ANGULAR" ? fe(s) : "";
-}, B = (s, e) => {
+    [t.name]: _(t)
+  }),
+  {}
+), ee = async (n, e) => {
+  await d.delete(n, e);
+}, te = async (n, e, t) => {
+  await d.write(n, e, { directory: t });
+}, w = async (n, e, t) => {
+  await ee(n, t), await te(n, e, t);
+}, re = (n, e) => {
   if (!e.length) return "";
-  const r = e.map((t) => `    ${t}`).join(`
+  const t = e.map((r) => `    ${r}`).join(`
 `);
-  return `${s} {
-${r}
+  return `${n} {
+${t}
+}`;
+}, ne = (n) => n.length ? n.join(`
+`) : "", oe = (n) => `--${n}`, se = (n) => `$${n}`, ae = (n) => n.map((e) => `${oe(e.name)}: ${e.value}px;`), ie = (n) => n.map((e) => `${se(e.name)}: ${e.value}px;`), le = (n) => re(":root", n), ce = (n) => ne(n), ue = (n) => {
+  const e = L(n);
+  return JSON.stringify(e);
+}, de = async (n, e, t, r, o, s, a, i) => {
+  const l = [];
+  l.push(w(s, n, r)), a && e && l.push(w(a, e, o)), i && t && l.push(w(i, t, o)), await Promise.all(l);
+}, ge = async ({
+  breakpointTokens: n,
+  jsonDir: e,
+  stylesDir: t,
+  jsonFileName: r,
+  stylesFileName: o,
+  extensions: s
+}) => {
+  const a = ae(n), i = ie(n), l = s.includes("css") ? le(a) : null, c = s.includes("scss") ? ce(i) : null, u = s.includes("css") ? `${o}.css` : null, f = s.includes("scss") ? `${o}.scss` : null, g = ue(n);
+  await de(
+    g,
+    l,
+    c,
+    e,
+    t,
+    r,
+    u,
+    f
+  );
+}, fe = (n, e) => {
+  const t = Object.keys(n).filter((s) => !isNaN(Number(s))).sort((s, a) => Number(s) - Number(a));
+  if (t.length > e.length)
+    throw new Error(
+      `Not enough breakpoint names provided. Found ${t.length} breakpoints in data, but only ${e.length} names specified: ${e.join(", ")}`
+    );
+  const o = Object.keys(n).filter((s) => isNaN(Number(s)));
+  if (o.length > 0)
+    throw new Error(
+      `Found non-numeric breakpoint keys in grid data: ${o.join(", ")}. All breakpoint keys must be numeric values.`
+    );
+  return t.map((s, a) => ({
+    name: e[e.length - 1 - a] || `bp-${s}`,
+    value: s
+  }));
+}, at = ({
+  input: n = {},
+  output: { jsonDir: e, stylesDir: t, jsonFileName: r = "breakpoints.json", stylesFileName: o = "breakpoints" }
+}) => ({
+  name: "breakpoints/tokenManager",
+  executor: async ({ tokenManagerClient: s }) => {
+    try {
+      console.log("[breakpoints/tokenManager] Generating breakpoints from TokenManager...");
+      const { extensions: a = ["css"], names: i = B } = n;
+      if (!s.isLoaded())
+        throw new Error("TokenManager is not loaded. Tokens must be loaded before using this module.");
+      const l = s.getStyles();
+      if (!l.grid)
+        throw new Error("No grid styles found in TokenManager. Grid tokens must be loaded.");
+      console.log("[breakpoints/tokenManager] Extracting breakpoints from grid styles...");
+      const c = fe(l.grid, i);
+      if (!c.length) {
+        console.warn("[breakpoints/tokenManager] No breakpoints found in grid styles.");
+        return;
+      }
+      console.log(
+        `[breakpoints/tokenManager] Found ${c.length} breakpoints: ${c.map((u) => u.name).join(", ")}`
+      ), await ge({
+        breakpointTokens: c,
+        jsonDir: e,
+        stylesDir: t,
+        jsonFileName: r,
+        stylesFileName: o,
+        extensions: a
+      }), console.log("[breakpoints/tokenManager] Breakpoints generated successfully.");
+    } catch (a) {
+      throw console.error("[breakpoints/tokenManager] Error:", a), a;
+    }
+  }
+}), pe = (n) => {
+  const e = L(n), t = Object.entries(e).map(([o, s]) => `    ${o}: ${s}`).join(`,
+`), r = n.length > 0 ? n[n.length - 1].name : "xxxl";
+  return `$breakpointList: (
+${t}
+);
+$defaultBreakpoint: '${r}';`;
+}, he = async (n, e, t) => {
+  await w(t, n, e);
+}, ye = async ({
+  breakpointTokens: n,
+  stylesDir: e,
+  fileName: t
+}) => {
+  const r = pe(n);
+  await he(r, e, `${t}.scss`);
+}, me = (n, e) => {
+  const t = Object.keys(n).filter((r) => !isNaN(Number(r))).sort((r, o) => Number(r) - Number(o));
+  if (t.length > e.length)
+    throw new Error(
+      `Not enough breakpoint names provided. Found ${t.length} breakpoints in data, but only ${e.length} names specified: ${e.join(", ")}`
+    );
+  return t.map((r, o) => ({
+    name: e[e.length - 1 - o] || `bp-${r}`,
+    value: r
+  }));
+}, it = ({
+  input: n = {},
+  output: { stylesDir: e, fileName: t = "breakpointList" }
+}) => ({
+  name: "breakpointsList/tokenManager",
+  executor: async ({ tokenManagerClient: r }) => {
+    try {
+      console.log("[breakpointsList/tokenManager] Generating SCSS breakpoint map...");
+      const { names: o = B } = n;
+      if (!r.isLoaded())
+        throw new Error("TokenManager is not loaded. Tokens must be loaded before using this module.");
+      const s = r.getStyles();
+      if (!s.grid)
+        throw new Error("No grid styles found in TokenManager. Grid tokens must be loaded.");
+      console.log("[breakpointsList/tokenManager] Extracting breakpoints for SCSS map...");
+      const a = me(s.grid, o);
+      if (!a.length) {
+        console.warn("[breakpointsList/tokenManager] No breakpoints found in grid styles.");
+        return;
+      }
+      console.log(
+        `[breakpointsList/tokenManager] Found ${a.length} breakpoints for map: ${a.map((i) => i.name).join(", ")}`
+      ), await ye({
+        breakpointTokens: a,
+        stylesDir: e,
+        fileName: t
+      }), console.log("[breakpointsList/tokenManager] SCSS breakpoint map generated successfully.");
+    } catch (o) {
+      throw console.error("[breakpointsList/tokenManager] Error:", o), o;
+    }
+  }
+}), V = (n, e) => {
+  if (!e.length) return "";
+  const t = e.map((r) => `    ${r}`).join(`
+`);
+  return `${n} {
+${t}
 }`;
-}, he = (s) => `.${s.replace(/\s+/g, "-").toLowerCase()}`, me = (s) => s.replaceAll(/ /g, "").split("/").at(-1), ye = (s) => `--${s}`, be = (s) => s.reduce(
-  (e, r) => {
-    const t = ye(r.name);
-    return typeof r.value == "object" ? Object.entries(r.value).forEach(([o, n]) => {
-      e[o] || (e[o] = []), e[o].push(`${t}: ${n};`);
-    }) : e.root.push(`${t}: ${r.value};`), e;
+}, be = (n) => `.${n.replace(/\s+/g, "-").toLowerCase()}`, ke = (n) => `--${n}`, we = (n) => n.reduce(
+  (e, t) => {
+    const r = ke(t.name);
+    return typeof t.value == "object" ? Object.entries(t.value).forEach(([o, s]) => {
+      e[o] || (e[o] = []), e[o].push(`${r}: ${s};`);
+    }) : e.root.push(`${r}: ${t.value};`), e;
   },
   { root: [] }
-), pe = (s) => {
-  const e = B(":root", s.root), r = Object.entries(s).reduce((t, [o, n]) => {
-    if (o === "root" || !n.length) return t;
-    const a = B(he(o), n);
-    return a && t.push(a), t;
+), $e = (n) => {
+  const e = V(":root", n.root), t = Object.entries(n).reduce((r, [o, s]) => {
+    if (o === "root" || !s.length) return r;
+    const a = V(be(o), s);
+    return a && r.push(a), r;
   }, []).join(`
 
 `);
-  return [e, r].filter(Boolean).join(`
+  return [e, t].filter(Boolean).join(`
 
 `);
-}, we = (s) => {
-  const e = s.reduce((r, t) => ({ ...r, [t.name]: t.value }), {});
+}, Se = (n) => {
+  const e = n.reduce((t, r) => ({ ...t, [r.name]: r.value }), {});
   return JSON.stringify(e);
-}, $e = async (s, e, r, t, o, n) => {
-  await Promise.all([m.delete(o, r), m.delete(n, t)]);
-  const a = m.write(o, s, { directory: r }), i = m.write(n, e, { directory: t });
+}, je = async (n, e, t, r, o, s) => {
+  await Promise.all([d.delete(o, t), d.delete(s, r)]);
+  const a = d.write(o, n, { directory: t }), i = d.write(s, e, { directory: r });
   await Promise.all([a, i]);
-}, M = async ({
-  colorTokens: s,
+}, Te = async ({
+  colorTokens: n,
   jsonDir: e,
-  stylesDir: r,
-  jsonFileName: t,
+  stylesDir: t,
+  jsonFileName: r,
   cssFileName: o
 }) => {
-  const n = be(s), a = pe(n), i = we(s);
-  await $e(i, a, e, r, t, o);
-}, Oe = ({
-  input: s,
-  output: { jsonDir: e, stylesDir: r, jsonFileName: t = "colors.json", cssFileName: o = "colors.css" }
+  const s = we(n), a = $e(s), i = Se(n);
+  await je(i, a, e, t, r, o);
+}, S = (n) => n.reduce((e, t) => {
+  const r = Number((t.position * 100).toFixed(1));
+  return [...e, `${t.color}${r > 0 && r < 100 ? ` ${r}%` : ""}`];
+}, []).join(", "), Me = (n) => {
+  const e = S(n.stops);
+  return `linear-gradient(${n.angle}deg, ${e})`;
+}, Ee = (n) => `radial-gradient(circle, ${S(n.stops)})`, ve = (n) => {
+  const e = S(n.stops);
+  return `conic-gradient(from ${n.angle}deg, ${e})`;
+}, Ce = (n) => {
+  const e = S(n.stops);
+  return `linear-gradient(${n.angle}deg, ${e})`;
+}, Fe = (n) => typeof n == "string" ? n : n.type === "linear" ? Me(n) : n.type === "radial" ? Ee(n) : n.type === "conic" ? ve(n) : n.type === "diamond" ? Ce(n) : "", A = (n, e) => Object.keys(n).reduce(
+  (t, r) => {
+    const o = n[r], s = e ? `${e}-${r}` : r;
+    if (o && typeof o == "object" && "type" in o && "value" in o) {
+      const i = Object.keys(o.value), l = i.length > 1 ? o.value : o.value[i[0]], c = { [s]: Fe(l) };
+      return { ...t, ...c };
+    }
+    const a = A(o, s);
+    return { ...t, ...a };
+  },
+  {}
+), Ve = (n) => `cl-${n}`, R = (n, e) => Object.keys(n).reduce((t, r) => {
+  const o = n[r];
+  if (o.type && o.type !== "color") return t;
+  if (o.type && o.value) {
+    const a = typeof o.value == "string" ? e.resolveVariableValueString(o.value, r) : e.resolveVariableValue(o.value);
+    return a ? { ...t, [r]: { ...o, value: a } } : t;
+  }
+  const s = R(o, e);
+  return s ? { ...t, [r]: s } : t;
+}, {}), lt = ({
+  input: n = {},
+  output: { jsonDir: e, stylesDir: t, jsonFileName: r = "colors.json", cssFileName: o = "colors.css" }
 }) => ({
-  name: "styles/colors",
-  executor: async ({ figmaApiClient: n }) => {
+  name: "colors/tokenManager",
+  executor: async ({ tokenManagerClient: s }) => {
     try {
-      console.log("[styles/colors] Fetching styles from Figma...");
-      const i = (await n.getStyles()).meta.styles, l = (s == null ? void 0 : s.variablePaths) || [], c = i.filter((u) => u.style_type === "FILL");
-      if (console.log(`[styles/colors] Found ${c.length} color styles`), c.length === 0) {
-        console.warn("[styles/colors] No color styles found in Figma file");
-        return;
+      console.log("[colors/tokenManager] Generating colors from TokenManager...");
+      const { includeVariables: a, includeStyles: i = !0 } = n;
+      if (!(a != null && a.length) && !i)
+        throw new Error("Either includeVariables or includeStyles must be enabled");
+      if (!s.isLoaded())
+        throw new Error("TokenManager is not loaded. Tokens must be loaded before using this module.");
+      const l = [], c = s.getVariables();
+      if (i) {
+        const f = s.getStyles();
+        console.log("[colors/tokenManager] Processing styles for colors..."), f.color && l.push(f.color);
       }
-      console.log(`[styles/colors] Fetching ${c.length} color nodes from Figma...`);
-      const f = await n.getNodes(c.map((u) => u.node_id)), d = Object.entries(f.nodes);
-      let y = [];
-      if (l.length > 1) {
-        console.log(`[styles/colors] Reading ${l.length} variable files...`);
-        try {
-          y = await Promise.all(
-            l.map(async (u) => {
-              try {
-                return await m.readJson(u);
-              } catch (p) {
-                throw console.error(`[styles/colors] Failed to read variable file: ${u}`, p), p;
-              }
-            })
-          );
-        } catch (u) {
-          throw console.error("[styles/colors] Error reading variable files:", u), new Error(`Failed to read variable files: ${u.message}`);
-        }
+      if (a != null && a.length) {
+        console.log(`[colors/tokenManager] Processing ${a.length} variable groups...`);
+        const f = a.map((g) => c[g]).filter(Boolean);
+        l.push(...f);
       }
-      console.log(`[styles/colors] Processing ${d.length} color nodes...`);
-      const g = d.reduce((u, [, p]) => {
-        var w, C, N;
-        try {
-          const { document: k } = p, A = me(k.name);
-          if (k.type !== "RECTANGLE") return u;
-          const T = (w = k.fills) == null ? void 0 : w[0];
-          if (!T) return u;
-          if (T.type === "SOLID" && y.length > 1) {
-            const L = (N = (C = T.boundVariables) == null ? void 0 : C.color) == null ? void 0 : N.id;
-            if (L) {
-              const D = y.reduce((G, J) => {
-                var z;
-                const W = (z = Object.entries(J).find(
-                  ([, F]) => F.$extensions["com.figma.variableId"] === L
-                )) == null ? void 0 : z[1];
-                if (W) {
-                  const { components: F, alpha: Q } = W.$value, Z = j({
-                    opacity: Q,
-                    r: F[0],
-                    g: F[1],
-                    b: F[2]
-                  });
-                  return { ...G, [J.$extensions["com.figma.modeName"]]: Z };
-                }
-                return G;
-              }, {});
-              if (Object.keys(D).length > 1)
-                return [
-                  ...u,
-                  {
-                    name: A,
-                    value: D
-                  }
-                ];
-            }
-          }
-          const I = ge(T);
-          return I ? [
-            ...u,
-            {
-              name: A,
-              value: I
-            }
-          ] : u;
-        } catch (k) {
-          return console.warn("[styles/colors] Error processing color node:", k), u;
-        }
-      }, []);
-      if (console.log(`[styles/colors] Generated ${g.length} color tokens`), g.length === 0) {
-        console.warn("[styles/colors] No color tokens generated. Check your Figma styles configuration.");
+      const u = l.map((f) => R(f, s)).flatMap(
+        (f) => Object.entries(A(f, "")).reduce(
+          (g, [p, k]) => [...g, { name: Ve(p), value: k }],
+          []
+        )
+      );
+      if (u.length === 0) {
+        console.warn("[colors/tokenManager] No color tokens generated");
         return;
       }
-      console.log(`[styles/colors] Writing files to ${e} and ${r}...`), await M({
-        colorTokens: g,
+      console.log(`[colors/tokenManager] Generated ${u.length} color tokens`), console.log(`[colors/tokenManager] Writing files to ${e} and ${t}...`), await Te({
+        colorTokens: u,
         jsonDir: e,
-        stylesDir: r,
-        jsonFileName: t,
+        stylesDir: t,
+        jsonFileName: r,
         cssFileName: o
-      }), console.log("[styles/colors] ✅ Successfully generated color files");
+      }), console.log("[colors/tokenManager] ✅ Successfully generated color files");
     } catch (a) {
       const i = a instanceof Error ? a.message : String(a);
-      throw console.error("[styles/colors] ❌ Failed to generate colors from styles:", i), a instanceof Error && a.stack && console.error("[styles/colors] Stack trace:", a.stack), a;
+      throw console.error("[colors/tokenManager] ❌ Failed to generate colors:", i), a instanceof Error && a.stack && console.error("[colors/tokenManager] Stack trace:", a.stack), a;
     }
   }
-}), Ve = ({
-  input: { variablePaths: s },
-  output: { jsonDir: e, stylesDir: r, jsonFileName: t = "colors.json", cssFileName: o = "colors.css" }
+}), Oe = (n, e) => {
+  if (!e.length) return "";
+  const t = e.map((r) => `    ${r}`).join(`
+`);
+  return `${n} {
+${t}
+}`;
+}, Pe = (n, e) => {
+  if (!e.length) return "";
+  const t = n - 1, r = e.map((o) => `        ${o}`).join(`
+`);
+  return `@media (max-width: ${t}px) {
+${r}
+    }`;
+}, xe = (n, e) => {
+  const t = [];
+  n.forEach((a, i) => {
+    const l = parseInt(a.name.split("_")[0]), c = [], u = i > 0 ? n[i - 1] : null;
+    if (a.value.alignment === "center" && a.value.width && (c.push(`max-width: ${a.value.width};`), c.push("margin-left: auto;"), c.push("margin-right: auto;"), u && u.value.alignment !== "center" && (c.push("padding-left: 0;"), c.push("padding-right: 0;"))), a.value.alignment === "stretch" && u && u.value.alignment !== "stretch" && (c.push("max-width: none;"), c.push("margin-left: 0;"), c.push("margin-right: 0;")), a.value.alignment === "stretch" && (c.push(`padding-left: ${a.value.margin};`), c.push(`padding-right: ${a.value.margin};`)), c.length > 0) {
+      const g = Oe(".container", c);
+      if (i === 0)
+        t.push(g);
+      else {
+        const p = Pe(l, [g]);
+        t.push(p);
+      }
+    }
+  });
+  const o = t.filter(Boolean).join(`
+
+`).replace(/^/gm, "    ");
+  return `@layer ${e || "components"} {
+${o}
+}`;
+}, Ne = async (n, e, t) => {
+  await Be(t, n, e);
+}, Be = async (n, e, t) => {
+  await d.delete(n, t), await d.write(n, e, { directory: t });
+}, Le = async ({
+  containerTokens: n,
+  stylesDir: e,
+  fileName: t,
+  layer: r,
+  isModule: o = !0
+}) => {
+  const s = xe(n, r), a = `${t}${o ? ".module" : ""}.css`;
+  await Ne(s, e, a);
+}, Ae = (n, e, t) => {
+  const r = [];
+  return Object.keys(n).forEach((a) => {
+    const i = n[a];
+    i && i.value && Array.isArray(i.value) && i.value.filter(
+      (c) => c.pattern === "columns" && (c.alignment === "center" || c.alignment === "stretch")
+    ).forEach((c) => {
+      if (c.alignment === "center" && r.push({
+        name: a,
+        value: {
+          alignment: "center",
+          width: t.width,
+          margin: "auto"
+        }
+      }), c.alignment === "stretch") {
+        const u = e.resolveVariableValueString(c.offset);
+        if (!u) return;
+        r.push({
+          name: a,
+          value: {
+            alignment: "stretch",
+            margin: u
+          }
+        });
+      }
+    });
+  }), r.sort((a, i) => {
+    const l = parseInt(a.name);
+    return parseInt(i.name) - l;
+  }).reduce((a, i) => {
+    const l = a[a.length - 1];
+    return l && E(l.value, i.value) || a.push(i), a;
+  }, []);
+}, ct = ({
+  input: n = {},
+  output: { stylesDir: e, fileName: t = "container" }
 }) => ({
-  name: "variables/colors",
-  executor: async () => {
+  name: "container/tokenManager",
+  executor: async ({ tokenManagerClient: r }) => {
     try {
-      if (!s.length)
-        throw new Error("At least one variable file path is required");
-      console.log(`[variables/colors] Reading ${s.length} variable files...`);
-      const n = await Promise.all(
-        s.map(async (l) => {
-          try {
-            return console.log(`[variables/colors] Reading file: ${l}`), await m.readJson(l);
-          } catch (c) {
-            throw console.error(`[variables/colors] Failed to read variable file: ${l}`, c), new Error(`Failed to read variable file "${l}": ${c.message}`);
-          }
-        })
-      );
-      console.log(`[variables/colors] Processing ${n.length} variable files...`);
-      const a = /* @__PURE__ */ new Map();
-      n.forEach((l, c) => {
-        try {
-          if (!l.$extensions || !l.$extensions["com.figma.modeName"]) {
-            console.warn(
-              `[variables/colors] File ${s[c]} is missing modeName in extensions`
-            );
-            return;
-          }
-          const f = l.$extensions["com.figma.modeName"];
-          Object.entries(l).forEach(([d, y]) => {
-            if (d !== "$extensions")
-              try {
-                const g = y;
-                if (!g || g.$type !== "color") return;
-                if (!g.$value || !g.$value.components) {
-                  console.warn(
-                    `[variables/colors] Variable "${d}" in mode "${f}" has invalid structure`
-                  );
-                  return;
-                }
-                const { components: u, alpha: p } = g.$value, w = j({
-                  opacity: p ?? 1,
-                  r: u[0],
-                  g: u[1],
-                  b: u[2]
-                });
-                a.has(d) || a.set(d, {}), a.get(d)[f] = w;
-              } catch (g) {
-                console.warn(
-                  `[variables/colors] Error processing variable "${d}" in mode "${f}":`,
-                  g
-                );
-              }
-          });
-        } catch (f) {
-          console.error(`[variables/colors] Error processing file ${s[c]}:`, f);
-        }
-      });
-      const i = Array.from(a.entries()).map(([l, c]) => ({
-        name: l,
-        value: Object.keys(c).length > 1 ? c : Object.values(c)[0]
-      }));
-      if (console.log(`[variables/colors] Generated ${i.length} color tokens`), i.length === 0) {
-        console.warn(
-          "[variables/colors] No color tokens generated. Check your variable files structure."
-        );
+      console.log("[container/tokenManager] Generating container styles...");
+      const { containerWidth: o = 1440, layer: s, isModule: a = !0 } = n;
+      if (!r.isLoaded())
+        throw new Error("TokenManager is not loaded. Tokens must be loaded before using this module.");
+      console.log("[container/tokenManager] Extracting container tokens...");
+      const i = r.getStyles();
+      if (!i.grid)
+        throw new Error("No grid styles found in TokenManager. Grid tokens must be loaded.");
+      const l = Ae(i.grid, r, { width: o });
+      if (!l.length) {
+        console.warn("[container/tokenManager] No container tokens found.");
         return;
       }
-      console.log(`[variables/colors] Writing files to ${e} and ${r}...`), await M({
-        colorTokens: i,
-        jsonDir: e,
-        stylesDir: r,
-        jsonFileName: t,
-        cssFileName: o
-      }), console.log("[variables/colors] ✅ Successfully generated color files");
-    } catch (n) {
-      const a = n instanceof Error ? n.message : String(n);
-      throw console.error("[variables/colors] ❌ Failed to generate colors from variables:", a), n instanceof Error && n.stack && console.error("[variables/colors] Stack trace:", n.stack), n;
+      console.log(
+        `[container/tokenManager] Found ${l.length} container tokens: ${l.map((c) => c.name).join(", ")}`
+      ), await Le({
+        containerTokens: l,
+        stylesDir: e,
+        fileName: t,
+        layer: s,
+        isModule: a
+      }), console.log("[container/tokenManager] Container styles generated successfully.");
+    } catch (o) {
+      throw console.error("[container/tokenManager] Error:", o), o;
     }
   }
-}), U = (s, e) => Object.keys(s).reduce(
-  (r, t) => {
-    const o = s[t], n = e ? `${e}-${t}` : t;
+}), O = (n, e) => {
+  if (!e.length) return "";
+  const t = e.map((r) => `    ${r}`).join(`
+`);
+  return `${n} {
+${t}
+}`;
+}, Re = (n) => `.${n.replace(/\s+/g, "-").toLowerCase()}`, Ge = (n) => `--${n}`, Ie = ({ offsetX: n, offsetY: e, blur: t, spread: r, color: o }) => `${n} ${e} ${t} ${r} ${o}`, Je = (n) => n.reduce(
+  (e, t) => {
+    const r = Ge(t.name);
+    return typeof t.value == "object" ? Object.entries(t.value).forEach(([o, s]) => {
+      e[o] || (e[o] = []), e[o].push(`${r}: ${s};`);
+    }) : e.root.push(`${r}: ${t.value};`), e;
+  },
+  { root: [] }
+), We = (n) => {
+  const e = O(":root", n.root), t = Object.entries(n).reduce((r, [o, s]) => {
+    if (o === "root" || !s.length) return r;
+    const a = O(Re(o), s);
+    return a && r.push(a), r;
+  }, []).join(`
+
+`);
+  return [e, t].filter(Boolean).join(`
+
+`);
+}, ze = (n) => {
+  const e = n.reduce((t, r) => ({ ...t, [r.name]: r.value }), {});
+  return JSON.stringify(e);
+}, Ke = async (n, e, t, r, o, s) => {
+  await Promise.all([d.delete(o, t), d.delete(s, r)]);
+  const a = d.write(o, n, { directory: t }), i = d.write(s, e, { directory: r });
+  await Promise.all([a, i]);
+}, qe = async ({
+  shadowTokens: n,
+  jsonDir: e,
+  stylesDir: t,
+  jsonFileName: r,
+  cssFileName: o
+}) => {
+  const s = Je(n), a = We(s), i = ze(n);
+  await Ke(i, a, e, t, r, o);
+}, G = (n, e) => Object.keys(n).reduce(
+  (t, r) => {
+    const o = n[r], s = e ? `${e}-${r}` : r;
     if (o && typeof o == "object" && "type" in o && "value" in o) {
-      const i = Object.keys(o.value), l = i.length > 1 ? o.value : o.value[i[0]], c = { [n]: l };
-      return { ...r, ...c };
+      const i = {
+        [s]: o.value.map(Ie).join(", ")
+      };
+      return { ...t, ...i };
     }
-    const a = U(o, n);
-    return { ...r, ...a };
+    const a = G(o, s);
+    return { ...t, ...a };
   },
   {}
-), ve = (s) => `cl-${s}`, O = (s, e, r) => {
-  const { type: t, value: o } = s;
-  if (t !== "color") return;
-  if (typeof o == "string") {
-    if (!e.isVariableReference(o)) return { ...s, value: o };
-    const i = e.getToken(e.getVariablePath(o)), l = i ? O(i, e, r) : void 0;
-    return l != null && l.value ? { ...s, ...i } : void 0;
-  }
-  const a = Object.keys(o).reduce((i, l) => {
-    if (r && l !== r) return i;
-    const c = o[l];
-    if (typeof c != "string") return i;
-    if (!e.isVariableReference(c)) return { ...i, [l]: c };
-    const f = e.getToken(e.getVariablePath(c)), d = f ? O(f, e, l) : void 0;
-    return d != null && d.value ? { ...i, ...d.value } : i;
-  }, {});
-  if (Object.keys(a).length)
-    return { ...s, value: a };
-}, H = (s, e) => Object.keys(s).reduce((r, t) => {
-  const o = s[t];
-  if (o.type && o.value) {
-    const a = O(o, e);
-    return a ? { ...r, [t]: a } : r;
-  }
-  const n = H(o, e);
-  return n ? { ...r, [t]: n } : r;
-}, {}), Re = ({
-  input: s = {},
-  output: { jsonDir: e, stylesDir: r, jsonFileName: t = "colors.json", cssFileName: o = "colors.css" }
+), De = (n) => `sh-${n}`, ut = ({
+  input: n = {},
+  output: { jsonDir: e, stylesDir: t, jsonFileName: r = "shadows.json", cssFileName: o = "shadows.css" }
 }) => ({
-  name: "colors/tokenManager",
-  executor: async ({ tokenManagerClient: n }) => {
+  name: "shadows/tokenManager",
+  executor: async ({ tokenManagerClient: s }) => {
     try {
-      console.log("[colors/tokenManager] Generating colors from TokenManager...");
-      const { includeVariables: a, includeStyles: i = !0 } = s;
+      console.log("[shadows/tokenManager] Generating shadows from TokenManager...");
+      const { includeVariables: a, includeStyles: i = !0 } = n;
       if (!(a != null && a.length) && !i)
         throw new Error("Either includeVariables or includeStyles must be enabled");
-      if (!n.isLoaded())
+      if (!s.isLoaded())
         throw new Error("TokenManager is not loaded. Tokens must be loaded before using this module.");
-      const l = [], c = n.getVariables();
+      const l = [];
       if (i) {
-        const d = n.getStyles();
-        console.log("[colors/tokenManager] Processing styles for colors..."), d.color && l.push(d.color);
-      }
-      if (a != null && a.length) {
-        console.log(`[colors/tokenManager] Processing ${a.length} variable groups...`);
-        const d = a.map((y) => c[y]).filter(Boolean);
-        l.push(...d);
+        const u = s.getStyles();
+        console.log("[shadows/tokenManager] Processing styles for shadows..."), u.effect && l.push(u.effect);
       }
-      const f = l.map((d) => H(d, n)).flatMap(
-        (d) => Object.entries(U(d, "")).reduce(
-          (y, [g, u]) => [...y, { name: ve(g), value: u }],
+      const c = l.flatMap(
+        (u) => Object.entries(G(u, "")).reduce(
+          (f, [g, p]) => [...f, { name: De(g), value: p }],
           []
         )
       );
-      if (f.length === 0) {
-        console.warn("[colors/tokenManager] No color tokens generated");
+      if (console.log("shadowTokens=", c), c.length === 0) {
+        console.warn("[shadows/tokenManager] No shadow tokens generated");
         return;
       }
-      console.log(`[colors/tokenManager] Generated ${f.length} color tokens`), console.log(`[colors/tokenManager] Writing files to ${e} and ${r}...`), await M({
-        colorTokens: f,
+      console.log(`[shadows/tokenManager] Generated ${c.length} shadow tokens`), console.log(`[shadows/tokenManager] Writing files to ${e} and ${t}...`), await qe({
+        shadowTokens: c,
         jsonDir: e,
-        stylesDir: r,
-        jsonFileName: t,
+        stylesDir: t,
+        jsonFileName: r,
         cssFileName: o
-      }), console.log("[colors/tokenManager] ✅ Successfully generated color files");
+      }), console.log("[shadows/tokenManager] ✅ Successfully generated shadow files");
     } catch (a) {
       const i = a instanceof Error ? a.message : String(a);
-      throw console.error("[colors/tokenManager] ❌ Failed to generate colors:", i), a instanceof Error && a.stack && console.error("[colors/tokenManager] Stack trace:", a.stack), a;
+      throw console.error("[shadows/tokenManager] ❌ Failed to generate shadows:", i), a instanceof Error && a.stack && console.error("[shadows/tokenManager] Stack trace:", a.stack), a;
+    }
+  }
+}), P = (n) => {
+  const e = {};
+  return Object.entries(n).forEach(([t, r]) => {
+    const o = t.replace(/([A-Z])/g, "-$1").toLowerCase();
+    e[o] = r;
+  }), e;
+}, He = (n, e) => {
+  const t = Object.keys(n.breakpoints), r = P(n.base);
+  return t.reduce(
+    (o, s, a) => {
+      const i = P(n.breakpoints[s]);
+      return a ? [...o, { breakpoint: Number(e[s]), css: i }] : [
+        {
+          breakpoint: null,
+          css: {
+            ...r,
+            ...i
+          }
+        }
+      ];
+    },
+    [
+      {
+        breakpoint: null,
+        css: r
+      }
+    ]
+  );
+}, x = (n) => Object.keys(n).reduce((e, t) => {
+  const r = n[t], o = Object.keys(r).map((s) => `${s}: ${r[s]}`).join(";");
+  return e + `.${t}Typography { ${o} }`;
+}, ""), Ue = (n, e) => {
+  const t = n.reduce(
+    (s, a) => (He(a.value, e).forEach(({ breakpoint: l, css: c }) => {
+      l ? (s.breakpoints[l] || (s.breakpoints[l] = {}), s.breakpoints[l][a.name] = c) : s.base[a.name] = c;
+    }), s),
+    { base: {}, breakpoints: {} }
+  ), r = x(t.base), o = Object.keys(t.breakpoints).reduce((s, a) => {
+    const i = t.breakpoints[a];
+    return s + `@media (max-width: ${a}px) { ${x(i)} }`;
+  }, "");
+  return r + o;
+}, Qe = (n) => {
+  const e = n.reduce((t, r) => ({ ...t, [r.name]: r.value }), {});
+  return JSON.stringify(e);
+}, Xe = async (n, e, t, r, o, s) => {
+  await Promise.all([d.delete(o, t), d.delete(s, r)]);
+  const a = d.write(o, n, { directory: t }), i = d.write(s, e, { directory: r });
+  await Promise.all([a, i]);
+}, Ye = async ({
+  typographyTokens: n,
+  jsonDir: e,
+  stylesDir: t,
+  jsonFileName: r,
+  cssFileName: o,
+  breakpoints: s,
+  isModule: a
+}) => {
+  const i = Ue(n, s), l = Qe(n), c = `${o}${a ? ".module" : ""}.css`, u = `${r}.json`;
+  await Xe(l, i, e, t, u, c);
+}, I = (n, e, t) => Object.keys(n).reduce((r, o) => {
+  const s = n[o];
+  if (typeof s != "object" || Array.isArray(s)) return r;
+  if (!("type" in s) || !("value" in s))
+    return { ...r, [o]: I(s, e, t) };
+  if (s.type !== "typography") return r;
+  const a = s.value, i = Object.entries(a).reduce(
+    (l, [c, u]) => {
+      const f = Object.keys(t.breakpoints);
+      if (f.length)
+        f.forEach((g) => {
+          const p = e.resolveVariableValueString(u, g);
+          p && (p === u ? l.base = { ...l.base, [c]: p } : l.breakpoints[g] = { ...l.breakpoints[g], [c]: p });
+        });
+      else {
+        const g = e.resolveVariableValueString(u);
+        g && (l.base = { ...l.base, [c]: g });
+      }
+      return l;
+    },
+    { base: {}, breakpoints: {} }
+  );
+  return { ...r, [o]: { type: "typography", value: i } };
+}, {}), J = (n, e) => Object.keys(n).reduce((t, r) => {
+  const o = e ? `${e}-${r}` : r, s = n[r];
+  if (!("type" in s) || !("value" in s))
+    return { ...t, ...J(s, o) };
+  const a = s.value;
+  return { ...t, [o]: a };
+}, {}), dt = ({
+  input: n,
+  output: { jsonDir: e, stylesDir: t, jsonFileName: r = "typography", cssFileName: o = "typography" }
+}) => ({
+  name: "typography/tokenManager",
+  executor: async ({ tokenManagerClient: s }) => {
+    try {
+      console.log("[typography/tokenManager] Generating typography from TokenManager...");
+      const { breakpoints: a, isModule: i } = n;
+      if (!s.isLoaded())
+        throw new Error("TokenManager is not loaded. Tokens must be loaded before using this module.");
+      const l = [], c = s.getStyles();
+      console.log("[typography/tokenManager] Processing styles for typography..."), c.text && l.push(c.text);
+      const u = l.reduce(
+        (g, p) => ({
+          ...g,
+          ...I(p, s, { breakpoints: n.breakpoints })
+        }),
+        {}
+      ), f = Object.entries(J(u)).map(
+        ([g, p]) => ({ name: g, value: p })
+      );
+      if (f.length === 0) {
+        console.warn("[typography/tokenManager] No typography tokens generated");
+        return;
+      }
+      console.log(`[typography/tokenManager] Generated ${f.length} typography tokens`), console.log(`[typography/tokenManager] Writing files to ${e} and ${t}...`), await Ye({
+        typographyTokens: f,
+        jsonDir: e,
+        stylesDir: t,
+        jsonFileName: r,
+        cssFileName: o,
+        breakpoints: a,
+        isModule: i
+      }), console.log("[typography/tokenManager] ✅ Successfully generated typography files");
+    } catch (a) {
+      const i = a instanceof Error ? a.message : String(a);
+      throw console.error("[typography/tokenManager] ❌ Failed to generate typography:", i), a instanceof Error && a.stack && console.error("[typography/tokenManager] Stack trace:", a.stack), a;
     }
   }
 });
 export {
-  ie as TokenManager,
-  Oe as colorsFromStyles,
-  Re as colorsFromTokenManager,
-  Ve as colorsFromVariables,
-  Pe as generate,
-  xe as init
+  B as BREAKPOINTS_NAMES,
+  Z as TokenManager,
+  at as breakpointsFromTokenManager,
+  it as breakpointsListFromTokenManager,
+  lt as colorsFromTokenManager,
+  ct as containerFromTokenManager,
+  ot as generate,
+  st as init,
+  ut as shadowsFromTokenManager,
+  dt as typographyFromTokenManager
 };