@pandacss/token-dictionary 0.29.1 → 0.30.1

package/dist/index.mjs

@@ -1,9 +1,13 @@
-// src/create-dictionary.ts
-import { getDotPath as getDotPath2, mapToJson as mapToJson2, memo as memo2 } from "@pandacss/shared";
-
 // src/dictionary.ts
-import { compact, isString, mapObject, memo, walkObject as walkObject2 } from "@pandacss/shared";
-import { isMatching as isMatching2, match } from "ts-pattern";
+import {
+  compact,
+  cssVar,
+  isString as isString2,
+  mapObject,
+  memo,
+  walkObject as walkObject2
+} from "@pandacss/shared";
+import { isMatching as isMatching2, match as match2 } from "ts-pattern";
 
 // src/is-composite.ts
 import { P, isMatching } from "ts-pattern";
@@ -39,13 +43,16 @@ var isCompositeTokenValue = (value) => {
   return isCompositeGradient(value) || isCompositeShadow(value) || isCompositeBorder(value) || isCompositeAsset(value) || Array.isArray(value);
 };
 
+// src/middleware.ts
+import { calc, toPx } from "@pandacss/shared";
+
 // src/token.ts
 import { isBaseCondition, toHash, walkObject } from "@pandacss/shared";
 
 // src/utils.ts
 import { logger } from "@pandacss/logger";
 import { PandaError, esc, isObject } from "@pandacss/shared";
