@dwntgrnd/devlens 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +46 -23
  2. package/dist/index.js +25 -0
  3. package/dist/index.mjs +25 -0
  4. package/package.json +6 -6
  5. package/dist/index.css +0 -1148
package/README.md CHANGED
@@ -39,7 +39,7 @@ If your project already runs with `npm run dev`, you're ready.
39
39
  ### Install the package
40
40
 
41
41
  ```bash
42
- npm install devlens
42
+ npm install @dwntgrnd/devlens
43
43
  ```
44
44
 
45
45
  DevLens expects these packages in your project. If you're using Next.js with Tailwind, you almost certainly have them already:
@@ -57,25 +57,49 @@ npm install lucide-react
57
57
 
58
58
  ### Add DevLens to your layout
59
59
 
60
- Open your root layout file (typically `app/layout.tsx`) and add the DevLens component inside `<body>`, after your page content:
60
+ This requires two steps: creating a new file, then making a small edit to your existing layout.
61
+
62
+ **Step 1: Create a new file** at `app/providers.tsx`
63
+
64
+ This is a new file — create it in your `app/` directory alongside your existing `layout.tsx`. Copy the entire contents below:
61
65
 
62
66
  ```tsx
63
- // app/layout.tsx
64
- import { DevLens } from 'devlens';
67
+ // app/providers.tsx
68
+ 'use client';
69
+ import { DevLens } from '@dwntgrnd/devlens';
65
70
 
66
- export default function RootLayout({ children }: { children: React.ReactNode }) {
71
+ export function Providers({ children }: { children: React.ReactNode }) {
67
72
  return (
68
- <html lang="en">
69
- <body>
70
- {children}
71
- {process.env.NODE_ENV === 'development' && <DevLens />}
72
- </body>
73
- </html>
73
+ <>
74
+ {children}
75
+ {process.env.NODE_ENV === 'development' && <DevLens />}
76
+ </>
74
77
  );
75
78
  }
76
79
  ```
77
80
 
78
- The `process.env.NODE_ENV` check ensures DevLens only renders during development. It will never appear in your production build.
81
+ **Step 2: Edit your existing `app/layout.tsx`**
82
+
83
+ Do **not** replace the file. Make two changes to what's already there:
84
+
85
+ 1. **Add this import** at the top of the file, with your other imports:
86
+
87
+ ```tsx
88
+ import { Providers } from './providers';
89
+ ```
90
+
91
+ 2. **Wrap `{children}` with `<Providers>`** inside the `<body>` tag. Find the line that says `{children}` and change it:
92
+
93
+ ```diff
94
+ <body>
95
+ - {children}
96
+ + <Providers>{children}</Providers>
97
+ </body>
98
+ ```
99
+
100
+ Leave everything else in `layout.tsx` as-is — your fonts, metadata, className attributes, and other imports all stay.
101
+
102
+ The `process.env.NODE_ENV` check in `providers.tsx` ensures DevLens only renders during development. It will never appear in your production build.
79
103
 
80
104
  ### Verify it's working
81
105
 
@@ -113,7 +137,7 @@ If you want human-readable names for your tokens or want to organize them into c
113
137
 
114
138
  ```tsx
115
139
  // devlens.config.ts
116
- import type { DevLensConfig } from 'devlens';
140
+ import type { DevLensConfig } from '@dwntgrnd/devlens';
117
141
 
118
142
  export const devlensConfig: DevLensConfig = {
119
143
  tokenOverrides: {
@@ -138,18 +162,17 @@ export const devlensConfig: DevLensConfig = {
138
162
  Then pass the config to DevLens in your layout:
139
163
 
140
164
  ```tsx
141
- // app/layout.tsx
142
- import { DevLens } from 'devlens';
165
+ // app/providers.tsx
166
+ 'use client';
167
+ import { DevLens } from '@dwntgrnd/devlens';
143
168
  import { devlensConfig } from '../devlens.config';
144
169
 
