rn-studio 0.1.0

package/dist/components/InspectorPanel.js

@@ -0,0 +1,242 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorPanel = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const StudioProvider_1 = require("../StudioProvider");
+const StyleEditor_1 = require("./StyleEditor");
+const ComponentTree_1 = require("./ComponentTree");
+// Reanimated is a declared peer dependency. We attempt to use it for
+// the spring-based slide, falling back to the stock Animated API so the
+// overlay remains functional in environments where reanimated is not
+// yet configured.
+let Reanimated = null;
+let useSharedValue = null;
+let useAnimatedStyle = null;
+let withSpring = null;
+let withTiming = null;
+try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const r = require('react-native-reanimated');
+    Reanimated = r.default;
+    useSharedValue = r.useSharedValue;
+    useAnimatedStyle = r.useAnimatedStyle;
+    withSpring = r.withSpring;
+    withTiming = r.withTiming;
+}
+catch { }
+const { height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
+const PANEL_HEIGHT = SCREEN_HEIGHT * 0.6;
+/**
+ * InspectorPanel
+ *
+ * Bottom sheet shown when a component is selected. Three tabs:
+ * Styles | Tree | Props. Slides up with a spring animation.
+ */
+const InspectorPanel = () => {
+    const { selectedComponent, clearSelection } = (0, StudioProvider_1.useStudio)();
+    const [tab, setTab] = (0, react_1.useState)('styles');
+    const visible = !!selectedComponent;
+    if (Reanimated && useSharedValue) {
+        return (react_1.default.createElement(ReanimatedPanel, { visible: visible, onDismiss: clearSelection, tab: tab, setTab: setTab }));
+    }
+    // Fallback: render plainly when reanimated is unavailable.
+    if (!visible)
+        return null;
+    return (react_1.default.createElement(react_native_1.View, { style: [styles.panel, { transform: [{ translateY: 0 }] }] },
+        react_1.default.createElement(PanelChrome, { tab: tab, setTab: setTab, onDismiss: clearSelection }),
+        tab === 'styles' && react_1.default.createElement(StyleEditor_1.StyleEditor, null),
+        tab === 'tree' && react_1.default.createElement(ComponentTree_1.ComponentTree, null),
+        tab === 'props' && react_1.default.createElement(PropsView, null)));
+};
+exports.InspectorPanel = InspectorPanel;
+const ReanimatedPanel = ({ visible, onDismiss, tab, setTab }) => {
+    const translateY = useSharedValue(PANEL_HEIGHT);
+    (0, react_1.useEffect)(() => {
+        translateY.value = visible
+            ? withSpring(0, { damping: 20, stiffness: 200 })
+            : withTiming(PANEL_HEIGHT, { duration: 220 });
+    }, [visible, translateY]);
+    const animStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: translateY.value }],
+    }));
+    if (!visible)
+        return null;
+    const AnimatedView = Reanimated.View;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_native_1.TouchableOpacity, { activeOpacity: 1, onPress: onDismiss, style: styles.backdrop }),
+        react_1.default.createElement(AnimatedView, { style: [styles.panel, animStyle] },
+            react_1.default.createElement(PanelChrome, { tab: tab, setTab: setTab, onDismiss: onDismiss }),
+            tab === 'styles' && react_1.default.createElement(StyleEditor_1.StyleEditor, null),
+            tab === 'tree' && react_1.default.createElement(ComponentTree_1.ComponentTree, null),
+            tab === 'props' && react_1.default.createElement(PropsView, null))));
+};
+const PanelChrome = ({ tab, setTab, onDismiss }) => {
+    const { selectedComponent } = (0, StudioProvider_1.useStudio)();
+    return (react_1.default.createElement(react_native_1.View, null,
+        react_1.default.createElement(react_native_1.View, { style: styles.handleWrap },
+            react_1.default.createElement(react_native_1.View, { style: styles.handle })),
+        react_1.default.createElement(react_native_1.View, { style: styles.header },
+            react_1.default.createElement(react_native_1.Text, { style: styles.title, numberOfLines: 1 }, selectedComponent ? selectedComponent.componentName : 'Inspector'),
+            react_1.default.createElement(react_native_1.TouchableOpacity, { onPress: onDismiss, hitSlop: { top: 12, bottom: 12, left: 12, right: 12 } },
+                react_1.default.createElement(react_native_1.Text, { style: styles.close }, "\u2715"))),
+        react_1.default.createElement(react_native_1.View, { style: styles.tabs },
+            react_1.default.createElement(TabButton, { label: "Styles", active: tab === 'styles', onPress: () => setTab('styles') }),
+            react_1.default.createElement(TabButton, { label: "Tree", active: tab === 'tree', onPress: () => setTab('tree') }),
+            react_1.default.createElement(TabButton, { label: "Props", active: tab === 'props', onPress: () => setTab('props') }))));
+};
+const TabButton = ({ label, active, onPress, }) => (react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.tab, active && styles.tabActive], onPress: onPress },
+    react_1.default.createElement(react_native_1.Text, { style: [styles.tabText, active && styles.tabTextActive] }, label)));
+const PropsView = () => {
+    const { selectedComponent } = (0, StudioProvider_1.useStudio)();
+    if (!selectedComponent) {
+        return (react_1.default.createElement(react_native_1.View, { style: styles.empty },
+            react_1.default.createElement(react_native_1.Text, { style: styles.emptyText }, "No component selected")));
+    }
+    const entries = Object.entries(selectedComponent.props).filter(([k]) => k !== 'style' && k !== 'children' && k !== '__rnStudioSource');
+    if (!entries.length) {
+        return (react_1.default.createElement(react_native_1.View, { style: styles.empty },
+            react_1.default.createElement(react_native_1.Text, { style: styles.emptyText }, "No inspectable props")));
+    }
+    return (react_1.default.createElement(react_native_1.View, { style: { padding: 16 } }, entries.map(([k, v]) => (react_1.default.createElement(react_native_1.View, { key: k, style: styles.propRow },
+        react_1.default.createElement(react_native_1.Text, { style: styles.propKey }, k),
+        react_1.default.createElement(react_native_1.Text, { style: styles.propValue, numberOfLines: 2 }, safeStringify(v)))))));
+};
+function safeStringify(v) {
+    if (v === null)
+        return 'null';
+    if (typeof v === 'function')
+        return 'ƒ()';
+    if (typeof v === 'object') {
+        try {
+            return JSON.stringify(v);
+        }
+        catch {
+            return '[object]';
+        }
+    }
+    return String(v);
+}
+const styles = react_native_1.StyleSheet.create({
+    backdrop: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: PANEL_HEIGHT,
+        backgroundColor: 'transparent',
+    },
+    panel: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: PANEL_HEIGHT,
+        backgroundColor: '#111',
+        borderTopLeftRadius: 16,
+        borderTopRightRadius: 16,
+        zIndex: 999998,
+        elevation: 16,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: -4 },
+        shadowOpacity: 0.4,
+        shadowRadius: 12,
+    },
+    handleWrap: { alignItems: 'center', paddingTop: 8 },
+    handle: {
+        width: 40,
+        height: 4,
+        borderRadius: 2,
+        backgroundColor: '#444',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+    },
+    title: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '700',
+    },
+    close: {
+        color: '#888',
+        fontSize: 18,
+    },
+    tabs: {
+        flexDirection: 'row',
+        backgroundColor: '#1a1a1a',
+    },
+    tab: {
+        flex: 1,
+        paddingVertical: 12,
+        alignItems: 'center',
+    },
+    tabActive: {
+        borderBottomWidth: 2,
+        borderBottomColor: '#C6F135',
+    },
+    tabText: {
+        color: '#888',
+        fontSize: 13,
+        fontWeight: '600',
+    },
+    tabTextActive: {
+        color: '#C6F135',
+    },
+    empty: { padding: 32, alignItems: 'center' },
+    emptyText: { color: '#888', fontSize: 13 },
+    propRow: {
+        paddingVertical: 8,
+        borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderBottomColor: '#222',
+    },
+    propKey: {
+        color: '#C6F135',
+        fontSize: 12,
+        fontFamily: 'Menlo',
+        fontWeight: '600',
+    },
+    propValue: {
+        color: '#ddd',
+        fontSize: 12,
+        fontFamily: 'Menlo',
+        marginTop: 2,
+    },
+});
+//# sourceMappingURL=InspectorPanel.js.map

