@pandacss/studio 0.53.6 → 0.54.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.53.6",
+  "version": "0.54.0",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -48,12 +48,12 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "6.2.5",
-    "@pandacss/config": "0.53.6",
-    "@pandacss/logger": "0.53.6",
-    "@pandacss/shared": "0.53.6",
-    "@pandacss/token-dictionary": "0.53.6",
-    "@pandacss/types": "0.53.6",
-    "@pandacss/astro-plugin-studio": "0.53.6"
+    "@pandacss/config": "0.54.0",
+    "@pandacss/logger": "0.54.0",
+    "@pandacss/shared": "0.54.0",
+    "@pandacss/token-dictionary": "0.54.0",
+    "@pandacss/types": "0.54.0",
+    "@pandacss/astro-plugin-studio": "0.54.0"
   },
   "devDependencies": {
     "@types/react": "18.2.55",

package/src/components/layer-styles.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { layerStyles } from 'virtual:panda'
 import { panda } from '../../styled-system/jsx'
 import * as context from '../lib/panda-context'
 import { EmptyState } from './empty-state'
@@ -7,24 +8,24 @@ import { TokenContent } from './token-content'
 import { TokenGroup } from './token-group'
 
 export default function LayerStyles() {
-  const values = Object.entries(context.layerStyles)
+  const keys = Object.keys(context.layerStyles)
 
   return (
     <TokenGroup>
       <TokenContent divideY="1px" divideColor="card">
-        {values && values?.length !== 0 ? (
-          values.map(([name, styles]) => (
+        {keys && keys?.length !== 0 ? (
+          keys.map((name) => (
             <panda.div px="1" py="2.5" key={name}>
               <panda.div borderColor="card">
                 <panda.span fontWeight="medium">{name}</panda.span>
-                <panda.div fontSize="small" flex="auto" marginTop="1.5">
-                  {Object.entries(styles).map(([attr, value], i, arr) => (
-                    <span key={attr}>{`${attr}: ${value}${i === arr.length - 1 ? '' : ', '}`}</span>
-                  ))}
-                </panda.div>
               </panda.div>
               <panda.div px="4" py="2" background="card" marginTop="5">
-                <panda.div flex="auto" my="3" height="20" style={styles} />
+                <panda.div flex="auto" my="3" height="20" className={`virtual-layer-style-${name}`} />
+                <style
+                  dangerouslySetInnerHTML={{
+                    __html: `.virtual-layer-style-${name} { ${layerStyles[name]} }`,
+                  }}
+                />
               </panda.div>
             </panda.div>
           ))

package/src/components/text-styles.tsx

@@ -1,27 +1,31 @@
-import * as React from 'react'
+import { textStyles } from 'virtual:panda'
 import { panda } from '../../styled-system/jsx'
 import * as context from '../lib/panda-context'
 import { EmptyState } from './empty-state'
 import { TextStylesIcon } from './icons'
 import { TokenContent } from './token-content'
 import { TokenGroup } from './token-group'
-import type { Dict } from '../../styled-system/types'
 
 export default function TextStyles() {
-  const textStyles = Object.entries(context.textStyles)
+  const keys = Object.keys(context.textStyles)
 
   return (
     <TokenGroup>
       <TokenContent>
-        {textStyles?.length !== 0 ? (
-          textStyles.map(([name, styles]) => (
+        {keys?.length !== 0 ? (
+          keys.map((name) => (
             <panda.div px="1" py="2.5" key={name}>
               <panda.div borderColor="card">
                 <panda.span fontWeight="medium">{name}</panda.span>
               </panda.div>
-              <panda.div flex="auto" my="3" style={removeEscapeHatchSyntax(styles)} truncate>
+              <panda.div flex="auto" my="3" className={`virtual-text-style-${name}`} truncate>
                 Panda textStyles are time saving
               </panda.div>
+              <style
+                dangerouslySetInnerHTML={{
+                  __html: `.virtual-text-style-${name} { ${textStyles[name]} }`,
+                }}
+              />
             </panda.div>
           ))
         ) : (
@@ -33,15 +37,3 @@ export default function TextStyles() {
     </TokenGroup>
   )
 }
-
-const removeEscapeHatchSyntax = (styles: Dict) => {
-  return Object.fromEntries(
-    Object.entries(styles).map(([key, value]) => {
-      if (typeof value === 'string' && value[0] === '[' && value[value.length - 1] === ']') {
-        return [key, value.slice(1, -1)]
-      }
-
-      return [key, value]
-    }),
-  )
-}

package/src/lib/virtual-panda.d.ts

@@ -1,3 +1,5 @@
 declare module 'virtual:*' {
   export const config: import('@pandacss/types').UserConfig
+  export const textStyles: Record<string, string>
+  export const layerStyles: Record<string, string>
 }

package/styled-system/patterns/aspect-ratio.d.ts

@@ -9,7 +9,6 @@ export interface AspectRatioProperties {
    ratio?: ConditionalValue<number>
 }
 
-
 interface AspectRatioStyles extends AspectRatioProperties, DistributiveOmit<SystemStyleObject, keyof AspectRatioProperties | 'aspectRatio'> {}
 
 interface AspectRatioPatternFn {

package/styled-system/patterns/bleed.d.ts

@@ -10,7 +10,6 @@ export interface BleedProperties {
 	block?: SystemProperties["marginBlock"]
 }
 
-
 interface BleedStyles extends BleedProperties, DistributiveOmit<SystemStyleObject, keyof BleedProperties > {}
 
 interface BleedPatternFn {

package/styled-system/patterns/box.d.ts

@@ -9,7 +9,6 @@ export interface BoxProperties {
    
 }
 
-
 interface BoxStyles extends BoxProperties, DistributiveOmit<SystemStyleObject, keyof BoxProperties > {}
 
 interface BoxPatternFn {

package/styled-system/patterns/center.d.ts

@@ -9,7 +9,6 @@ export interface CenterProperties {
    inline?: ConditionalValue<boolean>
 }
 
-
 interface CenterStyles extends CenterProperties, DistributiveOmit<SystemStyleObject, keyof CenterProperties > {}
 
 interface CenterPatternFn {

package/styled-system/patterns/circle.d.ts

@@ -9,7 +9,6 @@ export interface CircleProperties {
    size?: SystemProperties["width"]
 }
 
-
 interface CircleStyles extends CircleProperties, DistributiveOmit<SystemStyleObject, keyof CircleProperties > {}
 
 interface CirclePatternFn {

package/styled-system/patterns/container.d.ts

@@ -9,7 +9,6 @@ export interface ContainerProperties {
    
 }
 
-
 interface ContainerStyles extends ContainerProperties, DistributiveOmit<SystemStyleObject, keyof ContainerProperties > {}
 
 interface ContainerPatternFn {

package/styled-system/patterns/cq.d.ts

@@ -10,7 +10,6 @@ export interface CqProperties {
 	type?: SystemProperties["containerType"]
 }
 
-
 interface CqStyles extends CqProperties, DistributiveOmit<SystemStyleObject, keyof CqProperties > {}
 
 interface CqPatternFn {

package/styled-system/patterns/divider.d.ts

@@ -11,7 +11,6 @@ export interface DividerProperties {
 	color?: ConditionalValue<Tokens["colors"] | Properties["borderColor"]>
 }
 
-
 interface DividerStyles extends DividerProperties, DistributiveOmit<SystemStyleObject, keyof DividerProperties > {}
 
 interface DividerPatternFn {

package/styled-system/patterns/flex.d.ts

@@ -15,7 +15,6 @@ export interface FlexProperties {
 	shrink?: SystemProperties["flexShrink"]
 }
 
-
 interface FlexStyles extends FlexProperties, DistributiveOmit<SystemStyleObject, keyof FlexProperties > {}
 
 interface FlexPatternFn {

package/styled-system/patterns/float.d.ts

@@ -12,7 +12,6 @@ export interface FloatProperties {
 	placement?: ConditionalValue<"bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start">
 }
 
-
 interface FloatStyles extends FloatProperties, DistributiveOmit<SystemStyleObject, keyof FloatProperties > {}
 
 interface FloatPatternFn {

package/styled-system/patterns/grid-item.d.ts

@@ -14,7 +14,6 @@ export interface GridItemProperties {
 	rowEnd?: ConditionalValue<number>
 }
 
-
 interface GridItemStyles extends GridItemProperties, DistributiveOmit<SystemStyleObject, keyof GridItemProperties > {}
 
 interface GridItemPatternFn {

package/styled-system/patterns/grid.d.ts

@@ -13,7 +13,6 @@ export interface GridProperties {
 	minChildWidth?: ConditionalValue<Tokens["sizes"] | Properties["width"]>
 }
 
-
 interface GridStyles extends GridProperties, DistributiveOmit<SystemStyleObject, keyof GridProperties > {}
 
 interface GridPatternFn {

package/styled-system/patterns/hstack.d.ts

@@ -10,7 +10,6 @@ export interface HstackProperties {
 	gap?: SystemProperties["gap"]
 }
 
-
 interface HstackStyles extends HstackProperties, DistributiveOmit<SystemStyleObject, keyof HstackProperties > {}
 
 interface HstackPatternFn {

package/styled-system/patterns/link-overlay.d.ts

@@ -9,7 +9,6 @@ export interface LinkOverlayProperties {
    
 }
 
-
 interface LinkOverlayStyles extends LinkOverlayProperties, DistributiveOmit<SystemStyleObject, keyof LinkOverlayProperties > {}
 
 interface LinkOverlayPatternFn {

package/styled-system/patterns/spacer.d.ts

@@ -9,7 +9,6 @@ export interface SpacerProperties {
    size?: ConditionalValue<Tokens["spacing"]>
 }
 
-
 interface SpacerStyles extends SpacerProperties, DistributiveOmit<SystemStyleObject, keyof SpacerProperties > {}
 
 interface SpacerPatternFn {

package/styled-system/patterns/square.d.ts

@@ -9,7 +9,6 @@ export interface SquareProperties {
    size?: SystemProperties["width"]
 }
 
-
 interface SquareStyles extends SquareProperties, DistributiveOmit<SystemStyleObject, keyof SquareProperties > {}
 
 interface SquarePatternFn {

package/styled-system/patterns/stack.d.ts

@@ -12,7 +12,6 @@ export interface StackProperties {
 	gap?: SystemProperties["gap"]
 }
 
-
 interface StackStyles extends StackProperties, DistributiveOmit<SystemStyleObject, keyof StackProperties > {}
 
 interface StackPatternFn {

package/styled-system/patterns/visually-hidden.d.ts

@@ -9,7 +9,6 @@ export interface VisuallyHiddenProperties {
    
 }
 
-
 interface VisuallyHiddenStyles extends VisuallyHiddenProperties, DistributiveOmit<SystemStyleObject, keyof VisuallyHiddenProperties > {}
 
 interface VisuallyHiddenPatternFn {

package/styled-system/patterns/vstack.d.ts

@@ -10,7 +10,6 @@ export interface VstackProperties {
 	gap?: SystemProperties["gap"]
 }
 
-
 interface VstackStyles extends VstackProperties, DistributiveOmit<SystemStyleObject, keyof VstackProperties > {}
 
 interface VstackPatternFn {

package/styled-system/patterns/wrap.d.ts

@@ -13,7 +13,6 @@ export interface WrapProperties {
 	justify?: SystemProperties["justifyContent"]
 }
 
-
 interface WrapStyles extends WrapProperties, DistributiveOmit<SystemStyleObject, keyof WrapProperties > {}
 
 interface WrapPatternFn {