145
- export default function RootLayout({ children }: { children: React.ReactNode }) {
170
+ export function Providers({ children }: { children: React.ReactNode }) {
146
171
  return (
147
- <html lang="en">
148
- <body>
149
- {children}
150
- {process.env.NODE_ENV === 'development' && <DevLens {...devlensConfig} />}
151
- </body>
152
- </html>
172
+ <>
173
+ {children}
174
+ {process.env.NODE_ENV === 'development' && <DevLens {...devlensConfig} />}
175
+ </>
153
176
  );
154
177
  }
155
178
  ```
@@ -266,7 +289,7 @@ To enable this, add a page route for the detached window:
266
289
 
267
290
  ```tsx
268
291
  // app/dev/devlens-detached/page.tsx
269
- import { DevLens } from 'devlens';
292
+ import { DevLens } from '@dwntgrnd/devlens';
270
293
  import { devlensConfig } from '../../../devlens.config';
271
294
 
272
295
  export default function DevLensDetachedPage() {
package/dist/index.js CHANGED
@@ -4981,6 +4981,31 @@ __export(index_exports, {
4981
4981
  });
4982
4982
  module.exports = __toCommonJS(index_exports);
4983
4983
 
4984
+ // #style-inject:#style-inject
4985
+ function styleInject(css, { insertAt } = {}) {
4986
+ if (!css || typeof document === "undefined") return;
4987
+ const head = document.head || document.getElementsByTagName("head")[0];
4988
+ const style = document.createElement("style");
4989
+ style.type = "text/css";
4990
+ if (insertAt === "top") {
4991
+ if (head.firstChild) {
4992
+ head.insertBefore(style, head.firstChild);
4993
+ } else {
4994
+ head.appendChild(style);
4995
+ }
4996
+ } else {
4997
+ head.appendChild(style);
4998
+ }
4999
+ if (style.styleSheet) {
5000
+ style.styleSheet.cssText = css;
5001
+ } else {
5002
+ style.appendChild(document.createTextNode(css));
5003
+ }
5004
+ }
5005
+
5006
+ // src/styles/devlens.css
5007
+ styleInject('.te-drawer * {\n box-sizing: border-box;\n}\n.te-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 12px;\n border-bottom: 1px solid #313244;\n flex-shrink: 0;\n}\n.te-header-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n font-size: 14px;\n}\n.te-header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.te-dock-strip {\n display: flex;\n gap: 2px;\n background: #313244;\n padding: 2px;\n border-radius: 6px;\n}\n.te-dock-btn {\n padding: 4px 6px;\n border: none;\n background: transparent;\n color: #a6adc8;\n cursor: pointer;\n border-radius: 4px;\n display: flex;\n align-items: center;\n}\n.te-dock-btn:hover {\n color: #cdd6f4;\n background: #45475a;\n}\n.te-dock-active {\n background: #45475a !important;\n color: #89b4fa !important;\n}\n.te-tabs {\n display: flex;\n border-bottom: 1px solid #313244;\n flex-shrink: 0;\n}\n.te-tab {\n flex: 1;\n padding: 8px;\n border: none;\n background: transparent;\n color: #a6adc8;\n cursor: pointer;\n font-size: 12px;\n font-weight: 500;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n border-bottom: 2px solid transparent;\n font-family: inherit;\n}\n.te-tab:hover {\n color: #cdd6f4;\n}\n.te-tab-active {\n color: #89b4fa;\n border-bottom-color: #89b4fa;\n}\n.te-content {\n flex: 1;\n overflow-y: auto;\n padding: 8px;\n}\n.te-badge {\n background: #f38ba8;\n color: #1e1e2e;\n font-size: 10px;\n font-weight: 700;\n padding: 1px 6px;\n border-radius: 10px;\n min-width: 18px;\n text-align: center;\n}\n.te-badge-sm {\n font-size: 9px;\n padding: 0 4px;\n min-width: 14px;\n}\n.te-accordion {\n border: none;\n}\n.te-accordion-item {\n border-bottom: 1px solid #313244;\n}\n.te-accordion-item:last-child {\n border-bottom: none;\n}\n.te-accordion-trigger {\n padding: 8px 4px;\n font-size: 12px;\n font-weight: 600;\n color: #cdd6f4;\n text-decoration: none;\n font-family: inherit;\n}\n.te-accordion-trigger:hover {\n text-decoration: none;\n color: #89b4fa;\n}\n.te-accordion-trigger svg {\n color: #6c7086;\n}\n.te-accordion-content {\n font-size: 13px;\n}\n.te-change-badge {\n background: #fab387;\n color: #1e1e2e;\n font-size: 9px;\n font-weight: 700;\n padding: 0 5px;\n border-radius: 8px;\n margin-left: 6px;\n}\n.te-token-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.te-control {\n padding: 8px;\n background: #181825;\n border-radius: 6px;\n border: 1px solid #313244;\n}\n.te-control-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 6px;\n}\n.te-label {\n font-size: 11px;\n font-weight: 600;\n color: #bac2de;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.te-modified-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: #fab387;\n display: inline-block;\n}\n.te-control-actions {\n display: flex;\n gap: 4px;\n}\n.te-icon-btn {\n padding: 4px;\n border: none;\n background: transparent;\n color: #6c7086;\n cursor: pointer;\n border-radius: 4px;\n display: flex;\n align-items: center;\n}\n.te-icon-btn:hover {\n color: #cdd6f4;\n background: #313244;\n}\n.te-reset-btn:hover {\n color: #f38ba8 !important;\n}\n.te-muted {\n color: #6c7086;\n font-size: 11px;\n}\n.te-color-row {\n display: flex;\n gap: 8px;\n align-items: center;\n margin-bottom: 6px;\n}\n.te-color-swatch {\n width: 32px;\n height: 32px;\n border: 1px solid #45475a;\n border-radius: 4px;\n cursor: pointer;\n padding: 0;\n background: none;\n}\n.te-color-swatch::-webkit-color-swatch-wrapper {\n padding: 2px;\n}\n.te-color-swatch::-webkit-color-swatch {\n border: none;\n border-radius: 2px;\n}\n.te-text-input {\n background: #11111b;\n border: 1px solid #313244;\n color: #cdd6f4;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n font-family: monospace;\n outline: none;\n}\n.te-text-input:focus {\n border-color: #89b4fa;\n}\n.te-hex-input {\n width: 80px;\n}\n.te-num-input {\n width: 72px;\n}\n.te-select {\n background: #11111b;\n border: 1px solid #313244;\n color: #cdd6f4;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n font-family: inherit;\n outline: none;\n cursor: pointer;\n}\n.te-select:focus {\n border-color: #89b4fa;\n}\n.te-select-full {\n width: 100%;\n}\n.te-slider-group {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.te-slider-row {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.te-slider-label {\n width: 12px;\n font-size: 10px;\n font-weight: 700;\n color: #6c7086;\n text-align: center;\n}\n.te-slider-value {\n width: 40px;\n font-size: 10px;\n color: #a6adc8;\n text-align: right;\n font-family: monospace;\n}\n.te-slider {\n flex: 1;\n height: 4px;\n -webkit-appearance: none;\n appearance: none;\n background: #313244;\n border-radius: 2px;\n outline: none;\n}\n.te-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: #89b4fa;\n cursor: pointer;\n}\n.te-slider-full {\n width: 100%;\n margin-top: 4px;\n}\n.te-length-row {\n display: flex;\n gap: 6px;\n margin-bottom: 4px;\n}\n.te-font-preview {\n margin-top: 6px;\n padding: 4px 8px;\n background: #11111b;\n border-radius: 4px;\n color: #cdd6f4;\n font-family: var(--devlens-preview-font, inherit);\n}\n.te-shadow-preview {\n margin-top: 8px;\n width: 100%;\n height: 24px;\n background: #313244;\n border-radius: 4px;\n}\n.te-diff {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.te-diff-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 8px;\n}\n.te-diff-title {\n font-weight: 600;\n font-size: 13px;\n}\n.te-diff-actions {\n display: flex;\n gap: 6px;\n}\n.te-diff-empty {\n color: #6c7086;\n text-align: center;\n padding: 32px 16px;\n font-size: 13px;\n}\n.te-diff-content {\n background: #11111b;\n border: 1px solid #313244;\n border-radius: 6px;\n padding: 12px;\n font-size: 11px;\n font-family: monospace;\n color: #a6e3a1;\n overflow-x: auto;\n white-space: pre-wrap;\n word-break: break-all;\n margin: 0;\n}\n.te-diff-section {\n margin-bottom: 12px;\n}\n.te-diff-section-title {\n font-size: 12px;\n font-weight: 600;\n margin-bottom: 4px;\n color: #a6adc8;\n display: flex;\n align-items: center;\n}\n.te-btn {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 600;\n cursor: pointer;\n border: 1px solid transparent;\n font-family: inherit;\n}\n.te-btn-primary {\n background: #89b4fa;\n color: #1e1e2e;\n border-color: #89b4fa;\n}\n.te-btn-primary:hover {\n background: #74c7ec;\n}\n.te-btn-secondary {\n background: transparent;\n color: #a6adc8;\n border-color: #45475a;\n}\n.te-btn-secondary:hover {\n background: #313244;\n color: #cdd6f4;\n}\n.te-scale {\n display: flex;\n flex-direction: column;\n}\n.te-scale-reset-row {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 4px;\n}\n.te-scale-control-row {\n display: flex;\n flex-direction: column;\n}\n.te-scale-preview {\n background: #11111b;\n border-radius: 6px;\n padding: 8px 10px;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n.te-scale-preview-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 6px;\n padding-bottom: 4px;\n border-bottom: 1px solid #313244;\n}\n.te-scale-row {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n padding: 3px 0;\n}\n.te-scale-sample {\n color: #cdd6f4;\n font-family: var(--devlens-preview-font, inherit);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 60%;\n}\n.te-scale-meta {\n display: flex;\n align-items: baseline;\n gap: 8px;\n flex-shrink: 0;\n}\n.te-scale-px {\n font-size: 11px;\n color: #a6adc8;\n font-family: monospace;\n}\n.te-scale-step {\n font-size: 10px;\n color: #6c7086;\n font-family: monospace;\n width: 28px;\n text-align: right;\n}\n.te-managed-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6px 8px;\n background: #181825;\n border-radius: 6px;\n border: 1px solid #313244;\n opacity: 0.7;\n}\n.te-managed-meta {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.te-managed-value {\n font-size: 11px;\n font-family: monospace;\n color: #a6adc8;\n}\n.te-managed-badge {\n font-size: 9px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n padding: 1px 5px;\n border-radius: 4px;\n background: #313244;\n color: #6c7086;\n}\n.te-usage-hint {\n position: relative;\n display: inline-flex;\n align-items: center;\n color: #6c7086;\n cursor: help;\n}\n.te-usage-hint-tooltip {\n display: none;\n position: absolute;\n bottom: calc(100% + 6px);\n left: 50%;\n transform: translateX(-50%);\n background: #313244;\n color: #cdd6f4;\n font-size: 10px;\n font-weight: 400;\n text-transform: none;\n letter-spacing: normal;\n padding: 4px 8px;\n border-radius: 4px;\n white-space: nowrap;\n pointer-events: none;\n z-index: 10;\n}\n.te-usage-hint:hover .te-usage-hint-tooltip {\n display: block;\n}\n.te-inspector-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px 16px;\n color: #6c7086;\n text-align: center;\n font-size: 13px;\n}\n.te-selector-toggle {\n border-color: #45475a;\n}\n.te-selector-active {\n border-color: #89b4fa !important;\n color: #89b4fa !important;\n background: rgba(137, 180, 250, 0.1) !important;\n animation: te-pulse 1.5s ease-in-out infinite;\n}\n@keyframes te-pulse {\n 0%, 100% {\n border-color: #89b4fa;\n }\n 50% {\n border-color: transparent;\n }\n}\n.te-element-info {\n border-bottom: 1px solid #313244;\n padding: 8px 0;\n margin-bottom: 8px;\n}\n.te-element-tag {\n font-family: monospace;\n color: #89b4fa;\n font-size: 14px;\n font-weight: 600;\n}\n.te-element-text {\n color: #6c7086;\n font-size: 12px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-top: 2px;\n}\n.te-breadcrumb {\n display: inline-flex;\n flex-wrap: wrap;\n font-family: monospace;\n font-size: 11px;\n color: #6c7086;\n gap: 0;\n margin-top: 4px;\n}\n.te-class-group {\n margin-bottom: 12px;\n}\n.te-class-group-header {\n font-size: 11px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: #6c7086;\n margin-bottom: 4px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.te-class-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n}\n.te-chip {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-family: monospace;\n font-size: 11px;\n background: #181825;\n border: 1px solid #313244;\n padding: 2px 6px;\n border-radius: 4px;\n position: relative;\n cursor: default;\n color: #cdd6f4;\n}\n.te-chip-modified {\n background: rgba(250, 179, 135, 0.15);\n border-color: #fab387;\n}\n.te-chip-remove {\n display: none;\n font-size: 14px;\n color: #6c7086;\n cursor: pointer;\n border: none;\n background: none;\n padding: 0;\n line-height: 1;\n}\n.te-chip:hover .te-chip-remove {\n display: inline-flex;\n}\n.te-chip-remove:hover {\n color: #f38ba8;\n}\n.te-chip-edit {\n font-family: monospace;\n font-size: 11px;\n background: #11111b;\n border: 1px solid #89b4fa;\n color: #cdd6f4;\n padding: 2px 6px;\n border-radius: 4px;\n outline: none;\n}\n.te-chip-add-btn {\n border: none;\n background: none;\n color: #6c7086;\n cursor: pointer;\n padding: 2px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n}\n.te-chip-add-btn:hover {\n color: #89b4fa;\n background: #313244;\n}\n.te-add-class-input {\n font-family: monospace;\n font-size: 11px;\n background: #11111b;\n border: 1px solid #313244;\n color: #cdd6f4;\n padding: 2px 6px;\n border-radius: 4px;\n outline: none;\n}\n.te-add-class-input:focus {\n border-color: #89b4fa;\n}\n.te-add-success {\n border-color: #a6e3a1 !important;\n transition: border-color 300ms ease;\n}\n.te-diff-separator {\n border-top: 1px dashed #45475a;\n margin: 8px 0;\n}\n.te-diff-copy-all {\n width: 100%;\n justify-content: center;\n margin-top: 8px;\n}\n.te-switch {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n border: none;\n background: transparent;\n padding: 4px 0;\n font-family: inherit;\n}\n.te-switch-compact {\n gap: 6px;\n}\n.te-switch-track {\n display: inline-flex;\n align-items: center;\n border-radius: 999px;\n padding: 2px;\n transition: background 200ms ease;\n flex-shrink: 0;\n}\n.te-switch-thumb {\n background: #cdd6f4;\n border-radius: 50%;\n transition: transform 200ms ease;\n}\n.te-switch-label {\n font-size: 11px;\n font-weight: 600;\n font-family: monospace;\n transition: color 200ms ease;\n white-space: nowrap;\n}\n.te-switch-active .te-switch-track {\n animation: te-pulse 1.5s ease-in-out infinite;\n}\n.te-suggest-dropdown {\n z-index: 10001;\n}\n.te-suggest-item {\n padding: 4px 8px;\n font-family: monospace;\n font-size: 11px;\n color: #cdd6f4;\n cursor: pointer;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.te-suggest-item:hover,\n.te-suggest-item-active {\n background: #313244;\n color: #89b4fa;\n}\n.te-suggest-match {\n color: #89b4fa;\n font-weight: 700;\n}\n.te-chip-conflict {\n background: rgba(249, 226, 175, 0.15);\n border-color: #f9e2af;\n}\n.te-conflict-warning {\n color: #f9e2af;\n font-size: 12px;\n}\n.te-chip-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n color: #f9e2af;\n font-size: 10px;\n cursor: help;\n margin-left: 2px;\n}\n.te-chip-tooltip-text {\n display: none;\n position: absolute;\n bottom: calc(100% + 6px);\n left: 50%;\n transform: translateX(-50%);\n background: #313244;\n color: #cdd6f4;\n font-size: 10px;\n font-weight: 400;\n padding: 4px 8px;\n border-radius: 4px;\n white-space: nowrap;\n pointer-events: none;\n z-index: 10002;\n font-family:\n -apple-system,\n BlinkMacSystemFont,\n sans-serif;\n}\n.te-chip-tooltip:hover .te-chip-tooltip-text {\n display: block;\n}\n.te-migration-section {\n margin: 8px 0;\n padding: 8px;\n background: #181825;\n border-radius: 6px;\n border: 1px solid #313244;\n}\n.te-migration-header {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: #6c7086;\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.te-migration-row {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 6px;\n border-radius: 4px;\n cursor: pointer;\n font-family: monospace;\n font-size: 11px;\n margin-bottom: 2px;\n}\n.te-migration-row:hover {\n background: #313244;\n}\n.te-migration-from {\n color: #f38ba8;\n text-decoration: line-through;\n opacity: 0.9;\n}\n.te-migration-arrow {\n color: #6c7086;\n flex-shrink: 0;\n}\n.te-migration-to {\n color: #a6e3a1;\n}\n.te-migration-confidence {\n font-size: 9px;\n font-weight: 700;\n text-transform: uppercase;\n padding: 1px 4px;\n border-radius: 3px;\n margin-left: auto;\n flex-shrink: 0;\n}\n.te-migration-confidence[data-confidence=high] {\n background: rgba(166, 227, 161, 0.15);\n color: #a6e3a1;\n}\n.te-migration-confidence[data-confidence=medium] {\n background: rgba(249, 226, 175, 0.15);\n color: #f9e2af;\n}\n.te-migration-dismiss {\n border: none;\n background: none;\n color: #6c7086;\n cursor: pointer;\n font-size: 14px;\n padding: 0 2px;\n line-height: 1;\n flex-shrink: 0;\n}\n.te-migration-dismiss:hover {\n color: #f38ba8;\n}\n.te-typo-audit {\n margin: 8px 0;\n padding: 8px;\n background: #181825;\n border-radius: 6px;\n border: 1px solid #313244;\n}\n.te-typo-audit-header {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: #6c7086;\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.te-typo-status {\n font-size: 12px;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 6px;\n margin-bottom: 4px;\n}\n.te-typo-detail {\n font-size: 11px;\n color: #a6adc8;\n font-family: monospace;\n margin-bottom: 2px;\n}\n.te-typo-detail-muted {\n font-size: 11px;\n color: #6c7086;\n font-family: monospace;\n margin-bottom: 2px;\n}\n.te-typo-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 8px;\n padding-top: 6px;\n border-top: 1px solid #313244;\n}\n.te-raw-css-section {\n padding: 0;\n}\n.te-raw-css-clear {\n border: none;\n background: none;\n color: #89b4fa;\n cursor: pointer;\n font-size: 10px;\n font-family: inherit;\n padding: 0;\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n.te-raw-css-clear:hover {\n color: #74c7ec;\n}\n.te-chip-custom {\n border-left: 2px solid #89b4fa;\n}\n.te-chip-prop {\n color: #89b4fa;\n font-weight: 600;\n margin-right: 2px;\n}\n.te-chip-value {\n cursor: text;\n}\n.te-chip-value:hover {\n text-decoration: underline dotted;\n text-underline-offset: 2px;\n}\n.te-token-form {\n padding: 4px 0;\n}\n.te-token-form-back {\n border: none;\n background: none;\n color: #89b4fa;\n cursor: pointer;\n font-size: 11px;\n font-family: inherit;\n padding: 2px 0;\n margin-bottom: 8px;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n}\n.te-token-form-back:hover {\n color: #74c7ec;\n text-decoration: underline;\n}\n.te-token-form-title {\n font-size: 14px;\n font-weight: 600;\n color: #cdd6f4;\n margin-bottom: 4px;\n}\n.te-token-form-context {\n font-size: 11px;\n color: #6c7086;\n margin-bottom: 12px;\n font-family: monospace;\n}\n.te-token-form-field {\n margin-bottom: 12px;\n}\n.te-token-form-field .te-label {\n margin-bottom: 4px;\n}\n.te-token-form-error {\n color: #f38ba8;\n font-size: 10px;\n margin-top: 2px;\n}\n.te-token-form-checkbox {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n font-family: monospace;\n color: #cdd6f4;\n padding: 2px 0;\n cursor: pointer;\n}\n.te-token-form-checkbox input[type=checkbox] {\n margin: 0;\n cursor: pointer;\n}\n.te-token-form-prop-name {\n color: #89b4fa;\n}\n.te-token-form-prop-value {\n color: #a6adc8;\n}\n.te-token-form-radio-group {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.te-token-form-radio {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n color: #cdd6f4;\n cursor: pointer;\n}\n.te-token-form-radio input[type=radio] {\n margin: 0;\n cursor: pointer;\n}\n.te-token-form-actions {\n display: flex;\n gap: 6px;\n margin-top: 12px;\n}\n.te-creation-zone {\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid #313244;\n}\n.te-creation-trigger {\n width: 100%;\n justify-content: center;\n font-size: 11px;\n opacity: 0.6;\n}\n.te-creation-trigger:hover {\n opacity: 1;\n}\n.te-creation-form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.te-creation-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.te-creation-title {\n font-size: 14px;\n font-weight: 600;\n color: #cdd6f4;\n}\n.te-creation-cancel {\n border: none;\n background: none;\n color: #89b4fa;\n cursor: pointer;\n font-size: 11px;\n font-family: inherit;\n padding: 2px 0;\n}\n.te-creation-cancel:hover {\n color: #74c7ec;\n text-decoration: underline;\n}\n.te-creation-row {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.te-creation-row .te-control {\n padding: 0;\n margin: 0;\n background: none;\n border: none;\n}\n.te-creation-row-label {\n font-size: 11px;\n font-weight: 600;\n color: #bac2de;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n.te-creation-swatch {\n width: 20px;\n height: 20px;\n border-radius: 4px;\n border: 1px solid #45475a;\n flex-shrink: 0;\n}\n.te-format-toggle {\n display: flex;\n background: #313244;\n border-radius: 6px;\n padding: 2px;\n margin-bottom: 8px;\n}\n.te-format-btn {\n flex: 1;\n background: transparent;\n border: none;\n color: #6c7086;\n font-size: 10px;\n font-weight: 600;\n padding: 4px 8px;\n border-radius: 4px;\n cursor: pointer;\n font-family: inherit;\n}\n.te-format-btn:hover {\n color: #a6adc8;\n}\n.te-format-active {\n background: #45475a;\n color: #cdd6f4;\n}\n.te-trigger {\n position: fixed;\n bottom: 20px;\n right: 20px;\n z-index: 9998;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n border: none;\n background: #1e1e2e;\n color: #cdd6f4;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n font-family:\n -apple-system,\n BlinkMacSystemFont,\n "Segoe UI",\n Roboto,\n Helvetica,\n Arial,\n sans-serif;\n}\n.te-trigger-dot-baseline {\n position: absolute;\n top: -2px;\n left: -2px;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: #a6e3a1;\n}\n.te-trigger-badge {\n position: absolute;\n top: -2px;\n right: -2px;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #f38ba8;\n font-size: 9px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #1e1e2e;\n}\n');
5008
+
4984
5009
  // src/DevLens.tsx
4985
5010
  var import_dynamic = __toESM(require("next/dynamic"));
4986
5011
  init_DevLensProvider();
package/dist/index.mjs CHANGED
@@ -3,6 +3,31 @@ import {
3
3
  useDevLensConfig
4
4
  } from "./chunk-LWQVUC3L.mjs";
5
5
 
6
+ // #style-inject:#style-inject
7
+ function styleInject(css, { insertAt } = {}) {
8
+ if (!css || typeof document === "undefined") return;
9
+ const head = document.head || document.getElementsByTagName("head")[0];
10
+ const style = document.createElement("style");
11
+ style.type = "text/css";
12
+ if (insertAt === "top") {
13
+ if (head.firstChild) {
14
+ head.insertBefore(style, head.firstChild);
15
+ } else {
16
+ head.appendChild(style);
17
+ }
18
+ } else {
19
+ head.appendChild(style);
20
+ }
21
+ if (style.styleSheet) {
22
+ style.styleSheet.cssText = css;
23
+ } else {
24
+ style.appendChild(document.createTextNode(css));
25
+ }
26
+ }
27
+
28
+ // src/styles/devlens.css
29
+ styleInject('.te-drawer * {\n box-sizing: border-box;\n}\n.te-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 12px;\n border-bottom: 1px solid #313244;\n flex-shrink: 0;\n}\n.te-header-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n font-size: 14px;\n}\n.te-header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.te-dock-strip {\n display: flex;\n gap: 2px;\n background: #313244;\n padding: 2px;\n border-radius: 6px;\n}\n.te-dock-btn {\n padding: 4px 6px;\n border: none;\n background: transparent;\n color: #a6adc8;\n cursor: pointer;\n border-radius: 4px;\n display: flex;\n align-items: center;\n}\n.te-dock-btn:hover {\n color: #cdd6f4;\n background: #45475a;\n}\n.te-dock-active {\n background: #45475a !important;\n color: #89b4fa !important;\n}\n.te-tabs {\n display: flex;\n border-bottom: 1px solid #313244;\n flex-shrink: 0;\n}\n.te-tab {\n flex: 1;\n padding: 8px;\n border: none;\n background: transparent;\n color: #a6adc8;\n cursor: pointer;\n font-size: 12px;\n font-weight: 500;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n border-bottom: 2px solid transparent;\n font-family: inherit;\n}\n.te-tab:hover {\n color: #cdd6f4;\n}\n.te-tab-active {\n color: #89b4fa;\n border-bottom-color: #89b4fa;\n}\n.te-content {\n flex: 1;\n overflow-y: auto;\n padding: 8px;\n}\n.te-badge {\n background: #f38ba8;\n color: #1e1e2e;\n font-size: 10px;\n font-weight: 700;\n padding: 1px 6px;\n border-radius: 10px;\n min-width: 18px;\n text-align: center;\n}\n.te-badge-sm {\n font-size: 9px;\n padding: 0 4px;\n min-width: 14px;\n}\n.te-accordion {\n border: none;\n}\n.te-accordion-item {\n border-bottom: 1px solid #313244;\n}\n.te-accordion-item:last-child {\n border-bottom: none;\n}\n.te-accordion-trigger {\n padding: 8px 4px;\n font-size: 12px;\n font-weight: 600;\n color: #cdd6f4;\n text-decoration: none;\n font-family: inherit;\n}\n.te-accordion-trigger:hover {\n text-decoration: none;\n color: #89b4fa;\n}\n.te-accordion-trigger svg {\n color: #6c7086;\n}\n.te-accordion-content {\n font-size: 13px;\n}\n.te-change-badge {\n background: #fab387;\n color: #1e1e2e;\n font-size: 9px;\n font-weight: 700;\n padding: 0 5px;\n border-radius: 8px;\n margin-left: 6px;\n}\n.te-token-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.te-control {\n padding: 8px;\n background: #181825;\n border-radius: 6px;\n border: 1px solid #313244;\n}\n.te-control-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 6px;\n}\n.te-label {\n font-size: 11px;\n font-weight: 600;\n color: #bac2de;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.te-modified-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: #fab387;\n display: inline-block;\n}\n.te-control-actions {\n display: flex;\n gap: 4px;\n}\n.te-icon-btn {\n padding: 4px;\n border: none;\n background: transparent;\n color: #6c7086;\n cursor: pointer;\n border-radius: 4px;\n display: flex;\n align-items: center;\n}\n.te-icon-btn:hover {\n color: #cdd6f4;\n background: #313244;\n}\n.te-reset-btn:hover {\n color: #f38ba8 !important;\n}\n.te-muted {\n color: #6c7086;\n font-size: 11px;\n}\n.te-color-row {\n display: flex;\n gap: 8px;\n align-items: center;\n margin-bottom: 6px;\n}\n.te-color-swatch {\n width: 32px;\n height: 32px;\n border: 1px solid #45475a;\n border-radius: 4px;\n cursor: pointer;\n padding: 0;\n background: none;\n}\n.te-color-swatch::-webkit-color-swatch-wrapper {\n padding: 2px;\n}\n.te-color-swatch::-webkit-color-swatch {\n border: none;\n border-radius: 2px;\n}\n.te-text-input {\n background: #11111b;\n border: 1px solid #313244;\n color: #cdd6f4;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n font-family: monospace;\n outline: none;\n}\n.te-text-input:focus {\n border-color: #89b4fa;\n}\n.te-hex-input {\n width: 80px;\n}\n.te-num-input {\n width: 72px;\n}\n.te-select {\n background: #11111b;\n border: 1px solid #313244;\n color: #cdd6f4;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n font-family: inherit;\n outline: none;\n cursor: pointer;\n}\n.te-select:focus {\n border-color: #89b4fa;\n}\n.te-select-full {\n width: 100%;\n}\n.te-slider-group {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.te-slider-row {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.te-slider-label {\n width: 12px;\n font-size: 10px;\n font-weight: 700;\n color: #6c7086;\n text-align: center;\n}\n.te-slider-value {\n width: 40px;\n font-size: 10px;\n color: #a6adc8;\n text-align: right;\n font-family: monospace;\n}\n.te-slider {\n flex: 1;\n height: 4px;\n -webkit-appearance: none;\n appearance: none;\n background: #313244;\n border-radius: 2px;\n outline: none;\n}\n.te-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: #89b4fa;\n cursor: pointer;\n}\n.te-slider-full {\n width: 100%;\n margin-top: 4px;\n}\n.te-length-row {\n display: flex;\n gap: 6px;\n margin-bottom: 4px;\n}\n.te-font-preview {\n margin-top: 6px;\n padding: 4px 8px;\n background: #11111b;\n border-radius: 4px;\n color: #cdd6f4;\n font-family: var(--devlens-preview-font, inherit);\n}\n.te-shadow-preview {\n margin-top: 8px;\n width: 100%;\n height: 24px;\n background: #313244;\n border-radius: 4px;\n}\n.te-diff {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.te-diff-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 8px;\n}\n.te-diff-title {\n font-weight: 600;\n font-size: 13px;\n}\n.te-diff-actions {\n display: flex;\n gap: 6px;\n}\n.te-diff-empty {\n color: #6c7086;\n text-align: center;\n padding: 32px 16px;\n font-size: 13px;\n}\n.te-diff-content {\n background: #11111b;\n border: 1px solid #313244;\n border-radius: 6px;\n padding: 12px;\n font-size: 11px;\n font-family: monospace;\n color: #a6e3a1;\n overflow-x: auto;\n white-space: pre-wrap;\n word-break: break-all;\n margin: 0;\n}\n.te-diff-section {\n margin-bottom: 12px;\n}\n.te-diff-section-title {\n font-size: 12px;\n font-weight: 600;\n margin-bottom: 4px;\n color: #a6adc8;\n display: flex;\n align-items: center;\n}\n.te-btn {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 600;\n cursor: pointer;\n border: 1px solid transparent;\n font-family: inherit;\n}\n.te-btn-primary {\n background: #89b4fa;\n color: #1e1e2e;\n border-color: #89b4fa;\n}\n.te-btn-primary:hover {\n background: #74c7ec;\n}\n.te-btn-secondary {\n background: transparent;\n color: #a6adc8;\n border-color: #45475a;\n}\n.te-btn-secondary:hover {\n background: #313244;\n color: #cdd6f4;\n}\n.te-scale {\n display: flex;\n flex-direction: column;\n}\n.te-scale-reset-row {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 4px;\n}\n.te-scale-control-row {\n display: flex;\n flex-direction: column;\n}\n.te-scale-preview {\n background: #11111b;\n border-radius: 6px;\n padding: 8px 10px;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n.te-scale-preview-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 6px;\n padding-bottom: 4px;\n border-bottom: 1px solid #313244;\n}\n.te-scale-row {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n padding: 3px 0;\n}\n.te-scale-sample {\n color: #cdd6f4;\n font-family: var(--devlens-preview-font, inherit);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 60%;\n}\n.te-scale-meta {\n display: flex;\n align-items: baseline;\n gap: 8px;\n flex-shrink: 0;\n}\n.te-scale-px {\n font-size: 11px;\n color: #a6adc8;\n font-family: monospace;\n}\n.te-scale-step {\n font-size: 10px;\n color: #6c7086;\n font-family: monospace;\n width: 28px;\n text-align: right;\n}\n.te-managed-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6px 8px;\n background: #181825;\n border-radius: 6px;\n border: 1px solid #313244;\n opacity: 0.7;\n}\n.te-managed-meta {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.te-managed-value {\n font-size: 11px;\n font-family: monospace;\n color: #a6adc8;\n}\n.te-managed-badge {\n font-size: 9px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n padding: 1px 5px;\n border-radius: 4px;\n background: #313244;\n color: #6c7086;\n}\n.te-usage-hint {\n position: relative;\n display: inline-flex;\n align-items: center;\n color: #6c7086;\n cursor: help;\n}\n.te-usage-hint-tooltip {\n display: none;\n position: absolute;\n bottom: calc(100% + 6px);\n left: 50%;\n transform: translateX(-50%);\n background: #313244;\n color: #cdd6f4;\n font-size: 10px;\n font-weight: 400;\n text-transform: none;\n letter-spacing: normal;\n padding: 4px 8px;\n border-radius: 4px;\n white-space: nowrap;\n pointer-events: none;\n z-index: 10;\n}\n.te-usage-hint:hover .te-usage-hint-tooltip {\n display: block;\n}\n.te-inspector-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px 16px;\n color: #6c7086;\n text-align: center;\n font-size: 13px;\n}\n.te-selector-toggle {\n border-color: #45475a;\n}\n.te-selector-active {\n border-color: #89b4fa !important;\n color: #89b4fa !important;\n background: rgba(137, 180, 250, 0.1) !important;\n animation: te-pulse 1.5s ease-in-out infinite;\n}\n@keyframes te-pulse {\n 0%, 100% {\n border-color: #89b4fa;\n }\n 50% {\n border-color: transparent;\n }\n}\n.te-element-info {\n border-bottom: 1px solid #313244;\n padding: 8px 0;\n margin-bottom: 8px;\n}\n.te-element-tag {\n font-family: monospace;\n color: #89b4fa;\n font-size: 14px;\n font-weight: 600;\n}\n.te-element-text {\n color: #6c7086;\n font-size: 12px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-top: 2px;\n}\n.te-breadcrumb {\n display: inline-flex;\n flex-wrap: wrap;\n font-family: monospace;\n font-size: 11px;\n color: #6c7086;\n gap: 0;\n margin-top: 4px;\n}\n.te-class-group {\n margin-bottom: 12px;\n}\n.te-class-group-header {\n font-size: 11px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: #6c7086;\n margin-bottom: 4px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.te-class-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n}\n.te-chip {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-family: monospace;\n font-size: 11px;\n background: #181825;\n border: 1px solid #313244;\n padding: 2px 6px;\n border-radius: 4px;\n position: relative;\n cursor: default;\n color: #cdd6f4;\n}\n.te-chip-modified {\n background: rgba(250, 179, 135, 0.15);\n border-color: #fab387;\n}\n.te-chip-remove {\n display: none;\n font-size: 14px;\n color: #6c7086;\n cursor: pointer;\n border: none;\n background: none;\n padding: 0;\n line-height: 1;\n}\n.te-chip:hover .te-chip-remove {\n display: inline-flex;\n}\n.te-chip-remove:hover {\n color: #f38ba8;\n}\n.te-chip-edit {\n font-family: monospace;\n font-size: 11px;\n background: #11111b;\n border: 1px solid #89b4fa;\n color: #cdd6f4;\n padding: 2px 6px;\n border-radius: 4px;\n outline: none;\n}\n.te-chip-add-btn {\n border: none;\n background: none;\n color: #6c7086;\n cursor: pointer;\n padding: 2px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n}\n.te-chip-add-btn:hover {\n color: #89b4fa;\n background: #313244;\n}\n.te-add-class-input {\n font-family: monospace;\n font-size: 11px;\n background: #11111b;\n border: 1px solid #313244;\n color: #cdd6f4;\n padding: 2px 6px;\n border-radius: 4px;\n outline: none;\n}\n.te-add-class-input:focus {\n border-color: #89b4fa;\n}\n.te-add-success {\n border-color: #a6e3a1 !important;\n transition: border-color 300ms ease;\n}\n.te-diff-separator {\n border-top: 1px dashed #45475a;\n margin: 8px 0;\n}\n.te-diff-copy-all {\n width: 100%;\n justify-content: center;\n margin-top: 8px;\n}\n.te-switch {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n border: none;\n background: transparent;\n padding: 4px 0;\n font-family: inherit;\n}\n.te-switch-compact {\n gap: 6px;\n}\n.te-switch-track {\n display: inline-flex;\n align-items: center;\n border-radius: 999px;\n padding: 2px;\n transition: background 200ms ease;\n flex-shrink: 0;\n}\n.te-switch-thumb {\n background: #cdd6f4;\n border-radius: 50%;\n transition: transform 200ms ease;\n}\n.te-switch-label {\n font-size: 11px;\n font-weight: 600;\n font-family: monospace;\n transition: color 200ms ease;\n white-space: nowrap;\n}\n.te-switch-active .te-switch-track {\n animation: te-pulse 1.5s ease-in-out infinite;\n}\n.te-suggest-dropdown {\n z-index: 10001;\n}\n.te-suggest-item {\n padding: 4px 8px;\n font-family: monospace;\n font-size: 11px;\n color: #cdd6f4;\n cursor: pointer;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.te-suggest-item:hover,\n.te-suggest-item-active {\n background: #313244;\n color: #89b4fa;\n}\n.te-suggest-match {\n color: #89b4fa;\n font-weight: 700;\n}\n.te-chip-conflict {\n background: rgba(249, 226, 175, 0.15);\n border-color: #f9e2af;\n}\n.te-conflict-warning {\n color: #f9e2af;\n font-size: 12px;\n}\n.te-chip-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n color: #f9e2af;\n font-size: 10px;\n cursor: help;\n margin-left: 2px;\n}\n.te-chip-tooltip-text {\n display: none;\n position: absolute;\n bottom: calc(100% + 6px);\n left: 50%;\n transform: translateX(-50%);\n background: #313244;\n color: #cdd6f4;\n font-size: 10px;\n font-weight: 400;\n padding: 4px 8px;\n border-radius: 4px;\n white-space: nowrap;\n pointer-events: none;\n z-index: 10002;\n font-family:\n -apple-system,\n BlinkMacSystemFont,\n sans-serif;\n}\n.te-chip-tooltip:hover .te-chip-tooltip-text {\n display: block;\n}\n.te-migration-section {\n margin: 8px 0;\n padding: 8px;\n background: #181825;\n border-radius: 6px;\n border: 1px solid #313244;\n}\n.te-migration-header {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: #6c7086;\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.te-migration-row {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 6px;\n border-radius: 4px;\n cursor: pointer;\n font-family: monospace;\n font-size: 11px;\n margin-bottom: 2px;\n}\n.te-migration-row:hover {\n background: #313244;\n}\n.te-migration-from {\n color: #f38ba8;\n text-decoration: line-through;\n opacity: 0.9;\n}\n.te-migration-arrow {\n color: #6c7086;\n flex-shrink: 0;\n}\n.te-migration-to {\n color: #a6e3a1;\n}\n.te-migration-confidence {\n font-size: 9px;\n font-weight: 700;\n text-transform: uppercase;\n padding: 1px 4px;\n border-radius: 3px;\n margin-left: auto;\n flex-shrink: 0;\n}\n.te-migration-confidence[data-confidence=high] {\n background: rgba(166, 227, 161, 0.15);\n color: #a6e3a1;\n}\n.te-migration-confidence[data-confidence=medium] {\n background: rgba(249, 226, 175, 0.15);\n color: #f9e2af;\n}\n.te-migration-dismiss {\n border: none;\n background: none;\n color: #6c7086;\n cursor: pointer;\n font-size: 14px;\n padding: 0 2px;\n line-height: 1;\n flex-shrink: 0;\n}\n.te-migration-dismiss:hover {\n color: #f38ba8;\n}\n.te-typo-audit {\n margin: 8px 0;\n padding: 8px;\n background: #181825;\n border-radius: 6px;\n border: 1px solid #313244;\n}\n.te-typo-audit-header {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: #6c7086;\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.te-typo-status {\n font-size: 12px;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 6px;\n margin-bottom: 4px;\n}\n.te-typo-detail {\n font-size: 11px;\n color: #a6adc8;\n font-family: monospace;\n margin-bottom: 2px;\n}\n.te-typo-detail-muted {\n font-size: 11px;\n color: #6c7086;\n font-family: monospace;\n margin-bottom: 2px;\n}\n.te-typo-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 8px;\n padding-top: 6px;\n border-top: 1px solid #313244;\n}\n.te-raw-css-section {\n padding: 0;\n}\n.te-raw-css-clear {\n border: none;\n background: none;\n color: #89b4fa;\n cursor: pointer;\n font-size: 10px;\n font-family: inherit;\n padding: 0;\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n.te-raw-css-clear:hover {\n color: #74c7ec;\n}\n.te-chip-custom {\n border-left: 2px solid #89b4fa;\n}\n.te-chip-prop {\n color: #89b4fa;\n font-weight: 600;\n margin-right: 2px;\n}\n.te-chip-value {\n cursor: text;\n}\n.te-chip-value:hover {\n text-decoration: underline dotted;\n text-underline-offset: 2px;\n}\n.te-token-form {\n padding: 4px 0;\n}\n.te-token-form-back {\n border: none;\n background: none;\n color: #89b4fa;\n cursor: pointer;\n font-size: 11px;\n font-family: inherit;\n padding: 2px 0;\n margin-bottom: 8px;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n}\n.te-token-form-back:hover {\n color: #74c7ec;\n text-decoration: underline;\n}\n.te-token-form-title {\n font-size: 14px;\n font-weight: 600;\n color: #cdd6f4;\n margin-bottom: 4px;\n}\n.te-token-form-context {\n font-size: 11px;\n color: #6c7086;\n margin-bottom: 12px;\n font-family: monospace;\n}\n.te-token-form-field {\n margin-bottom: 12px;\n}\n.te-token-form-field .te-label {\n margin-bottom: 4px;\n}\n.te-token-form-error {\n color: #f38ba8;\n font-size: 10px;\n margin-top: 2px;\n}\n.te-token-form-checkbox {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n font-family: monospace;\n color: #cdd6f4;\n padding: 2px 0;\n cursor: pointer;\n}\n.te-token-form-checkbox input[type=checkbox] {\n margin: 0;\n cursor: pointer;\n}\n.te-token-form-prop-name {\n color: #89b4fa;\n}\n.te-token-form-prop-value {\n color: #a6adc8;\n}\n.te-token-form-radio-group {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.te-token-form-radio {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n color: #cdd6f4;\n cursor: pointer;\n}\n.te-token-form-radio input[type=radio] {\n margin: 0;\n cursor: pointer;\n}\n.te-token-form-actions {\n display: flex;\n gap: 6px;\n margin-top: 12px;\n}\n.te-creation-zone {\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid #313244;\n}\n.te-creation-trigger {\n width: 100%;\n justify-content: center;\n font-size: 11px;\n opacity: 0.6;\n}\n.te-creation-trigger:hover {\n opacity: 1;\n}\n.te-creation-form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.te-creation-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.te-creation-title {\n font-size: 14px;\n font-weight: 600;\n color: #cdd6f4;\n}\n.te-creation-cancel {\n border: none;\n background: none;\n color: #89b4fa;\n cursor: pointer;\n font-size: 11px;\n font-family: inherit;\n padding: 2px 0;\n}\n.te-creation-cancel:hover {\n color: #74c7ec;\n text-decoration: underline;\n}\n.te-creation-row {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.te-creation-row .te-control {\n padding: 0;\n margin: 0;\n background: none;\n border: none;\n}\n.te-creation-row-label {\n font-size: 11px;\n font-weight: 600;\n color: #bac2de;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n.te-creation-swatch {\n width: 20px;\n height: 20px;\n border-radius: 4px;\n border: 1px solid #45475a;\n flex-shrink: 0;\n}\n.te-format-toggle {\n display: flex;\n background: #313244;\n border-radius: 6px;\n padding: 2px;\n margin-bottom: 8px;\n}\n.te-format-btn {\n flex: 1;\n background: transparent;\n border: none;\n color: #6c7086;\n font-size: 10px;\n font-weight: 600;\n padding: 4px 8px;\n border-radius: 4px;\n cursor: pointer;\n font-family: inherit;\n}\n.te-format-btn:hover {\n color: #a6adc8;\n}\n.te-format-active {\n background: #45475a;\n color: #cdd6f4;\n}\n.te-trigger {\n position: fixed;\n bottom: 20px;\n right: 20px;\n z-index: 9998;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n border: none;\n background: #1e1e2e;\n color: #cdd6f4;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n font-family:\n -apple-system,\n BlinkMacSystemFont,\n "Segoe UI",\n Roboto,\n Helvetica,\n Arial,\n sans-serif;\n}\n.te-trigger-dot-baseline {\n position: absolute;\n top: -2px;\n left: -2px;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: #a6e3a1;\n}\n.te-trigger-badge {\n position: absolute;\n top: -2px;\n right: -2px;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #f38ba8;\n font-size: 9px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #1e1e2e;\n}\n');
30
+
6
31
  // src/DevLens.tsx
7
32
  import dynamic from "next/dynamic";
8
33
  import { jsx } from "react/jsx-runtime";
package/package.json CHANGED
@@ -1,15 +1,15 @@
1
1
  {
2
2
  "name": "@dwntgrnd/devlens",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "description": "Live design token editor and element inspector for Next.js + Tailwind CSS projects",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",
8
8
  "exports": {
9
9
  ".": {
10
+ "types": "./dist/index.d.ts",
10
11
  "import": "./dist/index.mjs",
11
- "require": "./dist/index.js",
12
- "types": "./dist/index.d.ts"
12
+ "require": "./dist/index.js"
13
13
  },
14
14
  "./styles": "./dist/devlens.css"
15
15
  },
@@ -19,8 +19,8 @@
19
19
  "LICENSE"
20
20
  ],
21
21
  "scripts": {
22
- "build": "tsup src/index.ts --format cjs,esm --dts",
23
- "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
22
+ "build": "tsup",
23
+ "dev": "tsup --watch",
24
24
  "typecheck": "tsc --noEmit",
25
25
  "lint": "eslint src/"
26
26
  },
@@ -45,7 +45,7 @@
45
45
  "license": "MIT",
46
46
  "repository": {
47
47
  "type": "git",
48
- "url": ""
48
+ "url": "https://github.com/dwntgrnd/devlens.git"
49
49
  },
50
50
  "keywords": [
51
51
  "design-tokens",