package/dist/components/InspectorPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InspectorPanel.js","sourceRoot":"","sources":["../../src/components/InspectorPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmD;AACnD,+CAMsB;AACtB,sDAA8C;AAC9C,+CAA4C;AAC5C,mDAAgD;AAEhD,qEAAqE;AACrE,wEAAwE;AACxE,qEAAqE;AACrE,kBAAkB;AAClB,IAAI,UAAU,GAAQ,IAAI,CAAC;AAC3B,IAAI,cAAc,GAAQ,IAAI,CAAC;AAC/B,IAAI,gBAAgB,GAAQ,IAAI,CAAC;AACjC,IAAI,UAAU,GAAQ,IAAI,CAAC;AAC3B,IAAI,UAAU,GAAQ,IAAI,CAAC;AAC3B,IAAI,CAAC;IACH,8DAA8D;IAC9D,MAAM,CAAC,GAAG,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAC7C,UAAU,GAAG,CAAC,CAAC,OAAO,CAAC;IACvB,cAAc,GAAG,CAAC,CAAC,cAAc,CAAC;IAClC,gBAAgB,GAAG,CAAC,CAAC,gBAAgB,CAAC;IACtC,UAAU,GAAG,CAAC,CAAC,UAAU,CAAC;IAC1B,UAAU,GAAG,CAAC,CAAC,UAAU,CAAC;AAC5B,CAAC;AAAC,MAAM,CAAC,CAAA,CAAC;AAIV,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,yBAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AAC3D,MAAM,YAAY,GAAG,aAAa,GAAG,GAAG,CAAC;AAEzC;;;;;GAKG;AACI,MAAM,cAAc,GAAa,GAAG,EAAE;IAC3C,MAAM,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,IAAA,0BAAS,GAAE,CAAC;IAC1D,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAM,QAAQ,CAAC,CAAC;IAE9C,MAAM,OAAO,GAAG,CAAC,CAAC,iBAAiB,CAAC;IAEpC,IAAI,UAAU,IAAI,cAAc,EAAE,CAAC;QACjC,OAAO,CACL,8BAAC,eAAe,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAI,CAC3F,CAAC;IACJ,CAAC;IAED,2DAA2D;IAC3D,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAC1B,OAAO,CACL,8BAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;QAC7D,8BAAC,WAAW,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,GAAI;QACnE,GAAG,KAAK,QAAQ,IAAI,8BAAC,yBAAW,OAAG;QACnC,GAAG,KAAK,MAAM,IAAI,8BAAC,6BAAa,OAAG;QACnC,GAAG,KAAK,OAAO,IAAI,8BAAC,SAAS,OAAG,CAC5B,CACR,CAAC;AACJ,CAAC,CAAC;AAtBW,QAAA,cAAc,kBAsBzB;AAEF,MAAM,eAAe,GAKhB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3C,MAAM,UAAU,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;IAEhD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,UAAU,CAAC,KAAK,GAAG,OAAO;YACxB,CAAC,CAAC,UAAU,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;YAChD,CAAC,CAAC,UAAU,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;IAClD,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAE1B,MAAM,SAAS,GAAG,gBAAgB,CAAC,GAAG,EAAE,CAAC,CAAC;QACxC,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,UAAU,CAAC,KAAK,EAAE,CAAC;KAC9C,CAAC,CAAC,CAAC;IAEJ,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,YAAY,GAAG,UAAU,CAAC,IAAI,CAAC;IAErC,OAAO,CACL;QACE,8BAAC,+BAAgB,IACf,aAAa,EAAE,CAAC,EAChB,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,MAAM,CAAC,QAAQ,GACtB;QACF,8BAAC,YAAY,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC;YAC5C,8BAAC,WAAW,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAI;YAC9D,GAAG,KAAK,QAAQ,IAAI,8BAAC,yBAAW,OAAG;YACnC,GAAG,KAAK,MAAM,IAAI,8BAAC,6BAAa,OAAG;YACnC,GAAG,KAAK,OAAO,IAAI,8BAAC,SAAS,OAAG,CACpB,CACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,WAAW,GAIZ,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE;IAClC,MAAM,EAAE,iBAAiB,EAAE,GAAG,IAAA,0BAAS,GAAE,CAAC;IAC1C,OAAO,CACL,8BAAC,mBAAI;QACH,8BAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,UAAU;YAC5B,8BAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,MAAM,GAAI,CACzB;QACP,8BAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,MAAM;YACxB,8BAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,aAAa,EAAE,CAAC,IACxC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAC7D;YACP,8BAAC,+BAAgB,IAAC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;gBACzF,8BAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,aAAU,CAClB,CACd;QACP,8BAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI;YACtB,8BAAC,SAAS,IAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAE,GAAG,KAAK,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAI;YACvF,8BAAC,SAAS,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAE,GAAG,KAAK,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,GAAI;YACjF,8BAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,MAAM,EAAE,GAAG,KAAK,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,GAAI,CAC/E,CACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAsE,CAAC,EACpF,KAAK,EACL,MAAM,EACN,OAAO,GACR,EAAE,EAAE,CAAC,CACJ,8BAAC,+BAAgB,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,OAAO;IACjF,8BAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,IAAG,KAAK,CAAQ,CAC5D,CACpB,CAAC;AAEF,MAAM,SAAS,GAAa,GAAG,EAAE;IAC/B,MAAM,EAAE,iBAAiB,EAAE,GAAG,IAAA,0BAAS,GAAE,CAAC;IAC1C,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACvB,OAAO,CACL,8BAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK;YACvB,8BAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,SAAS,4BAA8B,CACtD,CACR,CAAC;IACJ,CAAC;IACD,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,MAAM,CAC5D,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,OAAO,IAAI,CAAC,KAAK,UAAU,IAAI,CAAC,KAAK,kBAAkB,CACvE,CAAC;IACF,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;QACpB,OAAO,CACL,8BAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK;YACvB,8BAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,SAAS,2BAA6B,CACrD,CACR,CAAC;IACJ,CAAC;IACD,OAAO,CACL,8BAAC,mBAAI,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,IACzB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CACvB,8BAAC,mBAAI,IAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,OAAO;QACjC,8BAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,OAAO,IAAG,CAAC,CAAQ;QACvC,8BAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE,aAAa,EAAE,CAAC,IAC5C,aAAa,CAAC,CAAC,CAAC,CACZ,CACF,CACR,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,aAAa,CAAC,CAAU;IAC/B,IAAI,CAAC,KAAK,IAAI;QAAE,OAAO,MAAM,CAAC;IAC9B,IAAI,OAAO,CAAC,KAAK,UAAU;QAAE,OAAO,KAAK,CAAC;IAC1C,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE,CAAC;QAC1B,IAAI,CAAC;YACH,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC;QAAC,MAAM,CAAC;YACP,OAAO,UAAU,CAAC;QACpB,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;AACnB,CAAC;AAED,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,QAAQ,EAAE;QACR,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,aAAa;KAC/B;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,MAAM;QACvB,mBAAmB,EAAE,EAAE;QACvB,oBAAoB,EAAE,EAAE;QACxB,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,EAAE;QACb,WAAW,EAAE,MAAM;QACnB,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE;QACtC,aAAa,EAAE,GAAG;QAClB,YAAY,EAAE,EAAE;KACjB;IACD,UAAU,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,EAAE;IACnD,MAAM,EAAE;QACN,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,CAAC;QACT,YAAY,EAAE,CAAC;QACf,eAAe,EAAE,MAAM;KACxB;IACD,MAAM,EAAE;QACN,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,eAAe;QAC/B,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,EAAE;KACpB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;KAClB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,EAAE;KACb;IACD,IAAI,EAAE;QACJ,aAAa,EAAE,KAAK;QACpB,eAAe,EAAE,SAAS;KAC3B;IACD,GAAG,EAAE;QACH,IAAI,EAAE,CAAC;QACP,eAAe,EAAE,EAAE;QACnB,UAAU,EAAE,QAAQ;KACrB;IACD,SAAS,EAAE;QACT,iBAAiB,EAAE,CAAC;QACpB,iBAAiB,EAAE,SAAS;KAC7B;IACD,OAAO,EAAE;QACP,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;KAClB;IACD,aAAa,EAAE;QACb,KAAK,EAAE,SAAS;KACjB;IACD,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;IAC5C,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC1C,OAAO,EAAE;QACP,eAAe,EAAE,CAAC;QAClB,iBAAiB,EAAE,yBAAU,CAAC,aAAa;QAC3C,iBAAiB,EAAE,MAAM;KAC1B;IACD,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,OAAO;QACnB,UAAU,EAAE,KAAK;KAClB;IACD,SAAS,EAAE;QACT,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,OAAO;QACnB,SAAS,EAAE,CAAC;KACb;CACF,CAAC,CAAC"}

