uivisor 0.1.0 → 0.1.2

package/README.md

@@ -2,69 +2,25 @@
 
 <img src="./uivisor.jpg" alt="uivisor" width="100%" />
 
-<h3>Point at any element in your running app, tweak it by hand, and copy a precise,<br/>breakpoint-aware prompt for your AI agent — without ever touching your code.</h3>
-
 <p>
-  <img alt="dev only" src="https://img.shields.io/badge/dev--only-never%20ships%20to%20prod-22c55e?style=flat-square" />
+  <img alt="npm" src="https://img.shields.io/npm/v/uivisor?style=flat-square&color=cb3837&label=npm" />
+  <img alt="dev only" src="https://img.shields.io/badge/только%20dev-в%20прод%20не%20попадает-22c55e?style=flat-square" />
   <img alt="stack" src="https://img.shields.io/badge/React%20·%20Next.js%20·%20Vite-4f46e5?style=flat-square" />
-  <img alt="prompt only" src="https://img.shields.io/badge/prompt--only-no%20code%20mutation-06b6d4?style=flat-square" />
   <img alt="license" src="https://img.shields.io/badge/license-MIT-3f3f46?style=flat-square" />
 </p>
 
 </div>
 
----
-
-## The problem
-
-You spot a small UI nit in your running app — this padding's too tight, that heading wants a heavier
-weight, those cards need more radius at `lg`. Two bad options:
-
-1. **Dig into the code** yourself for a one-line change, or
-2. **Burn agent tokens** describing it in prose — *"on the pricing page, the middle card's button…"* — and hope the agent finds the right element.
-
-**uivisor** is a third option. Turn it on, **click the element, nudge it with your mouse**, and it hands you a
-copy-paste instruction that pins the **exact file & line**, the **styling mechanism**, the **breakpoint**, and
-**what to change** — so your agent makes the edit in one shot. uivisor itself **never writes to your source**;
-your tweaks are throwaway inline overrides in the browser.
-
-## What you get
-
-Click a button, bump its padding and color, hit **Copy prompt for agent**, and you get:
-
-```md
-# uivisor — apply these UI tweaks (2 changes across 1 element)
-
-## 1. <button> "Get started" — src/components/PricingCard.tsx:26:7
-- Identify by: component <PricingCard>, data-testid="buy-pro", selector `button[data-testid="buy-pro"]`
-- Styling: tailwind (current classes: `mt-6 w-full rounded-md px-4 py-2 bg-indigo-600 text-white`)
-- At lg breakpoint (≥1024px):
-    - padding: 16px → 24px  → `lg:p-6`
-    - background-color: rgb(79,70,229) → #16a34a  → `lg:bg-[#16a34a]`
+Dev-only инструмент для React / Next.js / Vite. Кликни элемент в работающем приложении, поправь его мышкой — панель показывает текущие стили, твои правки подсвечены зелёным. Нажми **Copy prompt for agent** — получишь промпт с `file:line:col`, механизмом стилей и брейкпоинтом, готовый для Claude Code / Cursor.
 
-### Rules
-- Edit the EXISTING className/styles. Do NOT add inline styles or duplicate the component.
-- Scope each change to its breakpoint with a responsive variant (e.g. `lg:`).
-- Confirm the element by its source location, text and data-testid before editing.
-```
-
-Paste that into Claude Code / Cursor / whatever — done. No more *"page 55, that thing"*.
+В исходники не пишет. Правки — временные inline-оверрайды в браузере, пропадают при reload.
 
 ---
 
-## Quick start
-
-> uivisor runs **only in dev** (`apply: 'serve'` / gated to `next dev`). It is **physically absent from your
-> production build.**
-
-It isn't on npm yet, so for a real project link it locally (rebuild + restart picks up changes — no reinstall):
+## Установка
 
 ```bash
-# in the uivisor folder
-npm install && npm run build
-
-# in YOUR project
-npm i -D file:/absolute/path/to/uivisor
+npm i -D uivisor
 ```
 
 ### Vite + React
@@ -76,98 +32,118 @@ import uivisor from 'uivisor/vite'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
-  plugins: [uivisor(), react()], //  ⚠️  uivisor() BEFORE react()
+  plugins: [uivisor(), react()], // uivisor() — до react()
 })
 ```
 
-### Next.js
+Запусти dev-сервер и нажми **`Alt`+`U`**.
+
+### Next.js (App Router, Next 13–16)
+
+**1. Оберни конфиг:**
+
+```ts
+// next.config.ts
+import { withUivisor } from 'uivisor/next'
+export default withUivisor({ reactStrictMode: true })
+```
 
 ```js
-// next.config.js
+// next.config.js (CommonJS)
 const { withUivisor } = require('uivisor/next')
+module.exports = withUivisor({ reactStrictMode: true })
+```
+
+**2. Добавь оверлей в корневой layout:**
 
-/** @type {import('next').NextConfig} */
-const nextConfig = { reactStrictMode: true }
+```tsx
+// app/layout.tsx
+import { UivisorOverlay } from 'uivisor/next/overlay'
 
-module.exports = withUivisor(nextConfig)
+export default function RootLayout({ children }) {
+  return <html><body>{children}<UivisorOverlay /></body></html>
+}
 ```
 
-> Use plain `next dev` (webpack). Turbopack (`--turbo`) ignores `webpack()` config, so source locations
-> won't be injected under it yet.
+**3. Запусти `next dev` и нажми `Alt`+`U`.**
 
-Then `npm run dev` and press **`Alt`+`U`** (or click the **◎** button bottom-right).
+Работает под обоими бандлерами:
 
-#### Keeping it updated while we iterate
+| Команда | Оверлей | Точный `file:line` |
+|---|---|---|
+| `next dev` (Turbopack, по умолчанию в Next 15/16) | ✅ | ✅ |
+| `next dev --webpack` | ✅ | ✅ |
 
-Linked with `file:` → after any change to uivisor, just `npm run build` in the uivisor folder and **restart your
-dev server**. No reinstall. (For Next, clear `.next/` if HMR doesn't pick it up.)
+> Чтобы отключить source-mapping под Turbopack: `withUivisor(config, { turbopack: false })` — оверлей продолжит работать, `file:line` доступен через `next dev --webpack`.
+>
+> Под Turbopack ставь uivisor **из npm** (`npm i -D uivisor`). Локальный `file:`-линк (`file:../uivisor`) Turbopack не резолвит для сабпасов вроде `uivisor/next/overlay` — будет `Module not found`. С webpack `file:`-линк работает.
 
 ---
 
-## Using the panel
-
-1. **`Alt`+`U`** toggles uivisor · **Esc** deselects.
-2. **Click any element.** A Figma-like inspector fills with its spacing / border / typography / fill —
-   only the controls that are relevant (Typography shows on text elements, Gap on flex/grid containers).
-3. **Tweak:**
-   - **Combined-by-default** — Padding / Margin / Radius show one "all sides" input; click **▦** to split into
-     individual sides/corners.
-   - **Drag-to-scrub** — drag the icon on the left of any number field (cursor → ↔) to change it live.
-   - **Units** — line-height & letter-spacing have a px / % / em / × selector and always show the current number.
-4. **Screen / breakpoint** — click `md` / `lg` / … and the app loads in a **virtual screen at that width**
-   (real CSS media queries reflow); drag the frame edge to fine-tune. Only your project's **real breakpoints**
-   are shown. Edits are scoped to the chosen breakpoint (`lg:p-6`). `Live` = your real window.
-5. **Apply changes to** — pick the edit target:
-   - **All N like this** — when the element is a repeated sibling (same component/source, e.g. 3 cards), the
-     change previews on *all* of them and the prompt tells the agent to edit the shared component/source.
-   - **Only this one** · an existing **`.class`** · or **a new class you name** (agent creates it, leaves the rest).
-6. **Copy prompt for agent** (or **Copy JSON** for the machine-readable spec).
-
-Nothing is written to disk — tweaks live in the browser and vanish on reload.
+## Работа с панелью
+
+**`Alt`+`U`** — включить/выключить · **`Esc`** — снять выделение · **◎** — кнопка справа снизу.
+
+1. **Кликни любой элемент.** Панель подтягивает его текущие стили: значения из браузера горят белым, правки в uivisor — зелёным.
+2. **Правь:**
+   - Padding / Margin / Radius — одно поле на все стороны; кнопка **▦** раскрывает по отдельности.
+   - Иконка слева от числа (↔) — тяни, значение меняется вживую.
+   - Line-height и letter-spacing — переключатель единиц px / % / em.
+3. **Screen / breakpoint** — клик на `md` / `lg` / … загружает приложение в виртуальный экран этой ширины (реальные медиа-запросы перестраиваются). В баре — только брейкпоинты твоего проекта. `Live` — реальное окно.
+4. **Apply changes to** — куда применить правку:
+   - **All N like this** — если компонент повторяется N раз, превью и промпт применяются ко всем; агент правит общий компонент, а не `nth-child`.
+   - **Only this one** / существующий `.class` / новый класс с именем.
+5. **Copy prompt for agent** — промпт в буфер. **Copy JSON** — машиночитаемый спек.
 
 ---
 
-## For your AI agent
+## Промпт для агента
+
+```md
+# uivisor — apply these UI tweaks (2 changes across 1 element)
+
+## 1. <button> "Get started" — src/components/PricingCard.tsx:26:7
+- Identify by: component <PricingCard>, data-testid="buy-pro"
+- Styling: tailwind (current classes: `mt-6 w-full rounded-md px-4 py-2 bg-indigo-600 text-white`)
+- At lg breakpoint (≥1024px):
+    - padding: 16px → 24px  →  `lg:p-6`
+    - background-color: #4f46e5 → #16a34a  →  `lg:bg-[#16a34a]`
+
+### Rules
+- Edit the EXISTING className/styles. Do NOT add inline styles or duplicate the component.
+- Scope each change to its breakpoint with a responsive variant (e.g. `lg:`).
+```
 
-uivisor's output is a **self-contained instruction**, designed to be acted on without extra context. When you
-receive a uivisor prompt:
+Инструкции агенту:
 
-- **Go to the `file:line:col`** it names — that's the authoritative anchor (injected in dev, React-19 safe).
-- **Edit the existing styling mechanism** it identifies (`tailwind` / `css-modules` / `styled-components` /
-  `inline` / `plain-css`) — not inline styles, and don't duplicate the component.
-- **Respect the breakpoint scope** — emit the responsive variant (`lg:…`), don't make it global.
-- **Respect the target** — `All N like this` means edit the shared component/class so every instance updates;
-  `new class` means create it and leave existing classes untouched; a positional `nth-of-type` selector is a
-  last-resort locator, never the thing to hard-code against.
+- Иди по `file:line:col` — главный якорь.
+- Правь существующий механизм стилей (`tailwind` / `css-modules` / `styled-components` / `inline`) — не добавляй inline и не дублируй компонент.
+- Отдавай responsive-вариант под нужный брейкпоинт.
+- `All N like this` — правь общий компонент/класс, не `nth-child`.
 
 ---
 
-## How it works
+## Как это устроено
 
-- **Source mapping** — a tiny dev-only Babel pass tags host JSX with `data-uiv-src="file:line:col"`
-  (Vite plugin runs it `enforce: 'pre'`; Next runs it as a webpack pre-loader, keeping SWC).
-- **Identity, layered** — file:line → component name (from the file) → `data-testid` / id / stable selector / text.
-- **Mechanism + tokens** — detects how the element is styled and reverse-maps px to Tailwind tokens
-  (`24px → p-6`, `leading-normal`, `tracking-tight`), with arbitrary-value fallback.
-- **Breakpoints** — detected from the `@media` rules in your CSS, so the bar shows *your* breakpoints.
-- **Responsive preview** — the app is loaded in a resizable iframe so real media queries reflow; the inspector
-  operates inside it.
+- **Source mapping** — dev-only Babel/loader вешает `data-uiv-src="file:line:col"` на host-JSX. Vite — плагином `enforce: 'pre'`, Next — webpack pre-loader и `turbopack.rules` (SWC сохраняется).
+- **Идентичность** — file:line → имя компонента → `data-testid` / id / селектор / текст.
+- **Токены** — маппит px в Tailwind-токены (`24px → p-6`, `leading-normal`); arbitrary-значения как фолбэк.
+- **Брейкпоинты** — детектятся из `@media`-правил твоего CSS.
+- **Responsive-превью** — приложение в ресайзимом iframe, медиа-запросы работают по-настоящему.
 
-## Limitations
+## Ограничения
 
-- **Dev builds only** — production strips source info and mangles classes.
-- **React-first** — the DOM/CSS/breakpoint core is framework-agnostic; only source mapping is React-specific today.
-- **Tailwind-tuned tokens** — non-Tailwind stacks get raw px + selector guidance (the prompt says which
-  CSS-module / styled rule to edit).
+- Только dev-сборки — прод вырезает source-инфо.
+- Source mapping — React. DOM/CSS/брейкпоинты — фреймворк-агностично.
+- Tailwind — px→токены. Другие стеки — сырые px + указание на CSS-правило.
 
-## Develop
+## Разработка
 
 ```bash
 npm install
-npm run build        # tsup → dist/{vite,babel,overlay,next}
-npm test             # vitest (pure logic + babel transform)
-npm run demo         # Vite + React playground on :5180
-# demo-next/         # Next.js (app router) playground on :5181
+npm run build   # tsup → dist/{vite,babel,overlay,next}
+npm test        # vitest
+npm run demo    # Vite + React на :5180
 ```
 
 <div align="center"><sub>MIT · dev-only · prompt-only</sub></div>

package/dist/next/index.cjs

@@ -35,13 +35,34 @@ __export(next_exports, {
 });
 module.exports = __toCommonJS(next_exports);
 var path = __toESM(require("path"), 1);
+var import_node_module = require("module");
+var isProd = () => process.env.NODE_ENV === "production";
+var isTurbopack = () => !!process.env.TURBOPACK || !!process.env.TURBOPACK_DEV;
+function nextMajor() {
+  try {
+    const req = (0, import_node_module.createRequire)(path.join(process.cwd(), "package.json"));
+    return parseInt(req("next/package.json").version, 10) || 0;
+  } catch {
+    return 0;
+  }
+}
+var hintShown = false;
+function turbopackHint(canSourceMap) {
+  if (hintShown || !isTurbopack() || isProd()) return;
+  hintShown = true;
+  console.log(
+    '\n[uivisor] Turbopack detected.\n  \u2022 Overlay: render <UivisorOverlay/> from "uivisor/next/overlay" in your root layout.\n' + (canSourceMap ? "  \u2022 Source locations: ON via turbopack.rules.\n" : "  \u2022 Exact file:line: use `next dev --webpack` (or remove `{ turbopack: false }`).\n")
+  );
+}
 function withUivisor(nextConfig = {}, options = {}) {
   const attr = options.attr || "data-uiv-src";
   const loaderPath = path.join(__dirname, "loader.cjs");
   const overlayPath = path.join(__dirname, "..", "overlay", "index.js");
-  return {
-    ...nextConfig,
-    webpack(config, ctx) {
+  const useTurbopack = options.turbopack !== false && isTurbopack() && !isProd();
+  turbopackHint(useTurbopack);
+  const out = { ...nextConfig };
+  if (!isTurbopack()) {
+    out.webpack = (config, ctx) => {
       if (typeof nextConfig.webpack === "function") {
         config = nextConfig.webpack(config, ctx);
       }
@@ -71,8 +92,29 @@ function withUivisor(nextConfig = {}, options = {}) {
         };
       }
       return config;
+    };
+  }
+  if (useTurbopack) {
+    const ld = [{ loader: "uivisor/next/loader", options: { attr } }];
+    const rules = {
+      "*.tsx": { loaders: ld, as: "*.tsx" },
+      "*.jsx": { loaders: ld, as: "*.jsx" }
+    };
+    const major = nextMajor();
+    if (major === 0 || major >= 15) {
+      out.turbopack = {
+        ...nextConfig.turbopack,
+        rules: { ...nextConfig.turbopack?.rules ?? {}, ...rules }
+      };
+    } else {
+      const exp = nextConfig.experimental ?? {};
+      out.experimental = {
+        ...exp,
+        turbo: { ...exp.turbo ?? {}, rules: { ...exp.turbo?.rules ?? {}, ...rules } }
+      };
     }
-  };
+  }
+  return out;
 }
 var next_default = withUivisor;
 // Annotate the CommonJS export names for ESM import in node:

package/dist/next/index.d.cts

@@ -0,0 +1,41 @@
+interface WebpackContext {
+    dev: boolean;
+    isServer: boolean;
+}
+type NextConfig = {
+    webpack?: ((config: any, ctx: WebpackContext) => any) | null;
+    turbopack?: any;
+    [key: string]: unknown;
+};
+interface UivisorNextOptions {
+    /** data attribute name for source locations. Default: "data-uiv-src" */
+    attr?: string;
+    /**
+     * Register the source-location loader for Turbopack (`turbopack.rules`) so
+     * `data-uiv-src` is injected under plain `next dev` too. Default: true.
+     * Set false to disable if it ever conflicts with your setup (the overlay still
+     * works via <UivisorOverlay/>; use `next dev --webpack` for source attrs then).
+     */
+    turbopack?: boolean;
+}
+/**
+ * Wrap your Next.js config to enable uivisor in dev.
+ *
+ *   // next.config.ts / .mjs
+ *   import { withUivisor } from 'uivisor/next'
+ *   export default withUivisor({ ...yourConfig })
+ *
+ *   // next.config.js (CommonJS)
+ *   const { withUivisor } = require('uivisor/next')
+ *   module.exports = withUivisor({ ...yourConfig })
+ *
+ * Then render <UivisorOverlay/> (from "uivisor/next/overlay") in your root layout.
+ *
+ * - webpack (`next dev --webpack`): injects `data-uiv-src` + the overlay automatically.
+ * - Turbopack (`next dev`): the overlay works via <UivisorOverlay/>; source locations
+ *   need either `--webpack` or `{ turbopack: true }` (experimental).
+ * Dev-only — nothing is added to production builds.
+ */
+declare function withUivisor(nextConfig?: NextConfig, options?: UivisorNextOptions): NextConfig;
+
+export { type UivisorNextOptions, withUivisor as default, withUivisor };

package/dist/next/index.d.ts

@@ -0,0 +1,41 @@
+interface WebpackContext {
+    dev: boolean;
+    isServer: boolean;
+}
+type NextConfig = {
+    webpack?: ((config: any, ctx: WebpackContext) => any) | null;
+    turbopack?: any;
+    [key: string]: unknown;
+};
+interface UivisorNextOptions {
+    /** data attribute name for source locations. Default: "data-uiv-src" */
+    attr?: string;
+    /**
+     * Register the source-location loader for Turbopack (`turbopack.rules`) so
+     * `data-uiv-src` is injected under plain `next dev` too. Default: true.
+     * Set false to disable if it ever conflicts with your setup (the overlay still
+     * works via <UivisorOverlay/>; use `next dev --webpack` for source attrs then).
+     */
+    turbopack?: boolean;
+}
+/**
+ * Wrap your Next.js config to enable uivisor in dev.
+ *
+ *   // next.config.ts / .mjs
+ *   import { withUivisor } from 'uivisor/next'
+ *   export default withUivisor({ ...yourConfig })
+ *
+ *   // next.config.js (CommonJS)
+ *   const { withUivisor } = require('uivisor/next')
+ *   module.exports = withUivisor({ ...yourConfig })
+ *
+ * Then render <UivisorOverlay/> (from "uivisor/next/overlay") in your root layout.
+ *
+ * - webpack (`next dev --webpack`): injects `data-uiv-src` + the overlay automatically.
+ * - Turbopack (`next dev`): the overlay works via <UivisorOverlay/>; source locations
+ *   need either `--webpack` or `{ turbopack: true }` (experimental).
+ * Dev-only — nothing is added to production builds.
+ */
+declare function withUivisor(nextConfig?: NextConfig, options?: UivisorNextOptions): NextConfig;
+
+export { type UivisorNextOptions, withUivisor as default, withUivisor };

package/dist/next/index.js

@@ -0,0 +1,95 @@
+// node_modules/tsup/assets/esm_shims.js
+import path from "path";
+import { fileURLToPath } from "url";
+var getFilename = () => fileURLToPath(import.meta.url);
+var getDirname = () => path.dirname(getFilename());
+var __dirname = /* @__PURE__ */ getDirname();
+
+// src/next/index.ts
+import * as path2 from "path";
+import { createRequire } from "module";
+var isProd = () => process.env.NODE_ENV === "production";
+var isTurbopack = () => !!process.env.TURBOPACK || !!process.env.TURBOPACK_DEV;
+function nextMajor() {
+  try {
+    const req = createRequire(path2.join(process.cwd(), "package.json"));
+    return parseInt(req("next/package.json").version, 10) || 0;
+  } catch {
+    return 0;
+  }
+}
+var hintShown = false;
+function turbopackHint(canSourceMap) {
+  if (hintShown || !isTurbopack() || isProd()) return;
+  hintShown = true;
+  console.log(
+    '\n[uivisor] Turbopack detected.\n  \u2022 Overlay: render <UivisorOverlay/> from "uivisor/next/overlay" in your root layout.\n' + (canSourceMap ? "  \u2022 Source locations: ON via turbopack.rules.\n" : "  \u2022 Exact file:line: use `next dev --webpack` (or remove `{ turbopack: false }`).\n")
+  );
+}
+function withUivisor(nextConfig = {}, options = {}) {
+  const attr = options.attr || "data-uiv-src";
+  const loaderPath = path2.join(__dirname, "loader.cjs");
+  const overlayPath = path2.join(__dirname, "..", "overlay", "index.js");
+  const useTurbopack = options.turbopack !== false && isTurbopack() && !isProd();
+  turbopackHint(useTurbopack);
+  const out = { ...nextConfig };
+  if (!isTurbopack()) {
+    out.webpack = (config, ctx) => {
+      if (typeof nextConfig.webpack === "function") {
+        config = nextConfig.webpack(config, ctx);
+      }
+      if (!ctx.dev) return config;
+      config.module = config.module || {};
+      config.module.rules = config.module.rules || [];
+      config.module.rules.push({
+        test: /\.(jsx|tsx)$/,
+        exclude: /node_modules/,
+        enforce: "pre",
+        use: [{ loader: loaderPath, options: { attr } }]
+      });
+      if (!ctx.isServer) {
+        const prevEntry = config.entry;
+        config.entry = async () => {
+          const entries = typeof prevEntry === "function" ? await prevEntry() : prevEntry;
+          for (const key of ["main-app", "main.js", "main"]) {
+            const e = entries[key];
+            if (!e) continue;
+            if (Array.isArray(e)) {
+              if (!e.includes(overlayPath)) e.unshift(overlayPath);
+            } else if (e && Array.isArray(e.import)) {
+              if (!e.import.includes(overlayPath)) e.import.unshift(overlayPath);
+            }
+          }
+          return entries;
+        };
+      }
+      return config;
+    };
+  }
+  if (useTurbopack) {
+    const ld = [{ loader: "uivisor/next/loader", options: { attr } }];
+    const rules = {
+      "*.tsx": { loaders: ld, as: "*.tsx" },
+      "*.jsx": { loaders: ld, as: "*.jsx" }
+    };
+    const major = nextMajor();
+    if (major === 0 || major >= 15) {
+      out.turbopack = {
+        ...nextConfig.turbopack,
+        rules: { ...nextConfig.turbopack?.rules ?? {}, ...rules }
+      };
+    } else {
+      const exp = nextConfig.experimental ?? {};
+      out.experimental = {
+        ...exp,
+        turbo: { ...exp.turbo ?? {}, rules: { ...exp.turbo?.rules ?? {}, ...rules } }
+      };
+    }
+  }
+  return out;
+}
+var next_default = withUivisor;
+export {
+  next_default as default,
+  withUivisor
+};

package/dist/next/overlay.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Dev-only overlay mount for Next.js. Render once near the end of your root
+ * layout's <body>. Works under BOTH Turbopack and webpack (no bundler magic) —
+ * it just dynamically imports the overlay on the client in development.
+ *
+ *   // app/layout.tsx
+ *   import { UivisorOverlay } from 'uivisor/next/overlay'
+ *   ...
+ *   <body>{children}<UivisorOverlay /></body>
+ */
+declare function UivisorOverlay(): null;
+
+export { UivisorOverlay, UivisorOverlay as default };

package/dist/next/overlay.js

@@ -0,0 +1,17 @@
+"use client";
+
+// src/next/overlay.ts
+import { useEffect } from "react";
+function UivisorOverlay() {
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production") {
+      void import("uivisor/overlay");
+    }
+  }, []);
+  return null;
+}
+var overlay_default = UivisorOverlay;
+export {
+  UivisorOverlay,
+  overlay_default as default
+};

package/dist/overlay/index.js

@@ -894,6 +894,16 @@ var CSS = (
 .uiv-newclass:focus { border-style: solid; border-color: #6366f1; color: #fff; }
 .uiv-newclass.on { border-style: solid; border-color: #22d3ee; color: #fff; }
 
+/* ---- current-styles readout ---- */
+.uiv-readout { display: flex; flex-direction: column; gap: 3px; }
+.uiv-rrow { display: grid; grid-template-columns: 70px 1fr; gap: 8px; align-items: center;
+  font-size: 11px; font-family: ui-monospace, monospace; }
+.uiv-rk { color: #71717a; }
+.uiv-rv { color: #fff; word-break: break-all; display: flex; align-items: center; gap: 6px; }
+.uiv-rv.changed { color: #4ade80; } /* edited in uivisor \u2192 green */
+.uiv-sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px;
+  border: 1px solid rgba(255,255,255,0.2); flex: 0 0 auto; }
+
 /* ---- Figma-like sectioned controls ---- */
 .uiv-sectitle { margin: 0 0 8px; font-size: 10px; text-transform: uppercase;
   letter-spacing: .5px; color: #8b8b94; font-weight: 600; }
@@ -908,7 +918,9 @@ var CSS = (
 /* numeric field with a scrub handle on the left */
 .uiv-num { display: flex; align-items: stretch; background: #27272a;
   border: 1px solid #3f3f46; border-radius: 7px; overflow: hidden; }
-.uiv-num.changed { border-color: #22d3ee; }
+.uiv-num.changed { border-color: #4ade80; }
+.uiv-num.changed input { color: #4ade80; } /* uivisor-edited value \u2192 green */
+.uiv-sel.changed, .uiv-color.changed { border-color: #4ade80; }
 .uiv-num:focus-within { border-color: #6366f1; }
 .uiv-scrub { display: flex; align-items: center; justify-content: center;
   width: 24px; color: #8b8b94; cursor: ew-resize; user-select: none;
@@ -948,7 +960,7 @@ var CSS = (
 .uiv-ctl input.uiv-text { width: 100%; background: #27272a; border: 1px solid #3f3f46;
   color: #fff; border-radius: 7px; padding: 6px 7px; font-size: 12px; outline: none; }
 .uiv-ctl input.uiv-text:focus { border-color: #6366f1; }
-.uiv-ctl input.uiv-text.changed { border-color: #22d3ee; }
+.uiv-ctl input.uiv-text.changed { border-color: #4ade80; color: #4ade80; }
 
 .uiv-journal { display: flex; flex-direction: column; gap: 8px; }
 .uiv-jitem { background: #1f1f23; border: 1px solid #27272a; border-radius: 8px; padding: 8px; }
@@ -1109,6 +1121,25 @@ var Uivisor = class {
     window.addEventListener("resize", this.onResize, true);
     this.renderBody();
     this.updateBp();
+    window.setTimeout(() => this.reportStatus(), 1500);
+  }
+  /** Tell the dev, in the console, whether uivisor is alive and source-mapped. */
+  reportStatus() {
+    try {
+      const n = document.querySelectorAll("[data-uiv-src]").length;
+      if (n > 0) {
+        console.info(
+          `%cuivisor%c active \u2014 Alt+U (or \u25CE) \xB7 ${n} source-mapped elements`,
+          "color:#818cf8;font-weight:700",
+          "color:inherit"
+        );
+      } else {
+        console.warn(
+          "[uivisor] active, but NO source attributes were found \u2014 exact file:line is OFF.\n\u2022 Next + Turbopack: run `next dev --webpack`, or enable the uivisor Turbopack loader.\n\u2022 Vite: make sure uivisor() is listed BEFORE react() in your plugins.\nTweaking still works (it falls back to component name + selector + text)."
+        );
+      }
+    } catch {
+    }
   }
   q(sel) {
     return this.root.querySelector(sel);
@@ -1476,6 +1507,7 @@ var Uivisor = class {
         <div class="uiv-src">${escapeHtml(src)}</div>
         <span class="uiv-mech">${st.record.styling.primaryMechanism}</span>
       </div>
+      ${this.currentStylesHtml()}
       ${this.breakpointBarHtml()}
       ${this.targetHtml(st)}
       ${this.controlsHtml(this.context(this.selected))}
@@ -1483,20 +1515,93 @@ var Uivisor = class {
     `;
     this.bindControls();
   }
+  /** Read-only readout of the element's actual current styles — so you don't guess. */
+  currentStylesHtml() {
+    const el = this.selected;
+    if (!el) return "";
+    let cs;
+    try {
+      cs = getComputedStyle(el);
+    } catch {
+      return "";
+    }
+    const g = (p) => cs.getPropertyValue(p).trim();
+    const hex = (v) => rgbToHex(v) || v;
+    const swatch = (v) => {
+      const h = hex(v);
+      return /^#|rgb/.test(h) ? `<span class="uiv-sw" style="background:${h}"></span>${h}` : h;
+    };
+    const box = (prefix) => {
+      const t = g(`${prefix}-top`);
+      const r = g(`${prefix}-right`);
+      const b = g(`${prefix}-bottom`);
+      const l = g(`${prefix}-left`);
+      if (t === r && r === b && b === l) return t;
+      if (t === b && r === l) return `${t} ${r}`;
+      return `${t} ${r} ${b} ${l}`;
+    };
+    const changedSet = new Set(this.st()?.record.changes.map((c) => c.property) ?? []);
+    const changed = (props) => props.some((p) => changedSet.has(p));
+    const px4 = (pre) => [`${pre}-top`, `${pre}-right`, `${pre}-bottom`, `${pre}-left`];
+    const rows = [];
+    const add = (k, v, props = []) => {
+      if (v) rows.push({ k, v, edited: changed(props) });
+    };
+    add("display", g("display"));
+    add("size", `${Math.round(parseFloat(g("width")) || 0)} \xD7 ${Math.round(parseFloat(g("height")) || 0)}`);
+    const pad = box("padding");
+    if (pad && pad !== "0px") add("padding", pad, px4("padding"));
+    const mar = box("margin");
+    if (mar && mar !== "0px") add("margin", mar, px4("margin"));
+    if (/flex|grid/.test(g("display"))) {
+      const gap = g("gap");
+      if (gap && gap !== "normal" && gap !== "0px") add("gap", gap, ["gap"]);
+    }
+    add("font", `${g("font-size")} \xB7 ${g("font-weight")} \xB7 lh ${g("line-height")}`, [
+      "font-size",
+      "font-weight",
+      "line-height"
+    ]);
+    const ls = g("letter-spacing");
+    if (ls && ls !== "normal") add("tracking", ls, ["letter-spacing"]);
+    add("color", swatch(g("color")), ["color"]);
+    const bg = g("background-color");
+    if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent")
+      add("background", swatch(bg), ["background-color"]);
+    const bw = g("border-top-width");
+    if (bw && parseFloat(bw) > 0)
+      add("border", `${bw} ${g("border-top-style")} ${hex(g("border-top-color"))}`, px4("border").map((p) => `${p}-width`));
+    const br = g("border-radius");
+    if (br && br !== "0px")
+      add("radius", br, [
+        "border-radius",
+        "border-top-left-radius",
+        "border-top-right-radius",
+        "border-bottom-right-radius",
+        "border-bottom-left-radius"
+      ]);
+    if (g("box-shadow") !== "none" && g("box-shadow")) add("shadow", "yes");
+    const op = g("opacity");
+    if (op && parseFloat(op) < 1) add("opacity", op);
+    const items = rows.map((r) => `<div class="uiv-rrow"><span class="uiv-rk">${r.k}</span><span class="uiv-rv${r.edited ? " changed" : ""}">${r.v}</span></div>`).join("");
+    return `<div class="uiv-sec"><div class="uiv-sectitle">Current styles</div><div class="uiv-readout">${items}</div></div>`;
+  }
   /** Breakpoint scope switcher: shows the PROJECT's breakpoints + the live window one. */
   breakpointBarHtml() {
     const sys = this.bpSystem();
     const bps = sys.breakpoints;
     const names = ["base", ...bps.map((b) => b.name)];
     const frameBp = this.responsive ? activeBreakpoint(this.frameWidth, sys).name : null;
-    const liveChip = `<button class="uiv-chip${!this.responsive ? " on" : ""}" data-bp="live" title="Your real browser window">Live</button>`;
+    const winBp = currentBreakpoint(sys).name;
+    const liveW = typeof window !== "undefined" ? window.innerWidth : 0;
+    const liveChip = `<button class="uiv-chip${!this.responsive ? " on" : ""}" data-bp="live" title="Follow your real browser window">Live</button>`;
     const chips = names.map((n) => {
-      const active = this.responsive && n === frameBp;
+      const active = this.responsive ? n === frameBp : n === winBp;
       const px2 = n === "base" ? 0 : bps.find((b) => b.name === n).minWidth;
       return `<button class="uiv-chip${active ? " on" : ""}" data-bp="${n}" title="Preview at \u2265${px2}px">${n}</button>`;
     }).join("");
     const detected = sys.name === "detected" ? "" : " (defaults)";
-    const hint = this.responsive ? `Virtual screen at <b>${this.frameWidth}px</b> (${frameBp}). Edits scoped to <b>${frameBp}:</b>. Drag the frame edge to fine-tune.` : `Click a size to shrink the screen to it & design for that breakpoint. Live = your real window.`;
+    const hint = this.responsive ? `Virtual screen at <b>${this.frameWidth}px</b> (${frameBp}). Edits scoped to <b>${frameBp}:</b>. Drag the frame edge to fine-tune.` : `Live \u2014 your window is <b>${liveW}px</b> = <b>${winBp}</b> range, edits scoped to <b>${winBp}:</b>. Click another size to shrink the screen to it.`;
     return `<div class="uiv-sec"><div class="uiv-sectitle">Screen / breakpoint${detected}</div><div class="uiv-chips">${liveChip}${chips}</div><div class="uiv-bphint">${hint}</div></div>`;
   }
   /** "Apply changes to": this element, an existing shared class, or a NEW class. */
@@ -1641,10 +1746,10 @@ var Uivisor = class {
     if (c.kind === "select") {
       const cur = this.selectCurrent(c.css);
       const opts = c.options.map((o) => `<option value="${o}"${o === cur ? " selected" : ""}>${o}</option>`).join("");
-      return `<div class="uiv-ctl"><span class="clabel">${c.label}</span><div class="cfield"><select class="uiv-sel" data-css="${c.css}">${opts}</select></div><span></span></div>`;
+      return `<div class="uiv-ctl"><span class="clabel">${c.label}</span><div class="cfield"><select class="uiv-sel${this.isChanged([c.css]) ? " changed" : ""}" data-css="${c.css}">${opts}</select></div><span></span></div>`;
     }
     const val = toHexInput(this.liveVal(c.css));
-    return `<div class="uiv-ctl"><span class="clabel">${c.label}</span><div class="cfield"><input type="color" class="uiv-color" data-css="${c.css}" value="${val}"></div><span></span></div>`;
+    return `<div class="uiv-ctl"><span class="clabel">${c.label}</span><div class="cfield"><input type="color" class="uiv-color${this.isChanged([c.css]) ? " changed" : ""}" data-css="${c.css}" value="${val}"></div><span></span></div>`;
   }
   bindControls() {
     const root = this.root;

package/package.json

@@ -1,10 +1,28 @@
 {
   "name": "uivisor",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "description": "Dev-only visual UI tweaker that turns mouse edits into a precise, breakpoint-aware prompt for your AI coding agent — without touching your source.",
   "license": "MIT",
-  "keywords": ["vite-plugin", "react", "devtools", "ai", "visual-editing", "tailwind"],
+  "author": "Kazbek Kabdulov",
+  "homepage": "https://github.com/kabdulov/uivisor#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kabdulov/uivisor.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kabdulov/uivisor/issues"
+  },
+  "keywords": [
+    "vite-plugin",
+    "next",
+    "turbopack",
+    "react",
+    "devtools",
+    "ai",
+    "visual-editing",
+    "tailwind"
+  ],
   "exports": {
     "./vite": {
       "types": "./dist/vite/index.d.ts",
@@ -22,26 +40,37 @@
       "default": "./dist/overlay/index.js"
     },
     "./next": {
-      "types": "./dist/next/index.d.cts",
-      "import": "./dist/next/index.cjs",
+      "types": "./dist/next/index.d.ts",
+      "import": "./dist/next/index.js",
       "require": "./dist/next/index.cjs",
       "default": "./dist/next/index.cjs"
     },
+    "./next/overlay": {
+      "types": "./dist/next/overlay.d.ts",
+      "import": "./dist/next/overlay.js",
+      "default": "./dist/next/overlay.js"
+    },
     "./next/loader": {
       "require": "./dist/next/loader.cjs",
       "default": "./dist/next/loader.cjs"
-    }
+    },
+    "./package.json": "./package.json"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public"
   },
   "engines": {
     "node": ">=18"
   },
-  "workspaces": ["demo", "demo-next"],
+  "workspaces": [
+    "demo",
+    "demo-next"
+  ],
   "scripts": {
-    "build": "tsup",
+    "build": "rm -rf dist && tsup",
     "dev": "tsup --watch",
     "test": "vitest run",
     "typecheck": "tsc --noEmit",
@@ -49,10 +78,16 @@
     "prepublishOnly": "npm run build && vitest run"
   },
   "peerDependencies": {
-    "vite": ">=4"
+    "vite": ">=4",
+    "react": ">=18"
   },
   "peerDependenciesMeta": {
-    "vite": { "optional": true }
+    "vite": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@babel/core": "^7.24.0"
@@ -61,7 +96,9 @@
     "@babel/types": "^7.24.0",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^20.11.0",
+    "@types/react": "^18.3.0",
     "jsdom": "^24.0.0",
+    "react": "^18.3.1",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",
     "vitest": "^1.6.0"