-var REFERENCE_REGEX = /(\$[^\s,]+\w)|({([^}]*)})/g;
+var REFERENCE_REGEX = /({([^}]*)})/g;
 var curlyBracketRegex = /[{}]/g;
 function getReferences(value) {
   if (typeof value !== "string")
@@ -274,308 +281,17 @@ var TOKEN_TYPES = {
   aspectRatios: "aspectRatio"
 };
 
-// src/dictionary.ts
-function expandBreakpoints(breakpoints) {
-  if (!breakpoints)
-    return { breakpoints: {}, sizes: {} };
-  return {
-    breakpoints: mapObject(breakpoints, (value) => ({ value })),
-    sizes: Object.fromEntries(Object.entries(breakpoints).map(([key, value]) => [`breakpoint-${key}`, { value }]))
-  };
-}
-function filterDefault(path) {
-  if (path[0] === "DEFAULT")
-    return path;
-  return path.filter((item) => item !== "DEFAULT");
-}
-var TokenDictionary = class {
-  allTokens = [];
-  prefix;
-  hash;
-  get allNames() {
-    return Array.from(new Set(this.allTokens.map((token) => token.name)));
-  }
-  constructor(options) {
-    const { tokens = {}, semanticTokens = {}, breakpoints, prefix, hash } = options;
-    const breakpointTokens = expandBreakpoints(breakpoints);
-    const computedTokens = compact({
-      ...tokens,
-      breakpoints: breakpointTokens.breakpoints,
-      sizes: {
-        ...tokens.sizes,
-        ...breakpointTokens.sizes
-      }
-    });
-    this.prefix = prefix;
-    this.hash = hash;
-    walkObject2(
-      computedTokens,
-      (token, path) => {
-        path = filterDefault(path);
-        assertTokenFormat(token);
-        const category = path[0];
-        const name = path.join(".");
-        const node = new Token({ ...token, name, path });
-        node.setExtensions({
-          category,
-          prop: path.slice(1).join(".")
-        });
-        this.allTokens.push(node);
-      },
-      { stop: isToken }
-    );
-    walkObject2(
-      semanticTokens,
-      (token, path) => {
-        path = filterDefault(path);
-        assertTokenFormat(token);
-        const category = path[0];
-        const name = path.join(".");
-        const normalizedToken = isString(token.value) || isCompositeTokenValue(token.value) ? { value: { base: token.value } } : token;
-        const { value, ...restData } = normalizedToken;
-        const node = new Token({
-          ...restData,
-          name,
-          value: value.base || "",
-          path
-        });
-        node.setExtensions({
-          category,
-          conditions: value,
-          prop: path.slice(1).join(".")
-        });
-        this.allTokens.push(node);
-      },
-      { stop: isToken }
-    );
-  }
-  getByName = memo((name) => {
-    for (const token of this.allTokens) {
-      if (token.name === name)
-        return token;
-    }
-  });
-  transforms = /* @__PURE__ */ new Map();
-  registerTransform(...transforms2) {
-    transforms2.forEach((transform) => {
-      transform.type ||= "value";
-      transform.enforce ||= "pre";
-      this.transforms.set(transform.name, transform);
-    });
-    return this;
-  }
-  execTransform(name) {
-    const transform = this.transforms.get(name);
-    if (!transform)
-      return;
-    this.allTokens.forEach((token) => {
-      if (token.extensions.hasReference)
-        return;
-      if (typeof transform.match === "function" && !transform.match(token))
-        return;
-      const exec = (v) => transform.transform(v, { prefix: this.prefix, hash: this.hash });
-      const transformed = exec(token);
-      match(transform).with({ type: "extensions" }, () => {
-        token.setExtensions(transformed);
-      }).with({ type: "value" }, () => {
-        token.value = transformed;
-        if (token.isComposite) {
-          token.originalValue = transformed;
-        }
-        if (token.extensions.conditions) {
-          const conditions = token.extensions.conditions;
-          const transformedConditions = walkObject2(conditions, (value) => exec({ value }), {
-            stop: isCompositeTokenValue
-          });
-          token.setExtensions({
-            conditions: transformedConditions
-          });
-        }
-      }).otherwise(() => {
-        token[transform.type] = transformed;
-      });
-    });
-  }
-  transformTokens(enforce) {
-    this.transforms.forEach((transform) => {
-      if (transform.enforce === enforce) {
-        this.execTransform(transform.name);
-      }
-    });
-    return this;
-  }
-  middlewares = [];
-  registerMiddleware(...middlewares2) {
-    for (const middleware of middlewares2) {
-      middleware.enforce ||= "pre";
-      this.middlewares.push(middleware);
-    }
-    return this;
-  }
-  applyMiddlewares(enforce) {
-    this.middlewares.forEach((middleware) => {
-      if (middleware.enforce === enforce) {
-        middleware.transform(this, { prefix: this.prefix, hash: this.hash });
-      }
-    });
-  }
-  getReferences(value) {
-    const refs = getReferences(value);
-    return refs.map((ref) => this.getByName(ref)).filter(Boolean);
-  }
-  usesReference(value) {
-    if (!isString(value))
-      return false;
-    return this.getReferences(value).length > 0;
-  }
-  addReferences() {
-    this.allTokens.forEach((token) => {
-      if (!this.usesReference(token.value))
-        return;
-      const references = this.getReferences(token.value);
-      token.setExtensions({
-        references: references.reduce((object, reference) => {
-          object[reference.name] = reference;
-          return object;
-        }, {})
-      });
-    });
-    return this;
-  }
-  filter(pattern) {
-    const predicate = typeof pattern === "function" ? pattern : isMatching2(pattern);
-    return this.allTokens.filter(predicate);
-  }
-  addConditionalTokens() {
-    const tokens = [];
-    this.allTokens.forEach((token) => {
-      tokens.push(token);
-      const conditionalTokens = token.getConditionTokens();
-      if (conditionalTokens && conditionalTokens.length > 0) {
-        tokens.push(...conditionalTokens);
-      }
-    });
-    this.allTokens = tokens;
-    return this;
-  }
-  expandReferences() {
-    this.allTokens.forEach((token) => {
-      token.expandReferences();
-    });
-    return this;
-  }
-  build() {
-    this.applyMiddlewares("pre");
-    this.transformTokens("pre");
-    this.addConditionalTokens();
-    this.addReferences();
-    this.expandReferences();
-    this.applyMiddlewares("post");
-    this.transformTokens("post");
-  }
-  get isEmpty() {
-    return this.allTokens.length === 0;
-  }
-};
-
-// src/format.ts
-import { getDotPath } from "@pandacss/shared";
-var formats = {
-  groupByCondition(dictionary) {
-    const grouped = /* @__PURE__ */ new Map();
-    dictionary.allTokens.forEach((token) => {
-      const { condition } = token.extensions;
-      if (!condition)
-        return;
-      grouped.get(condition) || grouped.set(condition, /* @__PURE__ */ new Set());
-      grouped.set(condition, grouped.get(condition).add(token));
-    });
-    return grouped;
-  },
-  groupByColorPalette(dictionary) {
-    const grouped = /* @__PURE__ */ new Map();
-    dictionary.allTokens.forEach((token) => {
-      const { colorPalette, colorPaletteRoots } = token.extensions;
-      if (!colorPalette || token.extensions.isVirtual)
-        return;
-      colorPaletteRoots.forEach((colorPaletteRoot) => {
-        grouped.get(colorPaletteRoot) || grouped.set(colorPaletteRoot, /* @__PURE__ */ new Map());
-        const virtualName = token.name.replace(colorPaletteRoot, "colorPalette");
-        const virtualToken = dictionary.getByName(virtualName);
-        if (!virtualToken)
-          return;
-        const virtualVar = virtualToken.extensions.var;
-        grouped.get(colorPaletteRoot).set(virtualVar, token.extensions.varRef);
-      });
-    });
-    return grouped;
-  },
-  groupByCategory(dictionary) {
-    const grouped = /* @__PURE__ */ new Map();
-    dictionary.allTokens.forEach((token) => {
-      const { category, prop } = token.extensions;
-      if (!category)
-        return;
-      grouped.get(category) || grouped.set(category, /* @__PURE__ */ new Map());
-      grouped.set(category, grouped.get(category).set(prop, token));
-    });
-    return grouped;
-  },
-  getFlattenedValues(dictionary) {
-    const grouped = formats.groupByCategory(dictionary);
-    const result = /* @__PURE__ */ new Map();
-    grouped.forEach((tokens, category) => {
-      result.get(category) || result.set(category, /* @__PURE__ */ new Map());
-      tokens.forEach((token) => {
-        const { prop, varRef, isNegative } = token.extensions;
-        const value = isNegative ? token.isConditional ? token.originalValue : token.value : varRef;
-        result.set(category, result.get(category).set(prop, value));
-      });
-    });
-    return result;
-  },
-  getVars(dictionary) {
-    const grouped = formats.groupByCondition(dictionary);
-    const result = /* @__PURE__ */ new Map();
-    grouped.forEach((tokens, condition) => {
-      result.get(condition) || result.set(condition, /* @__PURE__ */ new Map());
-      tokens.forEach((token) => {
-        if (token.extensions.isNegative || token.extensions.isVirtual)
-          return;
-        result.get(condition).set(token.extensions.var, token.value);
-      });
-    });
-    return result;
-  },
-  createVarGetter(dictionary) {
-    const flatValues = mapToJson(formats.getFlattenedValues(dictionary));
-    return function getToken(path, fallback) {
-      return getDotPath(flatValues, path, fallback);
-    };
-  },
-  getColorPaletteValues(dictionary) {
-    const values = /* @__PURE__ */ new Set();
-    dictionary.allTokens.forEach((token) => {
-      const { colorPalette } = token.extensions;
-      if (!colorPalette || token.extensions.isVirtual)
-        return;
-      values.add(colorPalette);
-    });
-    return values;
-  }
-};
-
 // src/middleware.ts
-import { calc, cssVar, toPx } from "@pandacss/shared";
 var addNegativeTokens = {
   enforce: "pre",
-  transform(dictionary, { prefix, hash }) {
+  transform(dictionary) {
+    const { prefix, hash } = dictionary;
     const tokens = dictionary.filter({
       extensions: { category: "spacing" }
     });
     tokens.forEach((token) => {
       const originalPath = [...token.path];
-      const originalVar = cssVar(originalPath.join("-"), { prefix, hash });
+      const originalVar = dictionary.formatCssVar(originalPath, { prefix, hash });
       if (token.value === "0rem") {
         return;
       }
@@ -591,9 +307,9 @@ var addNegativeTokens = {
         node.path[node.path.length - 1] = `-${last}`;
       }
       if (node.path) {
-        node.name = node.path.join(".");
+        node.name = dictionary.formatTokenName(node.path);
       }
-      dictionary.allTokens.push(node);
+      dictionary.registerToken(node);
     });
   }
 };
@@ -614,36 +330,36 @@ var addPixelUnit = {
 var addVirtualPalette = {
   enforce: "post",
   transform(dictionary) {
-    const tokens = dictionary.filter({
-      extensions: { category: "colors" }
-    });
-    const keys = /* @__PURE__ */ new Set();
+    const tokens = dictionary.filter({ extensions: { category: "colors" } });
+    const keys = /* @__PURE__ */ new Map();
     const colorPalettes = /* @__PURE__ */ new Map();
     tokens.forEach((token) => {
       const { colorPalette, colorPaletteRoots, colorPaletteTokenKeys } = token.extensions;
       if (!colorPalette)
         return;
-      colorPaletteTokenKeys.forEach(keys.add, keys);
+      colorPaletteTokenKeys.forEach((keyPath) => {
+        keys.set(dictionary.formatTokenName(keyPath), keyPath);
+      });
       colorPaletteRoots.forEach((colorPaletteRoot) => {
-        const colorPaletteList = colorPalettes.get(colorPaletteRoot) || [];
+        const formated = dictionary.formatTokenName(colorPaletteRoot);
+        const colorPaletteList = colorPalettes.get(formated) || [];
         colorPaletteList.push(token);
-        colorPalettes.set(colorPaletteRoot, colorPaletteList);
+        colorPalettes.set(formated, colorPaletteList);
       });
     });
-    keys.forEach((key) => {
+    keys.forEach((segments) => {
       const node = new Token({
-        name: ["colors.colorPalette", key].filter(Boolean).join("."),
-        value: ["colors.colorPalette", key].filter(Boolean).join("."),
-        path: ["colors", "colorPalette", ...key.split(".")]
+        name: dictionary.formatTokenName(["colors", "colorPalette", ...segments].filter(Boolean)),
+        value: dictionary.formatTokenName(["colors", "colorPalette", ...segments].filter(Boolean)),
+        path: ["colors", "colorPalette", ...segments]
       });
       node.setExtensions({
         category: "colors",
-        prop: ["colorPalette", key].filter(Boolean).join("."),
+        prop: dictionary.formatTokenName(["colorPalette", ...segments].filter(Boolean)),
         isVirtual: true
       });
-      dictionary.allTokens.push(node);
+      dictionary.registerToken(node, "pre");
     });
-    dictionary.transformTokens("pre");
   }
 };
 var removeEmptyTokens = {
@@ -655,8 +371,8 @@ var removeEmptyTokens = {
 var middlewares = [addNegativeTokens, addVirtualPalette, removeEmptyTokens, addPixelUnit];
 
 // src/transform.ts
-import { cssVar as cssVar2, isString as isString2 } from "@pandacss/shared";
-import { P as P2, match as match2 } from "ts-pattern";
+import { isString } from "@pandacss/shared";
+import { P as P2, match } from "ts-pattern";
 
 // src/mini-svg-uri.ts
 var shorterNames = {
@@ -764,12 +480,12 @@ var objectKeys = (obj) => Object.keys(obj);
 var transformShadow = {
   name: "tokens/shadow",
   match: (token) => token.extensions.category === "shadows",
-  transform(token, opts) {
-    if (isString2(token.value)) {
+  transform(token, dict) {
+    if (isString(token.value)) {
       return token.value;
     }
     if (Array.isArray(token.value)) {
-      return token.value.map((value) => this.transform({ value }, opts)).join(", ");
+      return token.value.map((value) => this.transform({ value }, dict)).join(", ");
     }
     if (isCompositeShadow(token.value)) {
       const { offsetX, offsetY, blur, spread, color, inset } = token.value;
@@ -782,13 +498,13 @@ var transformGradient = {
   name: "tokens/gradient",
   match: (token) => token.extensions.category === "gradients",
   transform(token) {
-    if (isString2(token.value)) {
+    if (isString(token.value)) {
       return token.value;
     }
     if (isCompositeGradient(token.value)) {
       const { type, stops, placement } = token.value;
       const rawStops = stops.map((stop) => {
-        if (isString2(stop))
+        if (isString(stop))
           return stop;
         const { color, position } = stop;
         return `${color} ${position}px`;
@@ -812,7 +528,7 @@ var transformEasings = {
   name: "tokens/easings",
   match: (token) => token.extensions.category === "easings",
   transform(token) {
-    if (isString2(token.value)) {
+    if (isString(token.value)) {
       return token.value;
     }
     if (Array.isArray(token.value)) {
@@ -825,7 +541,7 @@ var transformBorders = {
   name: "tokens/borders",
   match: (token) => token.extensions.category === "borders",
   transform(token) {
-    if (isString2(token.value)) {
+    if (isString(token.value)) {
       return token.value;
     }
     if (isCompositeBorder(token.value)) {
@@ -840,16 +556,17 @@ var transformAssets = {
   match: (token) => token.extensions.category === "assets",
   transform(token) {
     const raw = token.value;
-    return match2(raw).with(P2.string, (value) => value).with({ type: "url" }, ({ value }) => `url('${value}')`).with({ type: "svg" }, ({ value }) => `url('${svgToDataUri(value)})'`).exhaustive();
+    return match(raw).with(P2.string, (value) => value).with({ type: "url" }, ({ value }) => `url('${value}')`).with({ type: "svg" }, ({ value }) => `url('${svgToDataUri(value)})'`).exhaustive();
   }
 };
 var addCssVariables = {
   type: "extensions",
   name: "tokens/css-var",
-  transform(token, { prefix, hash }) {
+  transform(token, dictionary) {
+    const { prefix, hash } = dictionary;
     const { isNegative, originalPath } = token.extensions;
     const pathValue = isNegative ? originalPath : token.path;
-    const variable = cssVar2(pathValue.filter(Boolean).join("-"), { prefix, hash });
+    const variable = dictionary.formatCssVar(pathValue.filter(Boolean), { prefix, hash });
     return {
       var: variable.var,
       varRef: variable.ref
@@ -859,12 +576,13 @@ var addCssVariables = {
 var addConditionalCssVariables = {
   enforce: "post",
   name: "tokens/conditionals",
-  transform(token, { prefix, hash }) {
+  transform(token, dictionary) {
+    const { prefix, hash } = dictionary;
     const refs = getReferences(token.value);
     if (!refs.length)
       return token.value;
     refs.forEach((ref) => {
-      const variable = cssVar2(ref.split(".").join("-"), { prefix, hash }).ref;
+      const variable = dictionary.formatCssVar(ref.split("."), { prefix, hash }).ref;
       token.value = token.value.replace(`{${ref}}`, variable);
     });
     return token.value;
@@ -876,7 +594,7 @@ var addColorPalette = {
   match(token) {
     return token.extensions.category === "colors" && !token.extensions.isVirtual;
   },
-  transform(token) {
+  transform(token, dict) {
     let tokenPathClone = [...token.path];
     tokenPathClone.pop();
     tokenPathClone.shift();
@@ -889,18 +607,18 @@ var addColorPalette = {
       return {};
     }
     const colorPaletteRoots = tokenPathClone.reduce((acc, _, i, arr) => {
-      const next = arr.slice(0, i + 1).join(".");
+      const next = arr.slice(0, i + 1);
       acc.push(next);
       return acc;
     }, []);
     const colorPaletteRoot = tokenPathClone[0];
-    const colorPalette = tokenPathClone.join(".");
+    const colorPalette = dict.formatTokenName(tokenPathClone);
     const colorPaletteTokenKeys = token.path.slice(token.path.indexOf(colorPaletteRoot) + 1).reduce((acc, _, i, arr) => {
-      acc.push(arr.slice(i).join("."));
+      acc.push(arr.slice(i));
       return acc;
     }, []);
     if (colorPaletteTokenKeys.length === 0) {
-      colorPaletteTokenKeys.push("");
+      colorPaletteTokenKeys.push([""]);
     }
     return {
       colorPalette,
@@ -921,42 +639,224 @@ var transforms = [
   addColorPalette
 ];
 
-// src/create-dictionary.ts
-var TokenDictionary2 = class extends TokenDictionary {
-  get;
-  conditionMap;
-  categoryMap;
-  values;
-  colorPalettes;
-  vars;
-  json;
+// src/dictionary.ts
+function expandBreakpoints(breakpoints) {
+  if (!breakpoints)
+    return { breakpoints: {}, sizes: {} };
+  return {
+    breakpoints: mapObject(breakpoints, (value) => ({ value })),
+    sizes: Object.fromEntries(Object.entries(breakpoints).map(([key, value]) => [`breakpoint-${key}`, { value }]))
+  };
+}
+function filterDefault(path) {
+  if (path[0] === "DEFAULT")
+    return path;
+  return path.filter((item) => item !== "DEFAULT");
+}
+var TokenDictionary = class {
   constructor(options) {
-    super(options);
+    this.options = options;
+  }
+  allTokens = [];
+  byName = /* @__PURE__ */ new Map();
+  init() {
+    this.registerTokens();
     this.registerTransform(...transforms);
     this.registerMiddleware(...middlewares);
     this.build();
-    this.get = formats.createVarGetter(this);
-    this.conditionMap = formats.groupByCondition(this);
-    this.categoryMap = formats.groupByCategory(this);
-    this.values = formats.getFlattenedValues(this);
-    this.colorPalettes = mapToJson2(formats.groupByColorPalette(this));
-    this.vars = formats.getVars(this);
-    this.json = mapToJson2(this.values);
-  }
-  getValue = memo2((path) => {
-    const result = this.values.get(path);
-    if (result != null) {
-      return Object.fromEntries(result);
+    return this;
+  }
+  get prefix() {
+    return this.options.prefix;
+  }
+  get hash() {
+    return this.options.hash;
+  }
+  getByName = (path) => {
+    return this.byName.get(path);
+  };
+  formatTokenName = (path) => path.join(".");
+  formatCssVar = (path, options) => cssVar(path.join("-"), options);
+  registerTokens() {
+    const { tokens = {}, semanticTokens = {}, breakpoints } = this.options;
+    const breakpointTokens = expandBreakpoints(breakpoints);
+    const computedTokens = compact({
+      ...tokens,
+      breakpoints: breakpointTokens.breakpoints,
+      sizes: {
+        ...tokens.sizes,
+        ...breakpointTokens.sizes
+      }
+    });
+    walkObject2(
+      computedTokens,
+      (token, path) => {
+        path = filterDefault(path);
+        assertTokenFormat(token);
+        const category = path[0];
+        const name = this.formatTokenName(path);
+        const node = new Token({ ...token, name, path });
+        node.setExtensions({
+          category,
+          prop: this.formatTokenName(path.slice(1))
+        });
+        this.registerToken(node);
+      },
+      { stop: isToken }
+    );
+    walkObject2(
+      semanticTokens,
+      (token, path) => {
+        path = filterDefault(path);
+        assertTokenFormat(token);
+        const category = path[0];
+        const name = this.formatTokenName(path);
+        const normalizedToken = isString2(token.value) || isCompositeTokenValue(token.value) ? { value: { base: token.value } } : token;
+        const { value, ...restData } = normalizedToken;
+        const node = new Token({
+          ...restData,
+          name,
+          value: value.base || "",
+          path
+        });
+        node.setExtensions({
+          category,
+          conditions: value,
+          prop: this.formatTokenName(path.slice(1))
+        });
+        this.registerToken(node);
+      },
+      { stop: isToken }
+    );
+    return this;
+  }
+  registerToken = (token, transformPhase) => {
+    this.allTokens.push(token);
+    this.byName.set(token.name, token);
+    if (transformPhase) {
+      this.transforms.forEach((transform) => {
+        if (transform.enforce === transformPhase) {
+          this.execTransformOnToken(transform, token);
+        }
+      });
     }
-  });
-  getTokenVar = memo2((path) => {
-    return getDotPath2(this.json, path);
-  });
+  };
+  transforms = /* @__PURE__ */ new Map();
+  registerTransform(...transforms2) {
+    transforms2.forEach((transform) => {
+      transform.type ||= "value";
+      transform.enforce ||= "pre";
+      this.transforms.set(transform.name, transform);
+    });
+    return this;
+  }
+  execTransform(name) {
+    const transform = this.transforms.get(name);
+    if (!transform)
+      return;
+    this.allTokens.forEach((token) => {
+      this.execTransformOnToken(transform, token);
+    });
+  }
+  execTransformOnToken(transform, token) {
+    if (token.extensions.hasReference)
+      return;
+    if (typeof transform.match === "function" && !transform.match(token))
+      return;
+    const exec = (v) => transform.transform(v, this);
+    const transformed = exec(token);
+    match2(transform).with({ type: "extensions" }, () => {
+      token.setExtensions(transformed);
+    }).with({ type: "value" }, () => {
+      token.value = transformed;
+      if (token.isComposite) {
+        token.originalValue = transformed;
+      }
+      if (token.extensions.conditions) {
+        const conditions = token.extensions.conditions;
+        const transformedConditions = walkObject2(conditions, (value) => exec({ value }), {
+          stop: isCompositeTokenValue
+        });
+        token.setExtensions({
+          conditions: transformedConditions
+        });
+      }
+    }).otherwise(() => {
+      token[transform.type] = transformed;
+    });
+  }
+  transformTokens(enforce) {
+    this.transforms.forEach((transform) => {
+      if (transform.enforce === enforce) {
+        this.execTransform(transform.name);
+      }
+    });
+    return this;
+  }
+  middlewares = [];
+  registerMiddleware(...middlewares2) {
+    for (const middleware of middlewares2) {
+      middleware.enforce ||= "pre";
+      this.middlewares.push(middleware);
+    }
+    return this;
+  }
+  applyMiddlewares(enforce) {
+    this.middlewares.forEach((middleware) => {
+      if (middleware.enforce === enforce) {
+        middleware.transform(this);
+      }
+    });
+  }
+  getReferences(value) {
+    const refs = getReferences(value);
+    return refs.map((ref) => this.getByName(ref)).filter(Boolean);
+  }
+  usesReference(value) {
+    if (!isString2(value))
+      return false;
+    return this.getReferences(value).length > 0;
+  }
+  addReferences() {
+    this.allTokens.forEach((token) => {
+      if (!this.usesReference(token.value))
+        return;
+      const references = this.getReferences(token.value);
+      token.setExtensions({
+        references: references.reduce((object, reference) => {
+          object[reference.name] = reference;
+          return object;
+        }, {})
+      });
+    });
+    return this;
+  }
+  filter(pattern) {
+    const predicate = typeof pattern === "function" ? pattern : isMatching2(pattern);
+    return this.allTokens.filter(predicate);
+  }
+  addConditionalTokens() {
+    this.allTokens.forEach((token) => {
+      const conditionalTokens = token.getConditionTokens();
+      if (conditionalTokens && conditionalTokens.length > 0) {
+        conditionalTokens.forEach((token2) => {
+          this.registerToken(token2);
+        });
+      }
+    });
+    return this;
+  }
+  expandTokenReferences() {
+    this.allTokens.forEach((token) => {
+      token.expandReferences();
+    });
+    return this;
+  }
   /**
    * Expand token references to their CSS variable
    */
-  expandReference(value) {
-    return expandReferences(value, (key) => this.get(key));
+  expandReferenceInValue(value) {
+    return expandReferences(value, (path) => this.view.get(path));
   }
   /**
    * Resolve token references to their actual raw value
@@ -964,8 +864,129 @@ var TokenDictionary2 = class extends TokenDictionary {
   resolveReference(value) {
     return expandReferences(value, (key) => this.getByName(key)?.value);
   }
+  build() {
+    this.applyMiddlewares("pre");
+    this.transformTokens("pre");
+    this.addConditionalTokens();
+    this.addReferences();
+    this.expandTokenReferences();
+    this.applyMiddlewares("post");
+    this.transformTokens("post");
+    this.setComputedView();
+    return this;
+  }
+  get isEmpty() {
+    return this.allTokens.length === 0;
+  }
+  view;
+  setComputedView() {
+    this.view = new TokenDictionaryView(this).getTokensView();
+    return this;
+  }
+};
+var TokenDictionaryView = class {
+  constructor(dictionary) {
+    this.dictionary = dictionary;
+    this.dictionary = dictionary;
+  }
+  getTokensView() {
+    const conditionMap = /* @__PURE__ */ new Map();
+    const categoryMap = /* @__PURE__ */ new Map();
+    const colorPalettes = /* @__PURE__ */ new Map();
+    const valuesByCategory = /* @__PURE__ */ new Map();
+    const flatValues = /* @__PURE__ */ new Map();
+    const vars = /* @__PURE__ */ new Map();
+    this.dictionary.allTokens.forEach((token) => {
+      this.processCondition(token, conditionMap);
+      this.processColorPalette(token, colorPalettes, this.dictionary.byName);
+      this.processCategory(token, categoryMap);
+      this.processValue(token, valuesByCategory, flatValues);
+      this.processVars(token, vars);
+    });
+    const json = mapToJson(valuesByCategory);
+    return {
+      conditionMap,
+      categoryMap,
+      colorPalettes,
+      vars,
+      values: flatValues,
+      json,
+      get: memo((path, fallback) => {
+        return flatValues.get(path) ?? fallback;
+      }),
+      getCategoryValues: memo((category) => {
+        const result = json[category];
+        if (result != null) {
+          return result;
+        }
+      })
+    };
+  }
+  processCondition(token, group) {
+    const { condition } = token.extensions;
+    if (!condition)
+      return;
+    if (!group.has(condition))
+      group.set(condition, /* @__PURE__ */ new Set());
+    group.get(condition).add(token);
+  }
+  processColorPalette(token, group, byName) {
+    const { colorPalette, colorPaletteRoots, isVirtual } = token.extensions;
+    if (!colorPalette || isVirtual)
+      return;
+    colorPaletteRoots.forEach((colorPaletteRoot) => {
+      const formated = this.dictionary.formatTokenName(colorPaletteRoot);
+      if (!group.has(formated)) {
+        group.set(formated, /* @__PURE__ */ new Map());
+      }
+      const virtualPath = replaceRootWithColorPalette([...token.path], [...colorPaletteRoot]);
+      const virtualName = this.dictionary.formatTokenName(virtualPath);
+      const virtualToken = byName.get(virtualName);
+      if (!virtualToken)
+        return;
+      const virtualVar = virtualToken.extensions.var;
+      group.get(formated).set(virtualVar, token.extensions.varRef);
+    });
+  }
+  processCategory(token, group) {
+    const { category, prop } = token.extensions;
+    if (!category)
+      return;
+    if (!group.has(category))
+      group.set(category, /* @__PURE__ */ new Map());
+    group.get(category).set(prop, token);
+  }
+  processValue(token, byCategory, flat) {
+    const { category, prop, varRef, isNegative } = token.extensions;
+    if (!category)
+      return;
+    if (!byCategory.has(category))
+      byCategory.set(category, /* @__PURE__ */ new Map());
+    const value = isNegative ? token.isConditional ? token.originalValue : token.value : varRef;
+    byCategory.get(category).set(prop, value);
+    flat.set([category, prop].join("."), value);
+  }
+  processVars(token, group) {
+    const { condition, isNegative, isVirtual, var: varName } = token.extensions;
+    if (isNegative || isVirtual || !condition)
+      return;
+    if (!group.has(condition))
+      group.set(condition, /* @__PURE__ */ new Map());
+    group.get(condition).set(varName, token.value);
+  }
 };
+function replaceRootWithColorPalette(path, colorPaletteRoot) {
+  const startIndex = path.findIndex(
+    (element, index) => colorPaletteRoot.every((rootElement, rootIndex) => path[index + rootIndex] === rootElement)
+  );
+  if (startIndex === -1) {
+    return path;
+  }
+  path.splice(startIndex, colorPaletteRoot.length);
+  path.splice(startIndex, 0, "colorPalette");
+  return path;
+}
 export {
   Token,
-  TokenDictionary2 as TokenDictionary
+  TokenDictionary
 };