package/dist/components/SelectionOverlay.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * SelectionOverlay
+ *
+ * Full-screen overlay that dims the app when selection mode is active
+ * and draws a lime-green highlight box around the selected component.
+ *
+ * Touch resolution strategy: the overlay captures the touch, then asks
+ * the UIManager which native view is under the touch point via
+ * `findSubviewIn`. From that view ref we walk the fiber tree upwards
+ * (see fiberWalker.ts) to find the nearest component with
+ * `__rnStudioSource` metadata.
+ */
+export declare const SelectionOverlay: React.FC;
+//# sourceMappingURL=SelectionOverlay.d.ts.map

package/dist/components/SelectionOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionOverlay.d.ts","sourceRoot":"","sources":["../../src/components/SelectionOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAa3D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAqHpC,CAAC"}

package/dist/components/SelectionOverlay.js

@@ -0,0 +1,152 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionOverlay = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const StudioProvider_1 = require("../StudioProvider");
+const fiberWalker_1 = require("../utils/fiberWalker");
+/**
+ * SelectionOverlay
+ *
+ * Full-screen overlay that dims the app when selection mode is active
+ * and draws a lime-green highlight box around the selected component.
+ *
+ * Touch resolution strategy: the overlay captures the touch, then asks
+ * the UIManager which native view is under the touch point via
+ * `findSubviewIn`. From that view ref we walk the fiber tree upwards
+ * (see fiberWalker.ts) to find the nearest component with
+ * `__rnStudioSource` metadata.
+ */
+const SelectionOverlay = () => {
+    const { isActive, isSelecting, selectedComponent, selectComponent } = (0, StudioProvider_1.useStudio)();
+    const rootRef = (0, react_1.useRef)(null);
+    const [highlight, setHighlight] = (0, react_1.useState)(null);
+    const opacity = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const borderOpacity = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(opacity, {
+            toValue: isActive ? 1 : 0,
+            duration: 200,
+            useNativeDriver: true,
+        }).start();
+    }, [isActive, opacity]);
+    (0, react_1.useEffect)(() => {
+        if (selectedComponent) {
+            react_native_1.Animated.timing(borderOpacity, {
+                toValue: 1,
+                duration: 150,
+                useNativeDriver: true,
+            }).start();
+        }
+        else {
+            borderOpacity.setValue(0);
+        }
+    }, [selectedComponent, borderOpacity]);
+    const handleTouch = (evt) => {
+        if (!isSelecting)
+            return false;
+        const { pageX, pageY } = evt.nativeEvent;
+        const rootHandle = (0, react_native_1.findNodeHandle)(rootRef.current);
+        if (!rootHandle)
+            return true;
+        // findSubviewIn gives us the native view at a point. Then we climb
+        // the fiber tree to locate the nearest source-annotated owner.
+        try {
+            react_native_1.UIManager.findSubviewIn(rootHandle, [pageX, pageY, 1, 1], (_nativeX, _nativeY, _w, _h, tag) => {
+                if (!tag)
+                    return;
+                const fiber = (0, fiberWalker_1.fiberFromRef)({ stateNode: { _nativeTag: tag } });
+                // Most RN versions expose the fiber via private keys on the
+                // underlying view component instance; the walker defensively
+                // searches for them. If no fiber is found we still draw a
+                // placeholder highlight at the touch location.
+                let owner = null;
+                if (fiber)
+                    owner = (0, fiberWalker_1.findSourceOwner)(fiber);
+                if (owner) {
+                    const node = (0, fiberWalker_1.buildComponentNode)(owner.fiber, owner.source);
+                    selectComponent(node);
+                }
+                // Draw highlight at touch point (approximate). A production
+                // implementation would call measureInWindow on the resolved
+                // native component for a pixel-perfect box.
+                setHighlight({
+                    x: pageX - 30,
+                    y: pageY - 30,
+                    width: 60,
+                    height: 60,
+                });
+            });
+        }
+        catch {
+            // UIManager.findSubviewIn is not available on every platform; in
+            // that case we still acknowledge the touch so the user gets
+            // feedback.
+        }
+        triggerHaptic('impactMedium');
+        return true;
+    };
+    if (!isActive)
+        return null;
+    const { width, height } = react_native_1.Dimensions.get('window');
+    return (react_1.default.createElement(react_native_1.View, { ref: rootRef, pointerEvents: isSelecting ? 'box-only' : 'none', style: react_native_1.StyleSheet.absoluteFill, onStartShouldSetResponder: () => isSelecting, onResponderGrant: handleTouch },
+        react_1.default.createElement(react_native_1.Animated.View, { pointerEvents: "none", style: [
+                react_native_1.StyleSheet.absoluteFill,
+                { backgroundColor: 'rgba(0,0,0,0.3)', opacity },
+            ] }),
+        highlight && (react_1.default.createElement(react_native_1.Animated.View, { pointerEvents: "none", style: {
+                position: 'absolute',
+                left: highlight.x,
+                top: highlight.y,
+                width: highlight.width,
+                height: highlight.height,
+                borderWidth: 2,
+                borderColor: '#C6F135',
+                borderRadius: 4,
+                opacity: borderOpacity,
+            } })),
+        react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: { position: 'absolute', width, height } })));
+};
+exports.SelectionOverlay = SelectionOverlay;
+function triggerHaptic(type) {
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const Haptic = require('react-native-haptic-feedback').default;
+        Haptic.trigger(type, { enableVibrateFallback: false, ignoreAndroidSystemSettings: false });
+    }
+    catch { }
+}
+//# sourceMappingURL=SelectionOverlay.js.map

package/dist/components/SelectionOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionOverlay.js","sourceRoot":"","sources":["../../src/components/SelectionOverlay.tsx"],"names":[],"mappings":"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"}

package/dist/components/StyleEditor.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * StyleEditor
+ *
+ * Flat list of editable style properties for the currently selected
+ * component. Value changes are debounced (300ms) before being flushed
+ * through the WebSocket bridge.
+ */
+export declare const StyleEditor: React.FC;
+//# sourceMappingURL=StyleEditor.d.ts.map

package/dist/components/StyleEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyleEditor.d.ts","sourceRoot":"","sources":["../../src/components/StyleEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAY3D;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAkC/B,CAAC"}

package/dist/components/StyleEditor.js

@@ -0,0 +1,144 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyleEditor = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const StudioProvider_1 = require("../StudioProvider");
+/**
+ * StyleEditor
+ *
+ * Flat list of editable style properties for the currently selected
+ * component. Value changes are debounced (300ms) before being flushed
+ * through the WebSocket bridge.
+ */
+const StyleEditor = () => {
+    const { selectedComponent, updateStyle } = (0, StudioProvider_1.useStudio)();
+    if (!selectedComponent) {
+        return (react_1.default.createElement(react_native_1.View, { style: styles.empty },
+            react_1.default.createElement(react_native_1.Text, { style: styles.emptyText }, "No component selected")));
+    }
+    if (!selectedComponent.styles.length) {
+        return (react_1.default.createElement(react_native_1.View, { style: styles.empty },
+            react_1.default.createElement(react_native_1.Text, { style: styles.emptyText }, "This component has no inline styles to edit.")));
+    }
+    return (react_1.default.createElement(react_native_1.FlatList, { data: selectedComponent.styles, keyExtractor: (s) => s.key, contentContainerStyle: styles.list, renderItem: ({ item }) => (react_1.default.createElement(StyleRow, { property: item, onCommit: (value) => updateStyle(item.key, value) })) }));
+};
+exports.StyleEditor = StyleEditor;
+const StyleRow = ({ property, onCommit }) => {
+    const [value, setValue] = (0, react_1.useState)(String(property.value));
+    const [ackVisible, setAckVisible] = (0, react_1.useState)(false);
+    const debounce = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        setValue(String(property.value));
+    }, [property.value]);
+    const schedule = (next) => {
+        setValue(next);
+        if (debounce.current)
+            clearTimeout(debounce.current);
+        debounce.current = setTimeout(() => {
+            const coerced = property.type === 'number' ? Number(next) : next;
+            if (property.type === 'number' && Number.isNaN(coerced))
+                return;
+            onCommit(coerced);
+            setAckVisible(true);
+            setTimeout(() => setAckVisible(false), 1000);
+        }, 300);
+    };
+    return (react_1.default.createElement(react_native_1.View, { style: styles.row },
+        react_1.default.createElement(react_native_1.View, { style: styles.labelWrap },
+            property.type === 'color' && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: [
+                    styles.swatch,
+                    { backgroundColor: String(property.value) },
+                ], activeOpacity: 0.7 })),
+            react_1.default.createElement(react_native_1.Text, { style: styles.label }, property.key)),
+        react_1.default.createElement(react_native_1.View, { style: styles.inputWrap },
+            react_1.default.createElement(react_native_1.TextInput, { style: styles.input, value: value, onChangeText: schedule, keyboardType: property.type === 'number' ? 'numeric' : 'default', autoCapitalize: "none", autoCorrect: false, selectionColor: "#C6F135", placeholderTextColor: "#666" }),
+            ackVisible && react_1.default.createElement(react_native_1.Text, { style: styles.check }, "\u2713"))));
+};
+const styles = react_native_1.StyleSheet.create({
+    list: { padding: 16 },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 10,
+        borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderBottomColor: '#2a2a2a',
+    },
+    labelWrap: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    swatch: {
+        width: 16,
+        height: 16,
+        borderRadius: 4,
+        marginRight: 8,
+        borderWidth: 1,
+        borderColor: '#333',
+    },
+    label: {
+        color: '#ddd',
+        fontSize: 14,
+        fontFamily: 'Menlo',
+    },
+    inputWrap: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    },
+    input: {
+        backgroundColor: '#1a1a1a',
+        color: '#C6F135',
+        borderRadius: 6,
+        paddingHorizontal: 10,
+        paddingVertical: 6,
+        minWidth: 120,
+        textAlign: 'right',
+        fontFamily: 'Menlo',
+        fontSize: 13,
+    },
+    check: {
+        color: '#C6F135',
+        marginLeft: 8,
+        fontSize: 14,
+        fontWeight: '700',
+    },
+    empty: { padding: 32, alignItems: 'center' },
+    emptyText: { color: '#888', fontSize: 13 },
+});
+//# sourceMappingURL=StyleEditor.js.map

package/dist/components/StyleEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyleEditor.js","sourceRoot":"","sources":["../../src/components/StyleEditor.tsx"],"names":[],"mappings":"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"}

package/dist/context/StudioContext.d.ts

@@ -0,0 +1,7 @@
+import type { StudioContextValue } from '../types';
+/**
+ * React context carrying the live studio state. Consumers access it via
+ * the `useStudio()` hook exported from `StudioProvider`.
+ */
+export declare const StudioContext: React.Context<StudioContextValue | null>;
+//# sourceMappingURL=StudioContext.d.ts.map

package/dist/context/StudioContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StudioContext.d.ts","sourceRoot":"","sources":["../../src/context/StudioContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnD;;;GAGG;AACH,eAAO,MAAM,aAAa,0CAAiD,CAAC"}

package/dist/context/StudioContext.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudioContext = void 0;
+const react_1 = require("react");
+/**
+ * React context carrying the live studio state. Consumers access it via
+ * the `useStudio()` hook exported from `StudioProvider`.
+ */
+exports.StudioContext = (0, react_1.createContext)(null);
+//# sourceMappingURL=StudioContext.js.map

package/dist/context/StudioContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StudioContext.js","sourceRoot":"","sources":["../../src/context/StudioContext.ts"],"names":[],"mappings":";;;AAAA,iCAAsC;AAGtC;;;GAGG;AACU,QAAA,aAAa,GAAG,IAAA,qBAAa,EAA4B,IAAI,CAAC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * rn-studio — public barrel exports
+ *
+ * Consumer usage:
+ *
+ *   import { StudioProvider, useStudio } from 'rn-studio';
+ *
+ *   export default function App() {
+ *     return (
+ *       <StudioProvider enabled={__DEV__} bubblePosition="bottom-right">
+ *         <YourApp />
+ *       </StudioProvider>
+ *     );
+ *   }
+ */
+export { StudioProvider, useStudio } from './StudioProvider';
+export { WebSocketBridge } from './bridge/WebSocketBridge';
+export { FloatingBubble } from './components/FloatingBubble';
+export { SelectionOverlay } from './components/SelectionOverlay';
+export { InspectorPanel } from './components/InspectorPanel';
+export { StyleEditor } from './components/StyleEditor';
+export { ComponentTree } from './components/ComponentTree';
+export type { SourceLocation, ComponentNode, StyleProperty, StudioConfig, BubblePosition, StudioContextValue, StudioMessage, StudioState, } from './types';
+//# sourceMappingURL=index.d.ts.map